[CSS Grid Layout] Update grid-auto-flow to the new syntax
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 11 Jul 2014 10:42:32 +0000 (10:42 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 11 Jul 2014 10:42:32 +0000 (10:42 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134057

Reviewed by Sergio Villar Senin.

Source/WebCore:
In last versions of the spec grid-auto-flow syntax has changed. New
syntax is:
[ row | column ] && dense? | stack && [ row | column ]?

Implemented parsing for new syntax and added/modified test cases in
current layout tests.

For the moment, the implementation keeps working in the same way, but
using "stack" value for grid-auto-flow property instead of "none". This
should be fixed in a follow-up patch once "stack" is properly
implemented.

Also "dense" needs to be reviewed. Right now auto-placement algorithm is
always "dense" and never "sparse".

No new tests, update current tests to add new cases.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue): Adapt to new syntax.
* css/CSSParser.cpp:
(WebCore::isValidKeywordPropertyAndValue): Removed grid-auto-flow as it
is not a keyword anymore.
(WebCore::isKeywordPropertyID): Ditto.
(WebCore::CSSParser::parseValue): Add specific method for parsing
grid-auto-flow.
(WebCore::CSSParser::parseGridShorthand): Adapt parsing for
grid-auto-flow property inside the shorthand.
(WebCore::isValidGridAutoFlowId): Helper method to check if the CSSValue
id is a valid keyword for grid-auto-flow property.
(WebCore::CSSParser::parseGridAutoFlow): Implement new parsing for
grid-auto-flow.
* css/CSSParser.h: Method header for grid-auto-flow parsing.
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::operator GridAutoFlow): Deleted.
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue): Deleted.
* css/CSSValueKeywords.in: Add new keywords required by grid-auto-flow:
"dense" and "stack".
* css/DeprecatedStyleBuilder.cpp:
(WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder): Remove
default handler as grid-auto-flow is not a keyword now.
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty): Implement particular handler
for new grid-auto-flow syntax.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::placeItemsOnGrid): Keep old "none" behavior as
"stack" behavior for the moment.
(WebCore::RenderGrid::autoPlacementMajorAxisDirection): Use the new
helper methods in RenderStyle.
(WebCore::RenderGrid::autoPlacementMinorAxisDirection): Ditto.
* rendering/style/GridResolvedPosition.cpp:
(WebCore::GridResolvedPosition::resolveGridPositionsFromStyle): Again
keep old "none" behavior for "stack".
* rendering/style/RenderStyle.h: Add new helper methods to know the
direction and algorithm of grid-auto-flow property.
* rendering/style/RenderStyleConstants.h: Redefine GridAutoFlow enum
using flags for algorithm and direction.
* rendering/style/StyleGridData.h: Change m_gridAutoFlow type to
unsigned.

LayoutTests:
Adapted current tests to the new syntax. Keeping old "none" behavior
using "stack".

Add new use cases to cover the new syntax to grid-auto-flow-get-set.html
and grid-shorthand-get-set.html.

* fast/css-grid-layout/grid-auto-flow-get-set-expected.txt:
* fast/css-grid-layout/grid-auto-flow-get-set.html:
* fast/css-grid-layout/grid-auto-flow-resolution.html:
* fast/css-grid-layout/grid-auto-flow-update-expected.txt:
* fast/css-grid-layout/grid-auto-flow-update.html:
* fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
* fast/css-grid-layout/grid-item-z-index-change-repaint.html:
* fast/css-grid-layout/grid-item-z-index-stacking-context.html:
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
* fast/css-grid-layout/resources/grid.css:
(.gridAutoFlowStack):
(.gridAutoFlowNone): Deleted.
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* ietestcenter/css3/grid/grid-column-001.htm:
* ietestcenter/css3/grid/grid-column-002.htm:
* ietestcenter/css3/grid/grid-column-003.htm:
* svg/css/getComputedStyle-basic-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@170996 268f45cc-cd09-0410-ab3c-d52691b4dbfc

33 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-update-expected.txt
LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html
LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html
LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html
LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
LayoutTests/fast/css-grid-layout/resources/grid.css
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/ietestcenter/css3/grid/grid-column-001.htm
LayoutTests/ietestcenter/css3/grid/grid-column-002.htm
LayoutTests/ietestcenter/css3/grid/grid-column-003.htm
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSParser.h
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/DeprecatedStyleBuilder.cpp
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/style/GridResolvedPosition.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebCore/rendering/style/StyleGridData.h

index 7dc9804..d2b413d 100644 (file)
@@ -1,3 +1,38 @@
+2014-07-11  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Update grid-auto-flow to the new syntax
+        https://bugs.webkit.org/show_bug.cgi?id=134057
+
+        Reviewed by Sergio Villar Senin.
+
+        Adapted current tests to the new syntax. Keeping old "none" behavior
+        using "stack".
+
+        Add new use cases to cover the new syntax to grid-auto-flow-get-set.html
+        and grid-shorthand-get-set.html.
+
+        * fast/css-grid-layout/grid-auto-flow-get-set-expected.txt:
+        * fast/css-grid-layout/grid-auto-flow-get-set.html:
+        * fast/css-grid-layout/grid-auto-flow-resolution.html:
+        * fast/css-grid-layout/grid-auto-flow-update-expected.txt:
+        * fast/css-grid-layout/grid-auto-flow-update.html:
+        * fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
+        * fast/css-grid-layout/grid-item-z-index-change-repaint.html:
+        * fast/css-grid-layout/grid-item-z-index-stacking-context.html:
+        * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
+        * fast/css-grid-layout/grid-shorthand-get-set.html:
+        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
+        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
+        * fast/css-grid-layout/resources/grid.css:
+        (.gridAutoFlowStack):
+        (.gridAutoFlowNone): Deleted.
+        * fast/css/getComputedStyle/computed-style-expected.txt:
+        * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * ietestcenter/css3/grid/grid-column-001.htm:
+        * ietestcenter/css3/grid/grid-column-002.htm:
+        * ietestcenter/css3/grid/grid-column-003.htm:
+        * svg/css/getComputedStyle-basic-expected.txt:
+
 2014-07-10  Myles C. Maxfield  <mmaxfield@apple.com>
 
         [iOS] Pasting rich content does not perform a two-step paste
index edfdad0..77b4359 100644 (file)
@@ -1,29 +1,58 @@
-Test that setting and getting grid-auto-flow works as expected
+Test that setting and getting -webkit-grid-auto-flow works as expected
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-Test getting -webkit-auto-flow set through CSS
-PASS window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+Test getting -webkit-grid-auto-flow set through CSS
 PASS window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
 PASS window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
