| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| #gridWithNone { |
| grid: none; |
| } |
| .gridWithTemplate { |
| grid: 10px / 15px; |
| } |
| .gridWithInherit { |
| grid: inherit; |
| } |
| #gridColumnsAndAutoFlow { |
| grid: auto-flow / 10px; |
| } |
| #gridWithAutoFlowAndAutoRows { |
| grid: auto-flow 10px / none; |
| } |
| #gridWithAutoFlowColumnDense { |
| grid: none / auto-flow dense; |
| } |
| #gridWithAutoFlowDenseRow { |
| grid: auto-flow dense / none; |
| } |
| #gridWithAutoFlowAndAutoRowsAndColumns { |
| grid: auto-flow 10px / 20px; |
| } |
| #gridWithAutoFlowAndMultipleAutoTracks { |
| grid: auto-flow 20px 10px / 100px 50px; |
| } |
| #gridWithRowsAndAutoFlow { |
| grid: 10px / auto-flow; |
| } |
| #gridWithRowsNoneAndAutoFlowAndAutoColumn { |
| grid: none / auto-flow 10px; |
| } |
| #gridWithRowsAndAutoFlowDenseColumn { |
| grid: 10px / auto-flow dense; |
| } |
| #gridWithColumnsAndDenseAutoFlow { |
| grid: dense auto-flow / 10px; |
| } |
| #gridWithRowsAndAutoFlowAndAutoColumns { |
| grid: 20px / auto-flow 10px; |
| } |
| #gridWithRowsAndAutoFlowAndMultipleAutoTracks { |
| grid: 100px 50px / auto-flow 20px 10px; |
| } |
| |
| /* Bad values. */ |
| |
| #gridWithMisplacedAutoColumn { |
| grid: 10px / 20px auto-flow; |
| } |
| #gridWithMisplacedNone1 { |
| grid: auto-flow 10px / none 20px; |
| } |
| #gridWithMisplacedNone2 { |
| grid: 10px / 20px none; |
| } |
| #gridWithMisplacedDense { |
| grid: dense 10px / auto-flow 20px; |
| } |
| #gridWithDuplicatedDense { |
| grid: dense auto-flow dense / 10px; |
| } |
| #gridWithOnlyDense { |
| grid: dense / 10px; |
| } |
| #gridWithoutColumnInfo { |
| grid: auto-flow dense 10px; |
| } |
| #gridWithTwoAutoFlow { |
| grid: auto-flow / auto-flow 20px; |
| } |
| #gridWithImplicitAndNoExplicit { |
| grid: column 20px / 10px; |
| } |
| #gridWithExtraIdBeforeAutoFlowColumn { |
| grid: 10px / a auto-flow 20px; |
| } |
| #gridWithExtraIdBeforeAutoFlowRow { |
| grid: a auto-flow 10px / 20px; |
| } |
| #gridWithExtraIdBeforeAutoColumn { |
| grid: 10px / auto-flow a 20px; |
| } |
| #gridWithExtraIdAfterAutoColumn { |
| grid: 10px / auto-flow 20px a; |
| } |
| #gridWithExtraIdBeforeAutoRow { |
| grid: auto-flow a 20px / 10px; |
| } |
| #gridWithExtraIdAfterAutoRow { |
| grid: auto-flow 20px a / 10px; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div class="grid" id="gridWithNone"></div> |
| <div class="grid gridWithTemplate" id="gridWithTemplate"></div> |
| <div class="grid gridWithTemplate"> |
| <div class="grid gridWithInherit" id="gridInherit"></div> |
| </div> |
| <div class="grid" class="gridWithTemplate"> |
| <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div> |
| </div--> |
| <div class="grid" id="gridColumnsAndAutoFlow"></div> |
| <div class="grid" id="gridWithAutoFlowAndAutoRows"></div> |
| <div class="grid" id="gridWithAutoFlowColumnDense"></div> |
| <div class="grid" id="gridWithAutoFlowDenseRow"></div> |
| <div class="grid" id="gridWithAutoFlowAndAutoRowsAndColumns"></div> |
| <div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div> |
| <div class="grid" id="gridWithRowsAndAutoFlow"></div> |
| <div class="grid" id="gridWithRowsNoneAndAutoFlowAndAutoColumn"></div> |
| <div class="grid" id="gridWithRowsAndAutoFlowDenseColumn"></div> |
| <div class="grid" id="gridWithColumnsAndDenseAutoFlow"></div> |
| <div class="grid" id="gridWithRowsAndAutoFlowAndAutoColumns"></div> |
| <div class="grid" id="gridWithRowsAndAutoFlowAndMultipleAutoTracks"></div> |
| <div class="grid" id="gridWithMisplacedAutoColumn"></div> |
| <div class="grid" id="gridWithMisplacedNone1"></div> |
| <div class="grid" id="gridWithMisplacedNone2"></div> |
| <div class="grid" id="gridWithMisplacedDense"></div> |
| <div class="grid" id="gridWithDuplicatedDense"></div> |
| <div class="grid" id="gridWithOnlyDense"></div> |
| <div class="grid" id="gridWithoutColumnInfo"></div> |
| <div class="grid" id="gridWithTwoAutoFlow"></div> |
| <div class="grid" id="gridWithImplicitAndNoExplicit"></div> |
| <div class="grid" id="gridWithExtraIdBeforeAutoFlowColumn"></div> |
| <div class="grid" id="gridWithExtraIdBeforeAutoFlowRow"></div> |
| <div class="grid" id="gridWithExtraIdBeforeAutoColumn"></div> |
| <div class="grid" id="gridWithExtraIdAfterAutoColumn"></div> |
| <div class="grid" id="gridWithExtraIdBeforeAutoRow"></div> |
| <div class="grid" id="gridWithExtraIdAfterAutoRow"></div> |
| <script src="resources/grid-shorthand-parsing-utils.js"></script> |
| <script> |
| description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned."); |
| |
| debug("Test getting the longhand values when shorthand is set through CSS."); |
| testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "10px", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridColumnsAndAutoFlow"), "10px", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRows"), "none", "none", "none", "row", "auto", "10px"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRowsAndColumns"), "20px", "none", "none", "row", "auto", "10px"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultipleAutoTracks"), "100px 50px", "none", "none", "row", "auto", "20px 10px"); |
| |
| testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlow"), "none", "10px", "none", "column", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithRowsNoneAndAutoFlowAndAutoColumn"), "none", "none", "none", "column", "10px", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowDenseColumn"), "none", "10px", "none", "column dense", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithColumnsAndDenseAutoFlow"), "10px", "none", "none", "row dense", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndAutoColumns"), "none", "20px", "none", "column", "10px", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndMultipleAutoTracks"), "none", "100px 50px", "none", "column", "20px 10px", "auto"); |
| |
| debug(""); |
| debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')"); |
| testGridDefinitionsValues(document.getElementById("gridWithMisplacedAutoColumn"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithDuplicatedDense"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithOnlyDense"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithoutColumnInfo"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithTwoAutoFlow"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithImplicitAndNoExplicit"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowColumn"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowRow"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoColumn"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoColumn"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoRow"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoRow"), "none", "none", "none", "row", "auto", "auto"); |
| |
| debug(""); |
| debug("Test getting and setting 'grid' shorthand through JS"); |
| testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial"); |
| testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial"); |
| testGridDefinitionsSetJSValues("auto-flow dense 20px / none", "none", "none", "none", "row dense", "auto", "20px", "none", "initial", "initial", "row dense", "initial", "20px"); |
| testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "initial"); |
| testGridDefinitionsSetJSValues("none / auto-flow dense 20px", "none", "none", "none", "column dense", "20px", "auto", "initial", "none", "initial", "column dense", "20px", "initial"); |
| testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "initial"); |
| |
| debug(""); |
| debug("Test the initial value"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "auto"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'"); |
| |
| debug(""); |
| debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS"); |
| testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "initial"); |
| testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial"); |
| testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "initial"); |
| testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial"); |
| |
| debug(""); |
| debug("Test the inherit value does not affect gutter properties (grid-*-gap)"); |
| document.body.style.gridRowGap = "100px"; |
| document.body.style.gridColumnGap = "20px"; |
| var anotherElement = document.createElement("div"); |
| document.body.appendChild(anotherElement); |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "normal"); |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "normal"); |
| anotherElement.style.grid = "inherit"; |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "normal"); |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "normal"); |
| </script> |
| </body> |
| </html> |
