OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <link href="resources/grid.css" rel="stylesheet"> | |
5 <style type="text/css"> | |
6 #grid-1 { | |
7 grid-template-columns: 1fr 1fr; | |
8 } | |
9 | |
10 #firstColumnFloat { | |
11 width: 50%; | |
12 background-color: blue; | |
13 } | |
14 | |
15 #secondColumnFloat { | |
16 float: right; | |
17 width: 50%; | |
18 background-color: lime; | |
19 } | |
20 | |
21 #grid-2 { | |
22 grid-template-columns: auto; | |
23 } | |
24 | |
25 #oneColumnRegular { | |
26 background-color: blue; | |
27 } | |
28 </style> | |
29 <script src="../../resources/js-test.js"></script> | |
30 <script> | |
31 function runTest() { | |
32 if (window.testRunner) { | |
33 testRunner.useUnfortunateSynchronousResizeMode(); | |
Julien - ping for review
2014/02/07 00:13:57
O_o
| |
34 testRunner.dumpAsText(); | |
35 | |
36 window.resizeTo(400, 400); | |
37 window.resizeTo(600, 600); | |
38 | |
39 shouldBe("getComputedStyle(firstColumnGrid, '').getPropertyValue ('width')", "getComputedStyle(firstColumnFloat, '').getPropertyValue('width')"); | |
40 shouldBe("getComputedStyle(secondColumnGrid, '').getPropertyValu e('width')", "getComputedStyle(secondColumnFloat, '').getPropertyValue('width')" ); | |
41 | |
42 shouldBe("getComputedStyle(oneColumnGrid, '').getPropertyValue(' width')", "getComputedStyle(oneColumnRegular, '').getPropertyValue('width')"); | |
Julien - ping for review
2014/02/07 00:13:57
Can we have a check-layout.js test instead of manu
| |
43 } | |
44 } | |
45 </script> | |
46 </head> | |
47 <body onLoad="runTest();"> | |
48 <h1>Description</h1> | |
49 <p>Grid flex and content sized columns width should be updated properly when you resize the window (you should not see the grid background in grey color). I t should work like in the float and regular cases.</p> | |
Julien - ping for review
2014/02/07 00:13:57
Which float and regular case?
| |
50 <h1>Grid 2 flex columns</h1> | |
51 <div id="grid-1" class="grid"> | |
52 <div id="firstColumnGrid" class="firstRowFirstColumn">first column</div> | |
53 <div id="secondColumnGrid" class="firstRowSecondColumn">second column</d iv> | |
54 </div> | |
55 <h1>Float 2 columns</h1> | |
56 <div> | |
57 <div id="secondColumnFloat">second column</div> | |
58 <div id="firstColumnFloat">first column</div> | |
59 </div> | |
60 <h1>Grid 1 auto column</h1> | |
61 <div id="grid-2" class="grid"> | |
62 <div id="oneColumnGrid" class="firstRowFirstColumn"> | |
63 one column one column one column one column one column one column on e column one column | |
64 one column one column one column one column one column one column on e column one column | |
65 one column one column one column one column one column one column on e column one column | |
66 one column one column one column one column one column one column on e column one column | |
67 </div> | |
68 </div> | |
69 <h1>Regular 1 column</h1> | |
70 <div> | |
71 <div id="oneColumnRegular"> | |
72 one column one column one column one column one column one column on e column one column | |
73 one column one column one column one column one column one column on e column one column | |
74 one column one column one column one column one column one column on e column one column | |
75 one column one column one column one column one column one column on e column one column | |
76 </div> | |
77 </div> | |
78 </body> | |
79 </html> | |
OLD | NEW |