-PASS window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+PASS window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
+PASS window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
+PASS window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
+PASS window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
+PASS window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
+PASS window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
+PASS window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
+PASS window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
+PASS window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
+PASS window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
-PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test the initial value
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test getting and setting -webkit-grid-auto-flow through JS
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
 
 Test getting and setting bad values for -webkit-grid-auto-flow through JS
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test setting -webkit-grid-auto-flow to 'initial' through JS
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS successfullyParsed is true
 
 TEST COMPLETE
index fa60fcc..ff8e910 100644 (file)
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
+.gridAutoFlowColumnDense {
+    -webkit-grid-auto-flow: column dense;
+}
+.gridAutoFlowRowDense {
+    -webkit-grid-auto-flow: row dense;
+}
+.gridAutoFlowDenseColumn {
+    -webkit-grid-auto-flow: dense column;
+}
+.gridAutoFlowDenseRow {
+    -webkit-grid-auto-flow: dense row;
+}
+.gridAutoFlowStackColumn {
+    -webkit-grid-auto-flow: stack column;
+}
+.gridAutoFlowStackRow {
+    -webkit-grid-auto-flow: stack row;
+}
+.gridAutoFlowColumnStack {
+    -webkit-grid-auto-flow: column stack;
+}
+.gridAutoFlowRowStack {
+    -webkit-grid-auto-flow: row stack;
+}
 .gridAutoFlowInherit {
     -webkit-grid-auto-flow: inherit;
 }
 /* Bad values. */
+.gridAutoFlowNone {
+    -webkit-grid-auto-flow: none;
+}
 .gridAutoFlowRows {
     -webkit-grid-auto-flow: rows;
 }
 .gridAutoFlowColumns {
     -webkit-grid-auto-flow: columns;
 }
+.gridAutoFlowDense {
+    -webkit-grid-auto-flow: dense;
+}
+.gridAutoFlowColumnFoo {
+    -webkit-grid-auto-flow: column foo;
+}
+.gridAutoFlowColumnColumn {
+    -webkit-grid-auto-flow: column column;
+}
+.gridAutoFlowDenseColumnStack {
+    -webkit-grid-auto-flow: dense column stack;
+}
+.gridAutoFlowDenseRowStack {
+    -webkit-grid-auto-flow: dense row stack;
+}
+.gridAutoFlowStackRowRow {
+    -webkit-grid-auto-flow: stack row row;
+}
 </style>
 <script src="../../resources/js-test-pre.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 -webkit-auto-flow set through CSS");
-    var gridAutoFlowNone = document.getElementById("gridAutoFlowNone");
-    shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    description('Test that setting and getting -webkit-grid-auto-flow works as expected');
 
+    debug("Test getting -webkit-grid-auto-flow set through CSS");
     var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn");
     shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
 
     var gridAutoFlowRow = document.getElementById("gridAutoFlowRow");
     shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 
+    var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDense");
+    shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
+
+    var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense");
+    shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
+
+    var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColumn");
+    shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
+
+    var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow");
+    shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
+
+    var gridAutoFlowStack = document.getElementById("gridAutoFlowStack");
+    shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
+
+    var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColumn");
+    shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
+
+    var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow");
+    shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
+
+    var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnStack");
+    shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
+
+    var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack");
+    shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
+
+    var gridAutoFlowNone= document.getElementById("gridAutoFlowNone");
+    shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
     var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 
     var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
