| 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 |