| <!DOCTYPE HTML> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="resources/grid-alignment.css" rel="stylesheet"> |
| <style> |
| .grid { |
| font: 50px/1 Ahem; |
| position: relative; |
| } |
| |
| .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 justifyContentStart" id="gridOneColumnSingle"> |
| <div>XXXX</div> |
| <div>XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid singleNamedGridLines justifyContentStart" id="gridTwoColumnsSingle"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid singleNamedGridLines justifyContentStart" 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 justifyContentStart" 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 justifyContentStart" id="gridOneColumnMultiple"> |
| <div>XXXX</div> |
| <div>XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid multipleNamedGridLines justifyContentStart" id="gridTwoColumnsMultiple"> |
| <div class="firstRowAutoColumn">XXXX</div> |
| <div class="firstRowAutoColumn">XXX</div> |
| <div>XX</div> |
| <div>X</div> |
| </div> |
| |
| <div class="grid multipleNamedGridLines justifyContentStart" 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 justifyContentStart" 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> |
| function testSizeAndPositionOfItems(element, expectedItemData) { |
| window.element = element; |
| var elementID = element.id || "element"; |
| shouldBeEqualToNumber(elementID + ".childElementCount", expectedItemData.length); |
| var props = ["offsetWidth", "offsetTop", "offsetHeight"]; |
| for (var i = 0; i < expectedItemData.length; ++i) |
| for (let prop of props) |
| shouldBeEqualToNumber(elementID + ".children[" + i + "]." + prop, expectedItemData[i][prop]); |
| } |
| |
| function testGrid(element, columnValue, rowValue, expectedItemData) { |
| testGridTemplatesValues(element, columnValue, rowValue); |
| testSizeAndPositionOfItems(element, expectedItemData); |
| } |
| |
| description("Test that computed style for grid-template-columns and grid-template-rows works as expected, with named grid lines but without implicit tracks. Also test the size and position of the items, since the size of implicit tracks is not exposed"); |
| |
| testGrid(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 100, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 150, offsetHeight: 50}, |
| ]); |
| testGrid(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 50, offsetHeight: 50}, |
| ]); |
| testGrid(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50}, |
| ]); |
| testGrid(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 450, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, |
| ]); |
| |
| testGrid(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 100, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 150, offsetHeight: 50}, |
| ]); |
| testGrid(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 50, offsetHeight: 50}, |
| ]); |
| testGrid(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50}, |
| ]); |
| testGrid(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [ |
| {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, |
| {offsetLeft: 450, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, |
| ]); |
| </script> |