-    shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
+    var gridAutoFlowDense = document.getElementById("gridAutoFlowDense");
+    shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
+    var gridAutoFlowColumnFoo = document.getElementById("gridAutoFlowColumnFoo");
+    shouldBe("window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
+    var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnColumn");
+    shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
+    var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDenseColumnStack");
+    shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
+    var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRowStack");
+    shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+
+    var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowRow");
+    shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 
     var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
     shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
 
     var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit");
-    shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 
     debug("");
     debug("Test the initial value");
     element = document.createElement("div");
     document.body.appendChild(element);
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 
     debug("");
     debug("Test getting and setting -webkit-grid-auto-flow through JS");
     element.style.webkitGridAutoFlow = "column";
     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
-
-    element = document.createElement("div");
-    document.body.appendChild(element);
+    element.style.webkitGridAutoFlow = "column dense";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
+    element.style.webkitGridAutoFlow = "row dense";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
+    element.style.webkitGridAutoFlow = "dense column";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
+    element.style.webkitGridAutoFlow = "dense row";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
     element.style.webkitGridAutoFlow = "row";
     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    element.style.webkitGridAutoFlow = "stack";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
+    element.style.webkitGridAutoFlow = "stack column";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
+    element.style.webkitGridAutoFlow = "stack row";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
+    element.style.webkitGridAutoFlow = "column stack";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
+    element.style.webkitGridAutoFlow = "row stack";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
 
     debug("");
     debug("Test getting and setting bad values for -webkit-grid-auto-flow through JS");
+    element = document.createElement("div");
+    document.body.appendChild(element);
     element.style.webkitGridAutoFlow = "noone";
     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    element.style.webkitGridAutoFlow = "dense";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    element.style.webkitGridAutoFlow = "column column";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    element.style.webkitGridAutoFlow = "dense column stack";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    element.style.webkitGridAutoFlow = "dense row stack";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    element.style.webkitGridAutoFlow = "stack row row";
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 
     debug("");
     debug("Test setting -webkit-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.webkitGridAutoFlow = "initial";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
index 360a009..cde8f39 100644 (file)
@@ -45,7 +45,7 @@
 <p>This test checks that the tracks' auto positions are properly resolved on a static grid.</p>
 
 <div class="unconstrainedContainer">
-    <div class="grid smallGrid gridAutoFlowNone" id="gridAutoFlowNone">
+    <div class="grid smallGrid gridAutoFlowStack" id="gridAutoFlowStack">
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
index 60a2143..abfb8d4 100644 (file)
@@ -25,10 +25,11 @@ function updateAutoFlow()
 {
     checkLayout(".grid");
 
-    testGrid("row", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
     testGrid("column", { 'offsetX': '0', 'offsetY': '50', 'width': '50', 'height': '100' });
-    testGrid("invalid", { 'offsetX': '0', 'offsetY': '50', 'width': '50', 'height': '100' });
-    testGrid("none", { 'offsetX': '0', 'offsetY': '0', 'width': '50', 'height': '50' });
+    testGrid("stack", { 'offsetX': '0', 'offsetY': '0', 'width': '50', 'height': '50' });
+    testGrid("", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
+    testGrid("invalid", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
+    testGrid("none", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
 }
 window.addEventListener("load", updateAutoFlow, false);
 </script>
@@ -36,7 +37,7 @@ window.addEventListener("load", updateAutoFlow, false);
 <div>This test checks that updating the grid's element's grid-auto-flow property recomputes the grid.</div>
 <div style="position: relative">
     <div class="grid">
-        <div class="sizedToGridArea autoRowAutoColumn" id="autoItem" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" id="autoItem" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
     </div>
 </div>
index db4dded..8ae8b0c 100644 (file)
@@ -59,7 +59,7 @@
 <p>This test checks that we resolve named grid areas per the specification.</p>
 
 <div style="position: relative">
-    <div class="grid gridWithoutRepeat">
+    <div class="grid gridWithoutRepeat gridAutoFlowStack">
         <div class="sizedToGridArea gridItemSixthArea" data-offset-x="120" data-offset-y="50" data-expected-width="160" data-expected-height="100"></div>
         <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-offset-y="50" data-expected-width="80" data-expected-height="100"></div>
         <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="100"></div>
@@ -73,7 +73,7 @@
 </div>
 
 <div style="position: relative">
-    <div class="grid gridWithRepeat">
+    <div class="grid gridWithRepeat gridAutoFlowStack">
         <!-- fifth and sixth are invalid named grid areas. -->
         <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
         <div class="sizedToGridArea gridItemFifthArea" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
index 509e68c..cd2d3ab 100644 (file)
@@ -7,6 +7,7 @@
     -webkit-grid-template-rows: 100px;
     -webkit-grid-template-columns: 200px;
     margin-top: 10px;
+    -webkit-grid-auto-flow: stack;
 }
 .red {
     background-color: red;
index 5984f53..a193f1a 100644 (file)
@@ -7,6 +7,7 @@
     -webkit-grid-template-rows: 100px;
     -webkit-grid-template-columns: 200px 200px;
     margin-top: 10px;
+    -webkit-grid-auto-flow: stack;
 }
 .red {
     background-color: red;
index 5f821a5..c2674fa 100644 (file)
@@ -4,42 +4,72 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting the longhand values when shorthand is set through CSS.
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
+PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-columns') is "15px"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
 PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
+PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
+PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow') is "column dense"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow') is "column stack"
+PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
+PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
@@ -47,83 +77,113 @@ PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyV
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
 
-Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')
+Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 
@@ -134,7 +194,7 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows'
 PASS element.style.webkitGridTemplateRows is "20px"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
 PASS element.style.webkitGridTemplateAreas is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS element.style.webkitGridAutoFlow is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS element.style.webkitGridAutoColumns is "initial"
@@ -146,7 +206,7 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows'
 PASS element.style.webkitGridTemplateRows is "(line) 20px"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
 PASS element.style.webkitGridTemplateAreas is "\"a\""
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS element.style.webkitGridAutoFlow is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS element.style.webkitGridAutoColumns is "initial"
@@ -158,8 +218,8 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows'
 PASS element.style.webkitGridTemplateRows is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
 PASS element.style.webkitGridTemplateAreas is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS element.style.webkitGridAutoFlow is "row"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
+PASS element.style.webkitGridAutoFlow is "row dense"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
 PASS element.style.webkitGridAutoColumns is "20px"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
@@ -181,13 +241,13 @@ Test the initial value
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
 
@@ -210,7 +270,7 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows'
 PASS element.style.webkitGridTemplateRows is "none"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
 PASS element.style.webkitGridTemplateAreas is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS element.style.webkitGridAutoFlow is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS element.style.webkitGridAutoColumns is "initial"
index df2a608..d58569f 100644 (file)
@@ -7,8 +7,8 @@ if (window.testRunner)
 </script>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-#gridWithNone {
-    -webkit-grid: none;
+#gridWithStack {
+    -webkit-grid: stack;
 }
 #gridWithTemplate {
     -webkit-grid: 15px / 10px;
@@ -16,14 +16,29 @@ if (window.testRunner)
 #gridWithTemplate1 {
     -webkit-grid: none / 10px;
 }
-#gridWithAutoFlowNoneAndColumnsAndRows {
-    -webkit-grid: none 10px / 20px;
+#gridWithTemplateNone {
+    -webkit-grid: none / 10px;
+}
+#gridWithAutoFlowStackAndColumnsAndRows {
+    -webkit-grid: stack 10px / 20px;
 }
 #gridWithAutoFlowAndColumns {
-    -webkit-grid: row 10px;
+    -webkit-grid: column 10px;
 }
-#gridWithAutoFlowNone {
-    -webkit-grid: none 10px;
+#gridWithAutoFlowStack {
+    -webkit-grid: stack 10px;
+}
+#gridWithAutoFlowColumnDense {
+    -webkit-grid: column dense 10px;
+}
+#gridWithAutoFlowDenseRow {
+    -webkit-grid: dense row 10px;
+}
+#gridWithAutoFlowStackColumn {
+    -webkit-grid: stack column 10px;
+}
+#gridWithAutoFlowRowStack {
+    -webkit-grid: row stack 10px;
 }
 #gridWithAutoFlowAndColumnsAndRows {
     -webkit-grid: column 10px / 20px;
@@ -31,6 +46,15 @@ if (window.testRunner)
 
 /* Bad values. */
 
+#gridWithNone {
+    -webkit-grid: none;
+}
+#gridWithAutoFlowNoneAndColumnsAndRows {
+    -webkit-grid: none 10px / 20px;
+}
+#gridWithAutoFlowNone {
+    -webkit-grid: none 10px;
+}
 #gridWithExplicitAndImplicit {
     -webkit-grid: 10px / 20px column;
 }
@@ -70,17 +94,31 @@ if (window.testRunner)
 #gridWithTemplateAndMisplacedString1 {
     -webkit-grid: 10px / 10px "a";
 }
+#gridWithMisplacedDense {
+    -webkit-grid: dense column dense;
+}
+#gridWithMisplacedStack {
+    -webkit-grid: stack row stack;
+}
 </style>
 <script src="../../resources/js-test.js"></script>
 </head>
 <body>
-<div class="grid" id="gridWithNone"></div>
+<div class="grid" id="gridWithStack"></div>
 <div class="grid" id="gridWithTemplate"></div>
 <div class="grid" id="gridWithTemplate1"></div>
-<div class="grid" id="gridWithAutoFlowNoneAndColumnsAndRows"></div>
+<div class="grid" id="gridWithAutoFlowStackAndColumnsAndRows"></div>
 <div class="grid" id="gridWithAutoFlowAndColumns"></div>
-<div class="grid" id="gridWithAutoFlowNone"></div>
+<div class="grid" id="gridWithAutoFlowStack"></div>
+<div class="grid" id="gridWithAutoFlowColumnDense"></div>
+<div class="grid" id="gridWithAutoFlowDenseRow"></div>
+<div class="grid" id="gridWithAutoFlowStackColumn"></div>
+<div class="grid" id="gridWithAutoFlowRowStack"></div>
 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
