| OLD | NEW |
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 3 <style> | 4 <style> |
| 4 .grid { | 5 .grid { |
| 5 font: 50px/1 Ahem; | 6 font: 50px/1 Ahem; |
| 6 } | 7 } |
| 7 | 8 |
| 8 .singleNamedGridLines { | 9 .singleNamedGridLines { |
| 9 grid-template-columns: [a] auto [b]; | 10 grid-template-columns: [a] auto [b]; |
| 10 grid-template-rows: [x] auto [y]; | 11 grid-template-rows: [x] auto [y]; |
| 11 } | 12 } |
| 12 | 13 |
| 13 .multipleNamedGridLines { | 14 .multipleNamedGridLines { |
| 14 grid-template-columns: [a b c] auto [d e]; | 15 grid-template-columns: [a b c] auto [d e]; |
| 15 grid-template-rows: [x y z] auto [v w]; | 16 grid-template-rows: [x y z] auto [v w]; |
| 16 } | 17 } |
| 17 </style> | 18 </style> |
| 18 <script src="../../resources/js-test.js"></script> | 19 <script src="../../resources/js-test.js"></script> |
| 19 | 20 |
| 20 <div class="grid singleNamedGridLines" id="gridOneColumnSingle"> | 21 <div class="grid singleNamedGridLines justifyContentStart" id="gridOneColumnSing
le"> |
| 21 <div>XXXX</div> | 22 <div>XXXX</div> |
| 22 <div>XXX</div> | 23 <div>XXX</div> |
| 23 <div>XX</div> | 24 <div>XX</div> |
| 24 <div>X</div> | 25 <div>X</div> |
| 25 </div> | 26 </div> |
| 26 | 27 |
| 27 <div class="grid singleNamedGridLines" id="gridTwoColumnsSingle"> | 28 <div class="grid singleNamedGridLines justifyContentStart" id="gridTwoColumnsSin
gle"> |
| 28 <div class="firstRowAutoColumn">XXXX</div> | 29 <div class="firstRowAutoColumn">XXXX</div> |
| 29 <div class="firstRowAutoColumn">XXX</div> | 30 <div class="firstRowAutoColumn">XXX</div> |
| 30 <div>XX</div> | 31 <div>XX</div> |
| 31 <div>X</div> | 32 <div>X</div> |
| 32 </div> | 33 </div> |
| 33 | 34 |
| 34 <div class="grid singleNamedGridLines" id="gridThreeColumnsSingle"> | 35 <div class="grid singleNamedGridLines justifyContentStart" id="gridThreeColumnsS
ingle"> |
| 35 <div class="firstRowAutoColumn">XXXX</div> | 36 <div class="firstRowAutoColumn">XXXX</div> |
| 36 <div class="firstRowAutoColumn">XXX</div> | 37 <div class="firstRowAutoColumn">XXX</div> |
| 37 <div class="firstRowAutoColumn">XX</div> | 38 <div class="firstRowAutoColumn">XX</div> |
| 38 <div>X</div> | 39 <div>X</div> |
| 39 </div> | 40 </div> |
| 40 | 41 |
| 41 <div class="grid singleNamedGridLines" id="gridFourColumnsSingle"> | 42 <div class="grid singleNamedGridLines justifyContentStart" id="gridFourColumnsSi
ngle"> |
| 42 <div class="firstRowAutoColumn">XXXX</div> | 43 <div class="firstRowAutoColumn">XXXX</div> |
| 43 <div class="firstRowAutoColumn">XXX</div> | 44 <div class="firstRowAutoColumn">XXX</div> |
| 44 <div class="firstRowAutoColumn">XX</div> | 45 <div class="firstRowAutoColumn">XX</div> |
| 45 <div class="firstRowAutoColumn">X</div> | 46 <div class="firstRowAutoColumn">X</div> |
| 46 </div> | 47 </div> |
| 47 | 48 |
| 48 <div class="grid multipleNamedGridLines" id="gridOneColumnMultiple"> | 49 <div class="grid multipleNamedGridLines justifyContentStart" id="gridOneColumnMu
ltiple"> |
| 49 <div>XXXX</div> | 50 <div>XXXX</div> |
| 50 <div>XXX</div> | 51 <div>XXX</div> |
| 51 <div>XX</div> | 52 <div>XX</div> |
| 52 <div>X</div> | 53 <div>X</div> |
| 53 </div> | 54 </div> |
| 54 | 55 |
| 55 <div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple"> | 56 <div class="grid multipleNamedGridLines justifyContentStart" id="gridTwoColumnsM
ultiple"> |
| 56 <div class="firstRowAutoColumn">XXXX</div> | 57 <div class="firstRowAutoColumn">XXXX</div> |
| 57 <div class="firstRowAutoColumn">XXX</div> | 58 <div class="firstRowAutoColumn">XXX</div> |
| 58 <div>XX</div> | 59 <div>XX</div> |
| 59 <div>X</div> | 60 <div>X</div> |
| 60 </div> | 61 </div> |
| 61 | 62 |
| 62 <div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple"> | 63 <div class="grid multipleNamedGridLines justifyContentStart" id="gridThreeColumn
sMultiple"> |
| 63 <div class="firstRowAutoColumn">XXXX</div> | 64 <div class="firstRowAutoColumn">XXXX</div> |
| 64 <div class="firstRowAutoColumn">XXX</div> | 65 <div class="firstRowAutoColumn">XXX</div> |
| 65 <div class="firstRowAutoColumn">XX</div> | 66 <div class="firstRowAutoColumn">XX</div> |
| 66 <div>X</div> | 67 <div>X</div> |
| 67 </div> | 68 </div> |
| 68 | 69 |
| 69 <div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple"> | 70 <div class="grid multipleNamedGridLines justifyContentStart" id="gridFourColumns
Multiple"> |
| 70 <div class="firstRowAutoColumn">XXXX</div> | 71 <div class="firstRowAutoColumn">XXXX</div> |
| 71 <div class="firstRowAutoColumn">XXX</div> | 72 <div class="firstRowAutoColumn">XXX</div> |
| 72 <div class="firstRowAutoColumn">XX</div> | 73 <div class="firstRowAutoColumn">XX</div> |
| 73 <div class="firstRowAutoColumn">X</div> | 74 <div class="firstRowAutoColumn">X</div> |
| 74 </div> | 75 </div> |
| 75 | 76 |
| 76 <script src="resources/grid-definitions-parsing-utils.js"></script> | 77 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 77 <script> | 78 <script> |
| 78 description("Test that computed style for grid-template-columns and grid-tem
plate-rows works as expected with named grid lines and implicit tracks"); | 79 description("Test that computed style for grid-template-columns and grid-tem
plate-rows works as expected with named grid lines and implicit tracks"); |
| 79 | 80 |
| 80 testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "[
a] 200px [b]", "[x] 50px [y] 50px 50px 50px"); | 81 testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "[
a] 200px [b]", "[x] 50px [y] 50px 50px 50px"); |
| 81 testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "
[a] 200px [b] 150px", "[x] 50px [y] 50px"); | 82 testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "
[a] 200px [b] 150px", "[x] 50px [y] 50px"); |
| 82 testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"),
"[a] 200px [b] 150px 100px", "[x] 50px [y] 50px"); | 83 testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"),
"[a] 200px [b] 150px 100px", "[x] 50px [y] 50px"); |
| 83 testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"),
"[a] 200px [b] 150px 100px 50px", "[x] 50px [y]"); | 84 testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"),
"[a] 200px [b] 150px 100px 50px", "[x] 50px [y]"); |
| 84 | 85 |
| 85 testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"),
"[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px"); | 86 testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"),
"[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px"); |
| 86 testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"),
"[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px"); | 87 testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"),
"[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px"); |
| 87 testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"
), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px"); | 88 testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"
), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px"); |
| 88 testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple")
, "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]"); | 89 testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple")
, "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]"); |
| 89 </script> | 90 </script> |
| OLD | NEW |