OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <script> | 3 <script> |
4 if (window.testRunner) | 4 if (window.testRunner) |
5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
6 </script> | 6 </script> |
7 <link href="resources/grid.css" rel="stylesheet"> | 7 <link href="resources/grid.css" rel="stylesheet"> |
8 <style> | 8 <style> |
9 .grid { | 9 .grid { |
10 grid-definition-columns: 70% 30%; | 10 grid-template-columns: 70% 30%; |
11 grid-definition-rows: 40% 60%; | 11 grid-template-rows: 40% 60%; |
12 width: 400px; | 12 width: 400px; |
13 height: 300px; | 13 height: 300px; |
14 } | 14 } |
15 | 15 |
16 .firstRowFirstColumn { | 16 .firstRowFirstColumn { |
17 width: 100%; | 17 width: 100%; |
18 height: 15px; | 18 height: 15px; |
19 } | 19 } |
20 | 20 |
21 .firstRowSecondColumn { | 21 .firstRowSecondColumn { |
(...skipping 12 matching lines...) Expand all Loading... |
34 } | 34 } |
35 </style> | 35 </style> |
36 <script src="../../resources/check-layout.js"></script> | 36 <script src="../../resources/check-layout.js"></script> |
37 <script> | 37 <script> |
38 function changeGridDefinitionsAndCheckValues() | 38 function changeGridDefinitionsAndCheckValues() |
39 { | 39 { |
40 var grid0 = document.getElementsByClassName("grid")[0]; | 40 var grid0 = document.getElementsByClassName("grid")[0]; |
41 var grid1 = document.getElementsByClassName("grid")[1]; | 41 var grid1 = document.getElementsByClassName("grid")[1]; |
42 var grid2 = document.getElementsByClassName("grid")[2]; | 42 var grid2 = document.getElementsByClassName("grid")[2]; |
43 document.body.offsetLeft; | 43 document.body.offsetLeft; |
44 grid0.style.gridDefinitionColumns = "40% 60%"; | 44 grid0.style.gridTemplateColumns = "40% 60%"; |
45 | 45 |
46 grid1.style.gridDefinitionRows = "30% 70%"; | 46 grid1.style.gridTemplateRows = "30% 70%"; |
47 | 47 |
48 grid2.style.gridDefinitionColumns = "40% 60%"; | 48 grid2.style.gridTemplateColumns = "40% 60%"; |
49 grid2.style.gridDefinitionRows = "30% 70%"; | 49 grid2.style.gridTemplateRows = "30% 70%"; |
50 | 50 |
51 checkLayout('.grid'); | 51 checkLayout('.grid'); |
52 } | 52 } |
53 window.addEventListener("load", changeGridDefinitionsAndCheckValues, false); | 53 window.addEventListener("load", changeGridDefinitionsAndCheckValues, false); |
54 </script> | 54 </script> |
55 <body> | 55 <body> |
56 | 56 |
57 <p>Test that changing percentage sized grid tracks make the grid items relayouts
.</p> | 57 <p>Test that changing percentage sized grid tracks make the grid items relayouts
.</p> |
58 | 58 |
59 <div style="position: relative"> | 59 <div style="position: relative"> |
(...skipping 18 matching lines...) Expand all Loading... |
78 <div class="grid" data-expected-width="400" data-expected-height="300"> | 78 <div class="grid" data-expected-width="400" data-expected-height="300"> |
79 <div class="firstRowFirstColumn" data-expected-width="160" data-expected-hei
ght="15"></div> | 79 <div class="firstRowFirstColumn" data-expected-width="160" data-expected-hei
ght="15"></div> |
80 <div class="firstRowSecondColumn" data-expected-width="15" data-expected-hei
ght="90"></div> | 80 <div class="firstRowSecondColumn" data-expected-width="15" data-expected-hei
ght="90"></div> |
81 <div class="secondRowFirstColumn" data-expected-width="80" data-expected-hei
ght="105"></div> | 81 <div class="secondRowFirstColumn" data-expected-width="80" data-expected-hei
ght="105"></div> |
82 <div class="secondRowSecondColumn" data-expected-width="240" data-expected-h
eight="210"></div> | 82 <div class="secondRowSecondColumn" data-expected-width="240" data-expected-h
eight="210"></div> |
83 </div> | 83 </div> |
84 </div> | 84 </div> |
85 | 85 |
86 </body> | 86 </body> |
87 </html> | 87 </html> |
OLD | NEW |