+<div class="grid" id="gridWithNone"></div>
+<div class="grid" id="gridWithTemplateNone"></div>
+<div class="grid" id="gridWithAutoFlowNoneAndColumnsAndRows"></div>
+<div class="grid" id="gridWithAutoFlowNone"></div>
 <div class="grid" id="gridWithExplicitAndImplicit"></div>
 <div class="grid" id="gridWithMisplacedNone1"></div>
 <div class="grid" id="gridWithMisplacedNone2"></div>
@@ -94,58 +132,70 @@ if (window.testRunner)
 <div class="grid" id="gridWithAutoFlowString3"></div>
 <div class="grid" id="gridWithTemplateAndAutoFlow"></div>
 <div class="grid" id="gridWithTemplateAndMisplacedString1"></div>
+<div class="grid" id="gridWithMisplacedDense"></div>
+<div class="grid" id="gridWithMisplacedStack"></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", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithTemplate1"), "none", "10px", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNoneAndColumnsAndRows"), "none", "none", "none", "none", "10px", "20px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumns"), "none", "none", "none", "row", "10px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "none", "10px", "10px");
+    testGridDefinitionsValues(document.getElementById("gridWithStack"), "none", "none", "none", "row stack", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithTemplate1"), "none", "10px", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithTemplateNone"), "none", "10px", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStackAndColumnsAndRows"), "none", "none", "none", "row stack", "10px", "20px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumns"), "none", "none", "none", "column", "10px", "10px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStack"), "none", "none", "none", "row stack", "10px", "10px");
+    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("gridWithAutoFlowStackColumn"), "none", "none", "none", "column stack", "10px", "10px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowStack"), "none", "none", "none", "row stack", "10px", "10px");
     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumnsAndRows"), "none", "none", "none", "column", "10px", "20px");
 
     debug("");
-    debug("Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
-    testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash1"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash2"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash3"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowAndColumn"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithoutAutoFlowAndExtraBreath"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString1"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString2"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString3"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithTemplateAndAutoFlow"), "none", "none", "none", "none", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithTemplateAndMisplacedString1"), "none", "none", "none", "none", "auto", "auto");
+    debug("Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')");
+    testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNoneAndColumnsAndRows"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "row", "auto", "auto");
+    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");
+    testGridDefinitionsValues(document.getElementById("gridWithMisplacedStack"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash1"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash2"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash3"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowAndColumn"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithoutAutoFlowAndExtraBreath"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString1"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString2"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowString3"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithTemplateAndAutoFlow"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithTemplateAndMisplacedString1"), "none", "none", "none", "row", "auto", "auto");
 
     debug("");
     debug("Test getting and setting 'grid' shorthand through JS");
-    testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "none", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
-    testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20px", "\"a\"", "none", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", "initial", "initial");
-    testGridDefinitionsSetJSValues("row 20px", "none", "none", "none", "row", "20px", "20px", "initial", "initial", "initial", "row", "20px", "20px");
+    testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
+    testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "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", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");
 
     debug("");
     debug("Test the initial value");
     var element = document.createElement("div");
     document.body.appendChild(element);
-    testGridDefinitionsValues(element, "none", "none", "none", "none", "auto", "auto");
+    testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "auto");
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", "'none'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'none'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-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", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
-    testGridDefinitionsSetJSValues("none", "none", "none", "none", "none", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
+    testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
 
 </script>
 </body>
index fa0115a..5a38c97 100644 (file)
@@ -10,6 +10,7 @@ function testLayout(gridDefinitions, itemsDefinitions)
     var gridContainer = document.getElementById("gridContainer");
     var gridElement = document.createElement("div");
     gridElement.className = "grid";
+    gridElement.style.webkitGridAutoFlow = "stack";
 
     for (var key in gridDefinitions) {
        if (key == "rows")
index 0b97814..5f3be6d 100644 (file)
@@ -60,7 +60,7 @@
 
 <!-- Check positioning using unique grid-line names -->
 <div style="position: relative">
-  <div class="grid gridUniqueNames">
+  <div class="grid gridUniqueNames gridAutoFlowStack">
     <div class="sizedToGridArea" style="-webkit-grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: b-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
@@ -88,7 +88,7 @@
 
 <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
 <div style="position: relative">
-  <div class="grid gridUniqueNames">
+  <div class="grid gridUniqueNames gridAutoFlowStack">
     <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 </div>
 
 <div style="position: relative">
-  <div class="grid gridAreas gridNoLineNames">
+  <div class="grid gridAreas gridNoLineNames gridAutoFlowStack">
     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
 
 <!-- Use explicitly named grid lines if they're defined before the grid area -->
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
+  <div class="grid gridAreas gridWithNamedLineBeforeGridArea gridAutoFlowStack">
     <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 </div>
 
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
+  <div class="grid gridAreas gridWithNamedLineBeforeGridArea gridAutoFlowStack">
     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
 
 <!-- Check behavior with areas named *-start or *-end -->
 <div style="position: relative">
-  <div class="grid gridAreasSpecial gridNoLineNames">
+  <div class="grid gridAreasSpecial gridNoLineNames gridAutoFlowStack">
     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
index e63b799..cf13d9e 100644 (file)
 }
 
 /* Grid element flow. */
-.gridAutoFlowNone {
-    -webkit-grid-auto-flow: none;
+.gridAutoFlowStack {
+    -webkit-grid-auto-flow: stack;
 }
 
 .gridAutoFlowColumn {
index d9bf9c0..b9568eb 100644 (file)
@@ -153,7 +153,7 @@ zoom: 1;
 -webkit-font-smoothing: auto;
 -webkit-font-variant-ligatures: normal;
 -webkit-grid-auto-columns: auto;
--webkit-grid-auto-flow: none;
+-webkit-grid-auto-flow: row;
 -webkit-grid-auto-rows: auto;
 -webkit-grid-column-end: auto;
 -webkit-grid-column-start: auto;
index 25247b8..0ee439a 100644 (file)
@@ -152,7 +152,7 @@ zoom: 1
 -webkit-font-smoothing: auto
 -webkit-font-variant-ligatures: normal
 -webkit-grid-auto-columns: auto
--webkit-grid-auto-flow: none
+-webkit-grid-auto-flow: row
 -webkit-grid-auto-rows: auto
 -webkit-grid-column-end: auto
 -webkit-grid-column-start: auto
index a0071e4..f814d95 100644 (file)
                 -o-grid-rows: auto 1fr;
                 -webkit-grid-defintion-rows: auto 1fr;
                 grid-rows: auto 1fr;
+                -ms-grid-auto-flow: stack;
+                -moz-grid-auto-flow: stack;
+                -o-grid-auto-flow: stack;
+                -webkit-grid-auto-flow: stack;
+                grid-auto-flow: stack;
             }
             #griditem
             {
index 0403d72..98b58c4 100644 (file)
                 -o-grid-rows: auto 1fr;
                 -webkit-grid-defintion-rows: auto 1fr;
                 grid-rows: auto 1fr;
+                -ms-grid-auto-flow: stack;
+                -moz-grid-auto-flow: stack;
+                -o-grid-auto-flow: stack;
+                -webkit-grid-auto-flow: stack;
+                grid-auto-flow: stack;
             }
             #griditem
             {
index e2db526..9d5d04a 100644 (file)
                 -o-grid-rows: auto 1fr;
                 -webkit-grid-defintion-rows: auto 1fr;
                 grid-rows: auto 1fr;
+                -ms-grid-auto-flow: stack;
+                -moz-grid-auto-flow: stack;
+                -o-grid-auto-flow: stack;
+                -webkit-grid-auto-flow: stack;
+                grid-auto-flow: stack;
             }
             #griditem
             {
index b64c397..e54aa06 100644 (file)
@@ -304,8 +304,8 @@ rect: style.getPropertyValue(-webkit-font-variant-ligatures) : normal
 rect: style.getPropertyCSSValue(-webkit-font-variant-ligatures) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-grid-auto-columns) : auto
 rect: style.getPropertyCSSValue(-webkit-grid-auto-columns) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-auto-flow) : none
-rect: style.getPropertyCSSValue(-webkit-grid-auto-flow) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(-webkit-grid-auto-flow) : row
+rect: style.getPropertyCSSValue(-webkit-grid-auto-flow) : [object CSSValueList]
 rect: style.getPropertyValue(-webkit-grid-auto-rows) : auto
 rect: style.getPropertyCSSValue(-webkit-grid-auto-rows) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-grid-column-end) : auto
