Index: LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html b/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html |
index 19a78efbe9355ce73d4ace165d91958b2ed2a0bb..45a7a314b0e1c9016ea0bb37dc9a9e40c5116a4c 100644 |
--- a/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html |
+++ b/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html |
@@ -89,147 +89,67 @@ |
<div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"></div> |
<div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div> |
<div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> |
+<script src="resources/grid-definitions-parsing-utils.js"></script> |
<script> |
description('Test that setting and getting grid-auto-flow works as expected'); |
- debug("Test getting auto-flow set through CSS"); |
- var gridAutoFlowColumnSparse = document.getElementById("gridAutoFlowColumnSparse"); |
- shouldBe("window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyValue('grid-auto-flow')", "'column'"); |
+ debug("Test getting grid-auto-flow set through CSS"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowStack", "stack row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowStackColumn", "stack column"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "stack row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "stack column"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowRowStack", "stack row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row"); |
- var gridAutoFlowRowSparse = document.getElementById("gridAutoFlowRowSparse"); |
- shouldBe("window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDense"); |
- shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('grid-auto-flow')", "'column dense'"); |
- |
- var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); |
- shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('grid-auto-flow')", "'row dense'"); |
- |
- var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColumn"); |
- shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('grid-auto-flow')", "'column dense'"); |
- |
- var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow"); |
- shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('grid-auto-flow')", "'row dense'"); |
- |
- var gridAutoFlowStack = document.getElementById("gridAutoFlowStack"); |
- shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
- |
- var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColumn"); |
- shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('grid-auto-flow')", "'stack column'"); |
- |
- var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow"); |
- shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
- |
- var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnStack"); |
- shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('grid-auto-flow')", "'stack column'"); |
- |
- var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack"); |
- shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
- |
- var gridAutoFlowNone = document.getElementById("gridAutoFlowNone"); |
- shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns"); |
- shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); |
- shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowDense = document.getElementById("gridAutoFlowDense"); |
- shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowColumnFoo = document.getElementById("gridAutoFlowColumnFoo"); |
- shouldBe("window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnColumn"); |
- shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDenseColumnStack"); |
- shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRowStack"); |
- shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowRow"); |
- shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- |
- var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit"); |
- shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('grid-auto-flow')", "'column'"); |
- |
- var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit"); |
- shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ debug(""); |
+ debug("Test getting grid-auto-flow bad values set through CSS"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnStack", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row"); |
+ checkGridAutoFlowSetCSSValue("gridAutoFlowStackRowRow", "row"); |
debug(""); |
debug("Test the initial value"); |
- element = document.createElement("div"); |
- document.body.appendChild(element); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ checkGridAutoFlowSetJSValue("", "", "row"); |
- debug(""); |
debug("Test getting and setting grid-auto-flow through JS"); |
- element.style.gridAutoFlow = "column"; |
- shouldBe("element.style.gridAutoFlow", "'column'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column'"); |
- element.style.gridAutoFlow = "column dense"; |
- shouldBe("element.style.gridAutoFlow", "'column dense'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column dense'"); |
- element.style.gridAutoFlow = "row dense"; |
- shouldBe("element.style.gridAutoFlow", "'row dense'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row dense'"); |
- element.style.gridAutoFlow = "dense column"; |
- shouldBe("element.style.gridAutoFlow", "'dense column'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column dense'"); |
- element.style.gridAutoFlow = "dense row"; |
- shouldBe("element.style.gridAutoFlow", "'dense row'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row dense'"); |
- element.style.gridAutoFlow = "row"; |
- shouldBe("element.style.gridAutoFlow", "'row'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- element.style.gridAutoFlow = "stack"; |
- shouldBe("element.style.gridAutoFlow", "'stack'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
- element.style.gridAutoFlow = "stack column"; |
- shouldBe("element.style.gridAutoFlow", "'stack column'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack column'"); |
- element.style.gridAutoFlow = "stack row"; |
- shouldBe("element.style.gridAutoFlow", "'stack row'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
- element.style.gridAutoFlow = "column stack"; |
- shouldBe("element.style.gridAutoFlow", "'column stack'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack column'"); |
- element.style.gridAutoFlow = "row stack"; |
- shouldBe("element.style.gridAutoFlow", "'row stack'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
+ checkGridAutoFlowSetJSValue("column", "column", "column"); |
+ checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense"); |
+ checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense"); |
+ checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense"); |
+ checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense"); |
+ checkGridAutoFlowSetJSValue("row", "row", "row"); |
+ checkGridAutoFlowSetJSValue("stack", "stack", "stack row"); |
+ checkGridAutoFlowSetJSValue("stack column", "stack column", "stack column"); |
+ checkGridAutoFlowSetJSValue("stack row", "stack row", "stack row"); |
+ checkGridAutoFlowSetJSValue("column stack", "column stack", "stack column"); |
+ checkGridAutoFlowSetJSValue("row stack", "row stack", "stack row"); |
debug(""); |
debug("Test getting and setting bad values for grid-auto-flow through JS"); |
- element = document.createElement("div"); |
- document.body.appendChild(element); |
- element.style.gridAutoFlow = "noone"; |
- shouldBe("element.style.gridAutoFlow", "''"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- element.style.gridAutoFlow = "dense"; |
- shouldBe("element.style.gridAutoFlow", "''"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- element.style.gridAutoFlow = "column column"; |
- shouldBe("element.style.gridAutoFlow", "''"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- element.style.gridAutoFlow = "dense column stack"; |
- shouldBe("element.style.gridAutoFlow", "''"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- element.style.gridAutoFlow = "dense row stack"; |
- shouldBe("element.style.gridAutoFlow", "''"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
- element.style.gridAutoFlow = "stack row row"; |
- shouldBe("element.style.gridAutoFlow", "''"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ checkGridAutoFlowSetJSValue("noone", "", "row"); |
+ checkGridAutoFlowSetJSValue("dense", "", "row"); |
+ checkGridAutoFlowSetJSValue("column column", "", "row"); |
+ checkGridAutoFlowSetJSValue("dense column stack", "", "row"); |
+ checkGridAutoFlowSetJSValue("dense row stack", "", "row"); |
+ checkGridAutoFlowSetJSValue("stack row row", "", "row"); |
debug(""); |
debug("Test setting grid-auto-flow to 'initial' through JS"); |
// Reusing the value so that we can check that it is set back to its initial value. |
- element.style.gridAutoFlow = "initial"; |
- shouldBe("element.style.gridAutoFlow", "'initial'"); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ checkGridAutoFlowSetJSValue("initial", "initial", "row"); |
</script> |
</body> |
</html> |