| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| #gridWithNone { |
| grid: none; |
| } |
| .gridWithTemplate { |
| grid: 10px / 15px; |
| } |
| .gridWithInherit { |
| grid: inherit; |
| } |
| #gridWithAutoFlowAndRows { |
| grid: column 10px; |
| } |
| #gridWithAutoFlowNone { |
| grid: none 10px; |
| } |
| #gridWithAutoFlowColumnDense { |
| grid: column dense 10px; |
| } |
| #gridWithAutoFlowDenseRow { |
| grid: dense row 10px; |
| } |
| #gridWithAutoFlowAndRowsAndColumns { |
| grid: column 10px / 20px; |
| } |
| |
| /* Bad values. */ |
| |
| #gridWithExplicitAndImplicit { |
| grid: 10px / 20px column; |
| } |
| #gridWithMisplacedNone1 { |
| grid: column 10px / none 20px; |
| } |
| #gridWithMisplacedNone2 { |
| grid: 10px / 20px none; |
| } |
| #gridWithMisplacedDense { |
| grid: dense column dense; |
| } |
| </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="gridWithAutoFlowAndRows"></div> |
| <div class="grid" id="gridWithAutoFlowNone"></div> |
| <div class="grid" id="gridWithAutoFlowColumnDense"></div> |
| <div class="grid" id="gridWithAutoFlowDenseRow"></div> |
| <div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div> |
| <div class="grid" id="gridWithExplicitAndImplicit"></div> |
| <div class="grid" id="gridWithMisplacedNone1"></div> |
| <div class="grid" id="gridWithMisplacedNone2"></div> |
| <div class="grid" id="gridWithMisplacedDense"></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("gridWithAutoFlowAndRows"), "none", "none", "none", "column", "10px", "10px"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "row", "auto", "auto"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "10px", "10px"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "10px", "10px"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAndColumns"), "none", "none", "none", "column", "20px", "10px"); |
| |
| debug(""); |
| debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')"); |
| testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "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"); |
| |
| 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("row dense 20px", "none", "none", "none", "row dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px"); |
| testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px"); |
| |
| 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("column 10px / 20px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px"); |
| testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial"); |
| |
| debug(""); |
| debug("Test the inherit value on reset-only subproperties (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')", "0px"); |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "0px"); |
| anotherElement.style.grid = "inherit"; |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "20px"); |
| shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "100px"); |
| </script> |
| </body> |
| </html> |