@@ -816,8 +816,8 @@ g: style.getPropertyValue(-webkit-font-variant-ligatures) : normal
 g: style.getPropertyCSSValue(-webkit-font-variant-ligatures) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-grid-auto-columns) : auto
 g: style.getPropertyCSSValue(-webkit-grid-auto-columns) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-auto-flow) : none
-g: style.getPropertyCSSValue(-webkit-grid-auto-flow) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(-webkit-grid-auto-flow) : row
+g: style.getPropertyCSSValue(-webkit-grid-auto-flow) : [object CSSValueList]
 g: style.getPropertyValue(-webkit-grid-auto-rows) : auto
 g: style.getPropertyCSSValue(-webkit-grid-auto-rows) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-grid-column-end) : auto
index 063f8b0..3b1603a 100644 (file)
@@ -1,3 +1,69 @@
+2014-07-11  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Update grid-auto-flow to the new syntax
+        https://bugs.webkit.org/show_bug.cgi?id=134057
+
+        Reviewed by Sergio Villar Senin.
+
+        In last versions of the spec grid-auto-flow syntax has changed. New
+        syntax is:
+        [ row | column ] && dense? | stack && [ row | column ]?
+
+        Implemented parsing for new syntax and added/modified test cases in
+        current layout tests.
+
+        For the moment, the implementation keeps working in the same way, but
+        using "stack" value for grid-auto-flow property instead of "none". This
+        should be fixed in a follow-up patch once "stack" is properly
+        implemented.
+
+        Also "dense" needs to be reviewed. Right now auto-placement algorithm is
+        always "dense" and never "sparse".
+
+        No new tests, update current tests to add new cases.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue): Adapt to new syntax.
+        * css/CSSParser.cpp:
+        (WebCore::isValidKeywordPropertyAndValue): Removed grid-auto-flow as it
+        is not a keyword anymore.
+        (WebCore::isKeywordPropertyID): Ditto.
+        (WebCore::CSSParser::parseValue): Add specific method for parsing
+        grid-auto-flow.
+        (WebCore::CSSParser::parseGridShorthand): Adapt parsing for
+        grid-auto-flow property inside the shorthand.
+        (WebCore::isValidGridAutoFlowId): Helper method to check if the CSSValue
+        id is a valid keyword for grid-auto-flow property.
+        (WebCore::CSSParser::parseGridAutoFlow): Implement new parsing for
+        grid-auto-flow.
+        * css/CSSParser.h: Method header for grid-auto-flow parsing.
+        * css/CSSPrimitiveValueMappings.h:
+        (WebCore::CSSPrimitiveValue::operator GridAutoFlow): Deleted.
+        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): Deleted.
+        * css/CSSValueKeywords.in: Add new keywords required by grid-auto-flow:
+        "dense" and "stack".
+        * css/DeprecatedStyleBuilder.cpp:
+        (WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder): Remove
+        default handler as grid-auto-flow is not a keyword now.
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::applyProperty): Implement particular handler
+        for new grid-auto-flow syntax.
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::placeItemsOnGrid): Keep old "none" behavior as
+        "stack" behavior for the moment.
+        (WebCore::RenderGrid::autoPlacementMajorAxisDirection): Use the new
+        helper methods in RenderStyle.
+        (WebCore::RenderGrid::autoPlacementMinorAxisDirection): Ditto.
+        * rendering/style/GridResolvedPosition.cpp:
+        (WebCore::GridResolvedPosition::resolveGridPositionsFromStyle): Again
+        keep old "none" behavior for "stack".
+        * rendering/style/RenderStyle.h: Add new helper methods to know the
+        direction and algorithm of grid-auto-flow property.
+        * rendering/style/RenderStyleConstants.h: Redefine GridAutoFlow enum
+        using flags for algorithm and direction.
+        * rendering/style/StyleGridData.h: Change m_gridAutoFlow type to
+        unsigned.
+
 2014-07-10  Myles C. Maxfield  <mmaxfield@apple.com>
 
         [iOS] Pasting rich content does not perform a two-step paste
index 3f38c8d..58f4b73 100644 (file)
@@ -2050,8 +2050,21 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             return list.release();
         }
 #if ENABLE(CSS_GRID_LAYOUT)
