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 7ccc410356c34be1f4f2cf9aebc9c29092d2240c..e78846e4ffb4b796423319e4d9ce5efcea1e7346 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 |
@@ -3,83 +3,215 @@ |
<head> |
<link href="resources/grid.css" rel="stylesheet"> |
<style> |
+.gridAutoFlowColumnDense { |
+ grid-auto-flow: column dense; |
+} |
+.gridAutoFlowRowDense { |
+ grid-auto-flow: row dense; |
+} |
+.gridAutoFlowDenseColumn { |
+ grid-auto-flow: dense column; |
+} |
+.gridAutoFlowDenseRow { |
+ grid-auto-flow: dense row; |
+} |
+.gridAutoFlowStackColumn { |
+ grid-auto-flow: stack column; |
+} |
+.gridAutoFlowStackRow { |
+ grid-auto-flow: stack row; |
+} |
+.gridAutoFlowColumnStack { |
+ grid-auto-flow: column stack; |
+} |
+.gridAutoFlowRowStack { |
+ grid-auto-flow: row stack; |
+} |
.gridAutoFlowInherit { |
grid-auto-flow: inherit; |
} |
/* Bad values. */ |
+.gridAutoFlowNone { |
+ grid-auto-flow: none; |
+} |
.gridAutoFlowRows { |
grid-auto-flow: rows; |
} |
.gridAutoFlowColumns { |
grid-auto-flow: columns; |
} |
+.gridAutoFlowDense { |
+ grid-auto-flow: dense; |
+} |
+.gridAutoFlowColumnFoo { |
+ grid-auto-flow: column foo; |
+} |
+.gridAutoFlowColumnColumn { |
+ grid-auto-flow: column column; |
+} |
+.gridAutoFlowDenseColumnStack { |
+ grid-auto-flow: dense column stack; |
+} |
+.gridAutoFlowDenseRowStack { |
+ grid-auto-flow: dense row stack; |
+} |
+.gridAutoFlowStackRowRow { |
+ grid-auto-flow: stack row row; |
+} |
</style> |
<script src="../../resources/js-test.js"></script> |
</head> |
<body> |
<div class="grid" id="gridInitial"></div> |
-<div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> |
<div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> |
<div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> |
+<div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> |
+<div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> |
+<div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> |
+<div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> |
+<div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> |
+<div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> |
+<div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> |
+<div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> |
+<div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> |
<div class="grid gridAutoFlowColumn"> |
<div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> |
</div> |
<div class="grid gridAutoFlowColumn"> |
<div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div><div> |
</div> |
+<div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> |
<div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> |
<div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> |
+<div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> |
+<div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> |
+<div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> |
+<div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"></div> |
+<div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div> |
+<div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> |
<script> |
description('Test that setting and getting grid-auto-flow works as expected'); |
debug("Test getting auto-flow set through CSS"); |
- var gridAutoFlowNone = document.getElementById("gridAutoFlowNone"); |
- shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('grid-auto-flow')", "'none'"); |
- |
var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); |
shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('grid-auto-flow')", "'column'"); |
var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); |
shouldBe("window.getComputedStyle(gridAutoFlowRow, '').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')", "'none'"); |
+ shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('grid-auto-flow')", "'row'"); |
var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); |
- shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('grid-auto-flow')", "'none'"); |
+ 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')", "'none'"); |
+ shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('grid-auto-flow')", "'row'"); |
debug(""); |
debug("Test the initial value"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'"); |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
debug(""); |
debug("Test getting and setting grid-auto-flow through JS"); |
element.style.gridAutoFlow = "column"; |
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column'"); |
- |
- element = document.createElement("div"); |
- document.body.appendChild(element); |
+ element.style.gridAutoFlow = "column dense"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column dense'"); |
+ element.style.gridAutoFlow = "row dense"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row dense'"); |
+ element.style.gridAutoFlow = "dense column"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column dense'"); |
+ element.style.gridAutoFlow = "dense row"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row dense'"); |
element.style.gridAutoFlow = "row"; |
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ element.style.gridAutoFlow = "stack"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
+ element.style.gridAutoFlow = "stack column"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack column'"); |
+ element.style.gridAutoFlow = "stack row"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack row'"); |
+ element.style.gridAutoFlow = "column stack"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'stack column'"); |
+ element.style.gridAutoFlow = "row stack"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'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("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ element.style.gridAutoFlow = "dense"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ element.style.gridAutoFlow = "column column"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ element.style.gridAutoFlow = "dense column stack"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ element.style.gridAutoFlow = "dense row stack"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
+ element.style.gridAutoFlow = "stack row row"; |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'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("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'"); |
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); |
</script> |
</body> |
</html> |