| <!DOCTYPE HTML> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| font: 50px/1 Ahem; |
| } |
| |
| .singleNamedGridLines { |
| grid-template-columns: (a) auto (b); |
| grid-template-rows: (x) auto (y); |
| } |
| |
| .multipleNamedGridLines { |
| grid-template-columns: (a b c) auto (d e); |
| grid-template-rows: (x y z) auto (v w); |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| |
| <div class="grid singleNamedGridLines" id="gridOneColumnSingle"> |
| <div>XXXX</div> |
| <div>XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid singleNamedGridLines" id="gridTwoColumnsSingle"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid singleNamedGridLines" id="gridThreeColumnsSingle"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div class="firstRowAutoColumn">XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid singleNamedGridLines" id="gridFourColumnsSingle"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div class="firstRowAutoColumn">XX</div> |
| <div class="firstRowAutoColumn">X</div> |
| </div> |
| |
| <div class="grid multipleNamedGridLines" id="gridOneColumnMultiple"> |
| <div>XXXX</div> |
| <div>XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div class="firstRowAutoColumn">XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div class="firstRowAutoColumn">XX</div> |
| <div class="firstRowAutoColumn">X</div> |
| </div> |
| |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| description("Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks"); |
| |
| testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "(a) 200px (b)", "(x) 50px (y) 50px 50px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "(a) 200px (b) 150px", "(x) 50px (y) 50px"); |
| testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"), "(a) 200px (b) 150px 100px", "(x) 50px (y) 50px"); |
| testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"), "(a) 200px (b) 150px 100px 50px", "(x) 50px (y)"); |
| |
| testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"), "(a b c) 200px (d e)", "(x y z) 50px (v w) 50px 50px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"), "(a b c) 200px (d e) 150px", "(x y z) 50px (v w) 50px"); |
| testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"), "(a b c) 200px (d e) 150px 100px", "(x y z) 50px (v w) 50px"); |
| testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple"), "(a b c) 200px (d e) 150px 100px 50px", "(x y z) 50px (v w)"); |
| </script> |