-        case CSSPropertyWebkitGridAutoFlow:
-            return cssValuePool().createValue(style->gridAutoFlow());
+        case CSSPropertyWebkitGridAutoFlow: {
+            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
+            ASSERT(style->isGridAutoFlowDirectionRow() || style->isGridAutoFlowDirectionColumn());
+            if (style->isGridAutoFlowDirectionRow())
+                list->append(cssValuePool().createIdentifierValue(CSSValueRow));
+            else
+                list->append(cssValuePool().createIdentifierValue(CSSValueColumn));
+
+            if (style->isGridAutoFlowAlgorithmDense())
+                list->append(cssValuePool().createIdentifierValue(CSSValueDense));
+            else if (style->isGridAutoFlowAlgorithmStack())
+                list->append(cssValuePool().createIdentifierValue(CSSValueStack));
+
+            return list.release();
+        }
 
         // Specs mention that getComputedStyle() should return the used value of the property instead of the computed
         // one for grid-definition-{rows|columns} but not for the grid-auto-{rows|columns} as things like
index 3705ede..53b896c 100644 (file)
@@ -883,12 +883,6 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
         if (valueID == CSSValueNone || valueID == CSSValueManual || valueID == CSSValueAuto)
             return true;
         break;
-#if ENABLE(CSS_GRID_LAYOUT)
-    case CSSPropertyWebkitGridAutoFlow:
-        if (valueID == CSSValueNone || valueID == CSSValueRow || valueID == CSSValueColumn)
-            return true;
-        break;
-#endif
     case CSSPropertyWebkitLineAlign:
         if (valueID == CSSValueNone || valueID == CSSValueEdges)
             return true;
@@ -1096,9 +1090,6 @@ static inline bool isKeywordPropertyID(CSSPropertyID propertyId)
     case CSSPropertyWebkitFontKerning:
     case CSSPropertyWebkitFontSmoothing:
     case CSSPropertyWebkitHyphens:
-#if ENABLE(CSS_GRID_LAYOUT)
-    case CSSPropertyWebkitGridAutoFlow:
-#endif
     case CSSPropertyWebkitLineAlign:
     case CSSPropertyWebkitLineBreak:
     case CSSPropertyWebkitLineSnap:
@@ -2610,6 +2601,9 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     case CSSPropertyWebkitGridTemplateAreas:
         parsedValue = parseGridTemplateAreas();
         break;
