Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html

Issue 333563003: [CSS Grid Layout] Update grid-auto-flow to the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Small fix in add/removeChild to avoid dirtying the grid in stack Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt » ('j') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..302fb7ca180d62d9d8aa149cfaa0f3737ac29a84 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,208 @@
<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;
+}
+/* Bad values. */
.gridAutoFlowInherit {
grid-auto-flow: inherit;
Julien - ping for review 2014/06/27 17:44:53 Inherit is always a valid keyword for CSS properti
Manuel Rego 2014/06/27 22:43:51 Ok, thanks for the clarification. Changed it to al
}
-/* Bad values. */
+.gridAutoFlowNone {
+ grid-auto-flow: none;
+}
.gridAutoFlowRows {
grid-auto-flow: rows;
}
.gridAutoFlowColumns {
grid-auto-flow: columns;
}
+.gridAutoFlowDense {
+ grid-auto-flow: dense;
+}
+.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 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 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'");
+ shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('grid-auto-flow')", "'row'");
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>
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt » ('j') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698