+    case CSSPropertyWebkitGridAutoFlow:
+        parsedValue = parseGridAutoFlow(*m_valueList);
+        break;
 #endif /* ENABLE(CSS_GRID_LAYOUT) */
     case CSSPropertyWebkitMarginCollapse: {
         if (num == 1) {
@@ -2988,9 +2982,6 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     case CSSPropertyWebkitFontKerning:
     case CSSPropertyWebkitFontSmoothing:
     case CSSPropertyWebkitHyphens:
-#if ENABLE(CSS_GRID_LAYOUT)
-    case CSSPropertyWebkitGridAutoFlow:
-#endif
     case CSSPropertyWebkitLineAlign:
     case CSSPropertyWebkitLineBreak:
     case CSSPropertyWebkitLineSnap:
@@ -4925,15 +4916,13 @@ bool CSSParser::parseGridShorthand(bool important)
     m_valueList->setCurrentIndex(0);
 
     // 2- <grid-auto-flow> [ <grid-auto-columns> [ / <grid-auto-rows> ]? ]
-    CSSValueID id = m_valueList->current()->id;
-    if (id != CSSValueRow && id != CSSValueColumn && id != CSSValueNone)
+    if (!parseValue(CSSPropertyWebkitGridAutoFlow, important))
         return false;
 
-    RefPtr<CSSValue> autoFlowValue = cssValuePool().createIdentifierValue(id);
     RefPtr<CSSValue> autoColumnsValue;
     RefPtr<CSSValue> autoRowsValue;
 
-    if (m_valueList->next()) {
+    if (m_valueList->current()) {
         autoColumnsValue = parseGridTrackSize(*m_valueList);
         if (!autoColumnsValue)
             return false;
@@ -4956,7 +4945,6 @@ bool CSSParser::parseGridShorthand(bool important)
     if (!autoRowsValue)
         autoRowsValue = autoColumnsValue;
 
-    addProperty(CSSPropertyWebkitGridAutoFlow, autoFlowValue.release(), important);
     addProperty(CSSPropertyWebkitGridAutoColumns, autoColumnsValue.release(), important);
     addProperty(CSSPropertyWebkitGridAutoRows, autoRowsValue.release(), important);
 
@@ -5181,6 +5169,64 @@ PassRefPtr<CSSPrimitiveValue> CSSParser::parseGridBreadth(CSSParserValue* curren
 
     return createPrimitiveNumericValue(currentValue);
 }
+
+static inline bool isValidGridAutoFlowId(CSSValueID id)
+{
+    return (id == CSSValueRow || id == CSSValueColumn || id == CSSValueDense || id == CSSValueStack);
+}
+
+PassRefPtr<CSSValue> CSSParser::parseGridAutoFlow(CSSParserValueList& inputList)
+{
+    // [ row | column ] && dense? | stack && [ row | column ]?
+    CSSParserValue* value = inputList.current();
+    if (!value)
+        return nullptr;
+
+    RefPtr<CSSValueList> parsedValues = CSSValueList::createSpaceSeparated();
+
+    // First parameter.
+    CSSValueID firstId = value->id;
+    if (!isValidGridAutoFlowId(firstId))
+        return nullptr;
+
+    // Second parameter, if any.
+    // If second parameter is not valid we should process anyway the first one as we can be inside the "grid" shorthand.
+    value = inputList.next();
+    if (!value || !isValidGridAutoFlowId(value->id)) {
+        if (firstId == CSSValueDense)
+            return nullptr;
+
+        if (firstId == CSSValueStack)
+            parsedValues->append(cssValuePool().createIdentifierValue(CSSValueRow));
+
+        parsedValues->append(cssValuePool().createIdentifierValue(firstId));
+        return parsedValues;
+    }
+
+    switch (firstId) {
+    case CSSValueRow:
+    case CSSValueColumn:
+        parsedValues->append(cssValuePool().createIdentifierValue(firstId));
+        if (value->id == CSSValueDense || value->id == CSSValueStack) {
+            parsedValues->append(cssValuePool().createIdentifierValue(value->id));
+            inputList.next();
+        }
+        break;
+    case CSSValueDense:
+    case CSSValueStack:
+        if (value->id == CSSValueRow || value->id == CSSValueColumn) {
+            parsedValues->append(cssValuePool().createIdentifierValue(value->id));
+            inputList.next();
+        }
+        parsedValues->append(cssValuePool().createIdentifierValue(firstId));
+        break;
+    default:
+        ASSERT_NOT_REACHED();
+        break;
+    }
+
+    return parsedValues;
+}
 #endif /* ENABLE(CSS_GRID_LAYOUT) */
 
 #if ENABLE(DASHBOARD_SUPPORT)
index 08bdd44..9d3c194 100644 (file)
@@ -176,6 +176,7 @@ public:
     bool parseGridTemplateAreasRow(NamedGridAreaMap&, const unsigned, unsigned&);
     PassRefPtr<CSSValue> parseGridTemplateAreas();
     void parseGridLineNames(CSSParserValueList&, CSSValueList&, CSSGridLineNamesValue* = nullptr);
+    PassRefPtr<CSSValue> parseGridAutoFlow(CSSParserValueList&);
 #endif
 
     bool parseDashboardRegions(CSSPropertyID, bool important);
index 19e2721..081eaaf 100644 (file)
@@ -4574,45 +4574,6 @@ template<> inline CSSPrimitiveValue::operator ColumnProgression() const
     return NormalColumnProgression;
 }
 
-#if ENABLE(CSS_GRID_LAYOUT)
-template<> inline CSSPrimitiveValue::operator GridAutoFlow() const
-{
-    ASSERT(isValueID());
-
-    switch (m_value.valueID) {
-    case CSSValueNone:
-        return AutoFlowNone;
-    case CSSValueColumn:
-        return AutoFlowColumn;
-    case CSSValueRow:
-        return AutoFlowRow;
-    default:
-        break;
-    }
-
-    ASSERT_NOT_REACHED();
-    return AutoFlowNone;
-
-}
-
-template<> inline CSSPrimitiveValue::CSSPrimitiveValue(GridAutoFlow flow)
-    : CSSValue(PrimitiveClass)
-{
-    m_primitiveUnitType = CSS_VALUE_ID;
-    switch (flow) {
-    case AutoFlowNone:
-        m_value.valueID = CSSValueNone;
-        break;
-    case AutoFlowColumn:
-        m_value.valueID = CSSValueColumn;
-        break;
-    case AutoFlowRow:
-        m_value.valueID = CSSValueRow;
-        break;
-    }
-}
-#endif /* ENABLE_(CSS_GRID_LAYOUT) */
-
 enum LengthConversion {
     AnyConversion = ~0,
     FixedIntegerConversion = 1 << 0,
index 9ea57aa..f8136ab 100644 (file)
@@ -1042,6 +1042,10 @@ markers
 // -webkit-grid-{column-start|column-end|row-start|row-end}
 span
 
+// -webkit-grid-auto-flow
+dense
+stack
+
 #if defined(ENABLE_CSS3_TEXT) && ENABLE_CSS3_TEXT
 // text-indent
 -webkit-each-line
index 3c60aa8..60391d3 100644 (file)
@@ -2501,9 +2501,6 @@ DeprecatedStyleBuilder::DeprecatedStyleBuilder()
     setPropertyHandler(CSSPropertyWebkitFlexGrow, ApplyPropertyDefault<float, &RenderStyle::flexGrow, float, &RenderStyle::setFlexGrow, float, &RenderStyle::initialFlexGrow>::createHandler());
     setPropertyHandler(CSSPropertyWebkitFlexShrink, ApplyPropertyDefault<float, &RenderStyle::flexShrink, float, &RenderStyle::setFlexShrink, float, &RenderStyle::initialFlexShrink>::createHandler());
     setPropertyHandler(CSSPropertyWebkitFlexWrap, ApplyPropertyDefault<EFlexWrap, &RenderStyle::flexWrap, EFlexWrap, &RenderStyle::setFlexWrap, EFlexWrap, &RenderStyle::initialFlexWrap>::createHandler());
-#if ENABLE(CSS_GRID_LAYOUT)
-    setPropertyHandler(CSSPropertyWebkitGridAutoFlow, ApplyPropertyDefault<GridAutoFlow, &RenderStyle::gridAutoFlow, GridAutoFlow, &RenderStyle::setGridAutoFlow, GridAutoFlow, &RenderStyle::initialGridAutoFlow>::createHandler());
-#endif
     setPropertyHandler(CSSPropertyWebkitJustifyContent, ApplyPropertyDefault<EJustifyContent, &RenderStyle::justifyContent, EJustifyContent, &RenderStyle::setJustifyContent, EJustifyContent, &RenderStyle::initialJustifyContent>::createHandler());
     setPropertyHandler(CSSPropertyWebkitOrder, ApplyPropertyDefault<int, &RenderStyle::order, int, &RenderStyle::setOrder, int, &RenderStyle::initialOrder>::createHandler());
 #if ENABLE(CSS_REGIONS)
index 4fe4fb1..3c03197 100644 (file)
@@ -2790,6 +2790,42 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
         state.style()->setNamedGridAreaColumnCount(gridTemplateAreasValue->columnCount());
         return;
     }
+    case CSSPropertyWebkitGridAutoFlow: {
+        HANDLE_INHERIT_AND_INITIAL(gridAutoFlow, GridAutoFlow);
+        if (!value->isValueList())
+            return;
+        CSSValueList* list = toCSSValueList(value);
+
+        if (!list->length()) {
+            state.style()->setGridAutoFlow(RenderStyle::initialGridAutoFlow());
+            return;
+        }
+
+        CSSPrimitiveValue* first = toCSSPrimitiveValue(list->item(0));
+        CSSPrimitiveValue* second = list->length() == 2 ? toCSSPrimitiveValue(list->item(1)) : nullptr;
+
+        GridAutoFlow autoFlow = RenderStyle::initialGridAutoFlow();
+        switch (first->getValueID()) {
+        case CSSValueRow:
+            if (second)
+                autoFlow = second->getValueID() == CSSValueDense ? AutoFlowRowDense : AutoFlowStackRow;
+            else
+                autoFlow = AutoFlowRow;
+            break;
+        case CSSValueColumn:
+            if (second)
+                autoFlow = second->getValueID() == CSSValueDense ? AutoFlowColumnDense : AutoFlowStackColumn;
+            else
+                autoFlow = AutoFlowColumn;
+            break;
+        default:
+            ASSERT_NOT_REACHED();
+            break;
+        }
+
+        state.style()->setGridAutoFlow(autoFlow);
+        return;
+    }
 #endif /* ENABLE(CSS_GRID_LAYOUT) */
     // These properties are aliased and DeprecatedStyleBuilder already applied the property on the prefixed version.
     case CSSPropertyTransitionDelay:
index b65c406..c9d4ec9 100644 (file)
@@ -665,7 +665,6 @@ void RenderGrid::placeItemsOnGrid()
 
     Vector<RenderBox*> autoMajorAxisAutoGridItems;
     Vector<RenderBox*> specifiedMajorAxisAutoGridItems;
-    GridAutoFlow autoFlow = style().gridAutoFlow();
     for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
         // FIXME: We never re-resolve positions if the grid is grown during auto-placement which may lead auto / <integer>
         // positions to not match the author's intent. The specification is unclear on what should be done in this case.
@@ -685,7 +684,8 @@ void RenderGrid::placeItemsOnGrid()
     ASSERT(gridRowCount() >= style().gridRows().size());
     ASSERT(gridColumnCount() >= style().gridColumns().size());
 
-    if (autoFlow == AutoFlowNone) {
+    // FIXME: Implement properly "stack" value in auto-placement algorithm.
+    if (style().isGridAutoFlowAlgorithmStack()) {
         // If we did collect some grid items, they won't be placed thus never laid out.
         ASSERT(!autoMajorAxisAutoGridItems.size());
         ASSERT(!specifiedMajorAxisAutoGridItems.size());
@@ -801,16 +801,12 @@ void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
 
 GridTrackSizingDirection RenderGrid::autoPlacementMajorAxisDirection() const
 {
-    GridAutoFlow flow = style().gridAutoFlow();
-    ASSERT(flow != AutoFlowNone);
-    return (flow == AutoFlowColumn) ? ForColumns : ForRows;
+    return style().isGridAutoFlowDirectionColumn() ? ForColumns : ForRows;
 }
 
 GridTrackSizingDirection RenderGrid::autoPlacementMinorAxisDirection() const
 {
-    GridAutoFlow flow = style().gridAutoFlow();
-    ASSERT(flow != AutoFlowNone);
-    return (flow == AutoFlowColumn) ? ForRows : ForColumns;
+    return style().isGridAutoFlowDirectionColumn() ? ForRows : ForColumns;
 }
 
 void RenderGrid::clearGrid()
index ed7c984..69a8a59 100644 (file)
@@ -126,7 +126,8 @@ std::unique_ptr<GridSpan> GridResolvedPosition::resolveGridPositionsFromStyle(co
     adjustGridPositionsFromStyle(gridContainerStyle, initialPosition, finalPosition, initialPositionSide, finalPositionSide);
 
     if (initialPosition.shouldBeResolvedAgainstOppositePosition() && finalPosition.shouldBeResolvedAgainstOppositePosition()) {
-        if (gridContainerStyle.gridAutoFlow() == AutoFlowNone)
+        // FIXME: Implement properly "stack" value in auto-placement algorithm.
+        if (gridContainerStyle.isGridAutoFlowAlgorithmStack())
             return std::make_unique<GridSpan>(0, 0);
 
         // We can't get our grid positions without running the auto placement algorithm.
index 401125b..91cc322 100644 (file)
@@ -925,7 +925,12 @@ public:
     const NamedGridAreaMap& namedGridArea() const { return rareNonInheritedData->m_grid->m_namedGridArea; }
     size_t namedGridAreaRowCount() const { return rareNonInheritedData->m_grid->m_namedGridAreaRowCount; }
     size_t namedGridAreaColumnCount() const { return rareNonInheritedData->m_grid->m_namedGridAreaColumnCount; }
-    GridAutoFlow gridAutoFlow() const { return rareNonInheritedData->m_grid->m_gridAutoFlow; }
+    GridAutoFlow gridAutoFlow() const { return static_cast<GridAutoFlow>(rareNonInheritedData->m_grid->m_gridAutoFlow); }
+    bool isGridAutoFlowDirectionRow() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowDirectionRow); }
+    bool isGridAutoFlowDirectionColumn() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowDirectionColumn); }
+    bool isGridAutoFlowAlgorithmSparse() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmSparse); }
+    bool isGridAutoFlowAlgorithmDense() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmDense); }
+    bool isGridAutoFlowAlgorithmStack() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmStack); }
     const GridTrackSize& gridAutoColumns() const { return rareNonInheritedData->m_grid->m_gridAutoColumns; }
     const GridTrackSize& gridAutoRows() const { return rareNonInheritedData->m_grid->m_gridAutoRows; }
 
@@ -1885,7 +1890,7 @@ public:
     static Vector<GridTrackSize> initialGridColumns() { return Vector<GridTrackSize>(); }
     static Vector<GridTrackSize> initialGridRows() { return Vector<GridTrackSize>(); }
 
-    static GridAutoFlow initialGridAutoFlow() { return AutoFlowNone; }
+    static GridAutoFlow initialGridAutoFlow() { return AutoFlowRow; }
 
     static GridTrackSize initialGridAutoColumns() { return GridTrackSize(Auto); }
     static GridTrackSize initialGridAutoRows() { return GridTrackSize(Auto); }
index f015d74..0ec2df0 100644 (file)
@@ -537,7 +537,26 @@ enum LineAlign { LineAlignNone, LineAlignEdges };
 enum RubyPosition { RubyPositionBefore, RubyPositionAfter };
 
 #if ENABLE(CSS_GRID_LAYOUT)
-enum GridAutoFlow { AutoFlowNone, AutoFlowColumn, AutoFlowRow };
+static const size_t GridAutoFlowBits = 5;
+enum InternalGridAutoFlowAlgorithm {
+    InternalAutoFlowAlgorithmSparse = 0x1,
+    InternalAutoFlowAlgorithmDense = 0x2,
+    InternalAutoFlowAlgorithmStack = 0x4
+};
+
+enum InternalGridAutoFlowDirection {
+    InternalAutoFlowDirectionRow = 0x8,
+    InternalAutoFlowDirectionColumn = 0x10
+};
+
+enum GridAutoFlow {
+    AutoFlowRow = InternalAutoFlowAlgorithmSparse | InternalAutoFlowDirectionRow,
+    AutoFlowColumn = InternalAutoFlowAlgorithmSparse | InternalAutoFlowDirectionColumn,
+    AutoFlowRowDense = InternalAutoFlowAlgorithmDense | InternalAutoFlowDirectionRow,
+    AutoFlowColumnDense = InternalAutoFlowAlgorithmDense | InternalAutoFlowDirectionColumn,
+    AutoFlowStackRow = InternalAutoFlowAlgorithmStack | InternalAutoFlowDirectionRow,
+    AutoFlowStackColumn = InternalAutoFlowAlgorithmStack | InternalAutoFlowDirectionColumn
+};
 #endif
 
 // Reasonable maximum to prevent insane font sizes from causing crashes on some platforms (such as Windows).
index 059e4de..890822a 100644 (file)
@@ -67,7 +67,7 @@ public:
     OrderedNamedGridLinesMap m_orderedNamedGridColumnLines;
     OrderedNamedGridLinesMap m_orderedNamedGridRowLines;
 
-    GridAutoFlow m_gridAutoFlow;
+    unsigned m_gridAutoFlow : GridAutoFlowBits;
 
     GridTrackSize m_gridAutoRows;
     GridTrackSize m_gridAutoColumns;