[webkit-changes] [206161] trunk

Tue, 20 Sep 2016 11:41:33 -0700

Title: [206161] trunk
Revision
206161
Author
jfernan...@igalia.com
Date
2016-09-20 11:41:43 -0700 (Tue, 20 Sep 2016)

Log Message

[css-grid] The 'grid' shorthand has a new syntax.
https://bugs.webkit.org/show_bug.cgi?id=161954

Reviewed by Darin Adler.

Source/WebCore:

Implementation of the new CSS syntax for the 'grid' shorthand, as
defined in the CSS Grid Layout specification:
- https://drafts.csswg.org/css-grid/#grid-shorthand

No new tests, just adapted the ones we already have and added a few additional test cases.

* css/CSSValueKeywords.in:
* css/parser/CSSParser.cpp:
(WebCore::CSSParser::parseImplicitAutoFlow): Added. Similar to parseGridAutoFlow, but using the new 'auto-flow' keyword.
(WebCore::CSSParser::parseGridShorthand): New syntax of the 'grid' shorthand.
* css/parser/CSSParser.h:

LayoutTests:

Adapted the already defined test cases to the new syntax of the
'grid' shorthand. Also added a few additional test cases.

* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (206160 => 206161)


--- trunk/LayoutTests/ChangeLog	2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/LayoutTests/ChangeLog	2016-09-20 18:41:43 UTC (rev 206161)
@@ -1,3 +1,16 @@
+2016-09-20  Javier Fernandez  <jfernan...@igalia.com>
+
+        [css-grid] The 'grid' shorthand has a new syntax.
+        https://bugs.webkit.org/show_bug.cgi?id=161954
+
+        Reviewed by Darin Adler.
+
+        Adapted the already defined test cases to the new syntax of the
+        'grid' shorthand. Also added a few additional test cases.
+
+        * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
+        * fast/css-grid-layout/grid-shorthand-get-set.html:
+
 2016-09-20  Ryan Haddad  <ryanhad...@apple.com>
 
         Marking js/regress-139548.html as a flaky timeout on mac-wk2 debug.

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt (206160 => 206161)


--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt	2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt	2016-09-20 18:41:43 UTC (rev 206161)
@@ -4,12 +4,12 @@
 
 
 Test getting the longhand values when shorthand is set through CSS.
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-columns') is "15px"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-rows') is "10px"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-areas') is "none"
@@ -16,86 +16,98 @@
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-flow') is "column"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-columns') is "15px"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridColumnsAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRows, '').getPropertyValue('grid-auto-rows') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-areas') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-flow') is "column dense"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-areas') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "column"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-template-columns') is "20px"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowAndAutoRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-columns') is "100px 50px"
 PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-areas') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-columns') is "100px 10%"
+PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-rows') is "20px 10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithRowsNoneAndAutoFlowAndAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-auto-flow') is "column dense"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowDenseColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithColumnsAndDenseAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-template-rows') is "20px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndAutoColumns, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-rows') is "100px 50px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-columns') is "20px 10px"
+PASS window.getComputedStyle(gridWithRowsAndAutoFlowAndMultipleAutoTracks, '').getPropertyValue('grid-auto-rows') is "auto"
 
-Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-rows') is "auto"
+Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-areas') is "none"
@@ -114,54 +126,72 @@
 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithDuplicatedDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithOnlyDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithoutColumnInfo, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTwoAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithImplicitAndNoExplicit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoFlowRow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdBeforeAutoRow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExtraIdAfterAutoRow, '').getPropertyValue('grid-auto-rows') is "auto"
 
 Test getting and setting 'grid' shorthand through JS
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px"
@@ -189,7 +219,7 @@
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
 PASS element.style.gridAutoRows is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
-PASS element.style.gridTemplateColumns is "initial"
+PASS element.style.gridTemplateColumns is "none"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
 PASS element.style.gridTemplateRows is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
@@ -196,14 +226,14 @@
 PASS element.style.gridTemplateAreas is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row dense"
 PASS element.style.gridAutoFlow is "row dense"
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
-PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px"
 PASS element.style.gridAutoRows is "20px"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS element.style.gridTemplateColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
-PASS element.style.gridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px"
+PASS element.style.gridTemplateRows is "20px"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
 PASS element.style.gridTemplateAreas is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
@@ -210,8 +240,32 @@
 PASS element.style.gridAutoFlow is "column"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10px"
 PASS element.style.gridAutoColumns is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px"
-PASS element.style.gridAutoRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column dense"
+PASS element.style.gridAutoFlow is "column dense"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "10px"
+PASS element.style.gridTemplateRows is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
+PASS element.style.gridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
 
 Test the initial value
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
@@ -230,8 +284,8 @@
 Test setting grid-template-columns and grid-template-rows back to 'none' through JS
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS element.style.gridTemplateColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
-PASS element.style.gridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "10px"
+PASS element.style.gridTemplateRows is "10px"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
 PASS element.style.gridTemplateAreas is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
@@ -238,8 +292,8 @@
 PASS element.style.gridAutoFlow is "column"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
 PASS element.style.gridAutoColumns is "20px"
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "10px"
-PASS element.style.gridAutoRows is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS element.style.gridTemplateColumns is "none"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
@@ -252,6 +306,30 @@
 PASS element.style.gridAutoColumns is "initial"
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
 PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px"
+PASS element.style.gridTemplateRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
+PASS element.style.gridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS element.style.gridAutoColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row"
+PASS element.style.gridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
 
 Test the inherit value on reset-only subproperties (grid-*-gap)
 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is "0px"

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html (206160 => 206161)


--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html	2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html	2016-09-20 18:41:43 UTC (rev 206161)
@@ -3,158 +3,187 @@
 <head>
 <link href="" rel="stylesheet">
 <style>
-#gridWithDense {
-    grid: dense;
+#gridWithNone {
+    grid: none;
 }
-#gridWithTemplate {
+.gridWithTemplate {
     grid: 10px / 15px;
 }
-#gridWithTemplate1 {
-    grid: 10px / none;
+.gridWithInherit {
+    grid: inherit;
 }
-#gridWithTemplateNone {
-    grid: 10px / none;
+#gridColumnsAndAutoFlow {
+    grid: auto-flow / 10px;
 }
-#gridWithAutoFlowDenseAndRowsAndColumns {
-    grid: dense 10px / 20px;
+#gridWithAutoFlowAndAutoRows {
+    grid: auto-flow 10px / none;
 }
-#gridWithAutoFlowAndRows {
-    grid: column 10px;
-}
-#gridWithAutoFlowDense {
-    grid: dense 10px;
-}
 #gridWithAutoFlowColumnDense {
-    grid: column dense 10px;
+    grid: none / auto-flow dense;
 }
 #gridWithAutoFlowDenseRow {
-    grid: dense row 10px;
+    grid: auto-flow dense / none;
 }
-#gridWithAutoFlowAndRowsAndColumns {
-    grid: column 10px / 20px;
+#gridWithAutoFlowAndAutoRowsAndColumns {
+    grid: auto-flow 10px / 20px;
 }
 #gridWithAutoFlowAndMultipleAutoTracks {
-    grid: row 20px 10px / 100px 10%;
+    grid: auto-flow 20px 10px / 100px 50px;
 }
+#gridWithRowsAndAutoFlow {
+    grid: 10px / auto-flow;
+}
+#gridWithRowsNoneAndAutoFlowAndAutoColumn {
+    grid: none / auto-flow 10px;
+}
+#gridWithRowsAndAutoFlowDenseColumn {
+    grid: 10px / auto-flow dense;
+}
+#gridWithColumnsAndDenseAutoFlow {
+    grid: dense auto-flow / 10px;
+}
+#gridWithRowsAndAutoFlowAndAutoColumns {
+    grid: 20px / auto-flow 10px;
+}
+#gridWithRowsAndAutoFlowAndMultipleAutoTracks {
+    grid: 100px 50px / auto-flow 20px 10px;
+}
 
 /* Bad values. */
 
-#gridWithNone {
-    grid: none;
+#gridWithMisplacedAutoColumn {
+    grid: 10px / 20px auto-flow;
 }
-#gridWithAutoFlowNoneAndRowsAndColumns {
-    grid: none 10px / 20px;
-}
-#gridWithAutoFlowNone {
-    grid: none 10px;
-}
-#gridWithExplicitAndImplicit {
-    grid: 10px / 20px column;
-}
 #gridWithMisplacedNone1 {
-    grid: column 10px / none 20px;
+    grid: auto-flow 10px / none 20px;
 }
 #gridWithMisplacedNone2 {
     grid: 10px / 20px none;
 }
-#gridWithWrongSlash1 {
-    grid: column / 10px;
+#gridWithMisplacedDense {
+    grid: dense 10px / auto-flow 20px;
 }
-#gridWithWrongSlash2 {
-    grid: 5x / 10px / 20px;
+#gridWithDuplicatedDense {
+    grid: dense auto-flow dense / 10px;
 }
-#gridWithAutoFlowRowAndColumn {
-    grid: row column 10px;
+#gridWithOnlyDense {
+    grid: dense / 10px;
 }
-#gridWithAutoFlowString1 {
-    grid: row 10px "a";
+#gridWithoutColumnInfo {
+    grid: auto-flow dense 10px;
 }
-#gridWithAutoFlowString2 {
-    grid: row "a" 10px;
+#gridWithTwoAutoFlow {
+    grid: auto-flow / auto-flow 20px;
 }
-#gridWithAutoFlowString3 {
-    grid: row "a";
+#gridWithImplicitAndNoExplicit {
+    grid: column 20px / 10px;
 }
-#gridWithTemplateAndAutoFlow {
-    grid: 10px / 10px row;
+#gridWithExtraIdBeforeAutoFlowColumn {
+    grid: 10px / a auto-flow 20px;
 }
-#gridWithTemplateAndMisplacedString1 {
-    grid: 10px / 10px "a";
+#gridWithExtraIdBeforeAutoFlowRow {
+    grid: a auto-flow 10px / 20px;
 }
-#gridWithMisplacedDense {
-    grid: dense column dense;
+#gridWithExtraIdBeforeAutoColumn {
+    grid: 10px / auto-flow a 20px;
 }
+#gridWithExtraIdAfterAutoColumn {
+    grid: 10px / auto-flow 20px a;
+}
+#gridWithExtraIdBeforeAutoRow {
+   grid: auto-flow a 20px / 10px;
+}
+#gridWithExtraIdAfterAutoRow {
+   grid: auto-flow 20px a / 10px;
+}
 </style>
 <script src=""
 </head>
 <body>
-<div class="grid" id="gridWithDense"></div>
-<div class="grid" id="gridWithTemplate"></div>
-<div class="grid" id="gridWithTemplate1"></div>
-<div class="grid" id="gridWithAutoFlowDenseAndRowsAndColumns"></div>
-<div class="grid" id="gridWithAutoFlowAndRows"></div>
-<div class="grid" id="gridWithAutoFlowDense"></div>
+<div class="grid" id="gridWithNone"></div>
+<div class="grid gridWithTemplate" id="gridWithTemplate"></div>
+<div class="grid gridWithTemplate">
+    <div class="grid gridWithInherit" id="gridInherit"></div>
+</div>
+<div class="grid" class="gridWithTemplate">
+    <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
+</div-->
+<div class="grid" id="gridColumnsAndAutoFlow"></div>
+<div class="grid" id="gridWithAutoFlowAndAutoRows"></div>
 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
-<div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div>
-<div class="grid" id="gridWithNone"></div>
-<div class="grid" id="gridWithTemplateNone"></div>
-<div class="grid" id="gridWithAutoFlowNoneAndRowsAndColumns"></div>
-<div class="grid" id="gridWithAutoFlowNone"></div>
-<div class="grid" id="gridWithExplicitAndImplicit"></div>
+<div class="grid" id="gridWithAutoFlowAndAutoRowsAndColumns"></div>
+<div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
+<div class="grid" id="gridWithRowsAndAutoFlow"></div>
+<div class="grid" id="gridWithRowsNoneAndAutoFlowAndAutoColumn"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowDenseColumn"></div>
+<div class="grid" id="gridWithColumnsAndDenseAutoFlow"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowAndAutoColumns"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowAndMultipleAutoTracks"></div>
+<div class="grid" id="gridWithMisplacedAutoColumn"></div>
 <div class="grid" id="gridWithMisplacedNone1"></div>
 <div class="grid" id="gridWithMisplacedNone2"></div>
-<div class="grid" id="gridWithWrongSlash1"></div>
-<div class="grid" id="gridWithWrongSlash2"></div>
-<div class="grid" id="gridWithAutoFlowRowAndColumn"></div>
-<div class="grid" id="gridWithAutoFlowString1"></div>
-<div class="grid" id="gridWithAutoFlowString2"></div>
-<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="gridWithAutoFlowAndMultipleAutoTracks"></div>
+<div class="grid" id="gridWithDuplicatedDense"></div>
+<div class="grid" id="gridWithOnlyDense"></div>
+<div class="grid" id="gridWithoutColumnInfo"></div>
+<div class="grid" id="gridWithTwoAutoFlow"></div>
+<div class="grid" id="gridWithImplicitAndNoExplicit"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoFlowColumn"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoFlowRow"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoColumn"></div>
+<div class="grid" id="gridWithExtraIdAfterAutoColumn"></div>
+<div class="grid" id="gridWithExtraIdBeforeAutoRow"></div>
+<div class="grid" id="gridWithExtraIdAfterAutoRow"></div>
 <script src=""
 <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("gridWithDense"), "none", "none", "none", "row dense", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "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("gridWithAutoFlowDenseAndRowsAndColumns"), "none", "none", "none", "row dense", "20px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows"), "none", "none", "none", "column", "10px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDense"), "none", "none", "none", "row dense", "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("gridWithAutoFlowAndRowsAndColumns"), "none", "none", "none", "column", "20px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultipleAutoTracks"), "none", "none", "none", "row", "100px 10%", "20px 10px");
+    testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "10px", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridColumnsAndAutoFlow"), "10px", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRows"), "none", "none", "none", "row", "auto", "10px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRowsAndColumns"), "20px", "none", "none", "row", "auto", "10px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultipleAutoTracks"), "100px 50px", "none", "none", "row", "auto", "20px 10px");
 
+    testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlow"), "none", "10px", "none", "column", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithRowsNoneAndAutoFlowAndAutoColumn"), "none", "none", "none", "column", "10px", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowDenseColumn"), "none", "10px", "none", "column dense", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithColumnsAndDenseAutoFlow"), "10px", "none", "none", "row dense", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndAutoColumns"), "none", "20px", "none", "column", "10px", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndMultipleAutoTracks"), "none", "100px 50px", "none", "column", "20px 10px", "auto");
+
     debug("");
-    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("gridWithAutoFlowNoneAndRowsAndColumns"), "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");
+    debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
+    testGridDefinitionsValues(document.getElementById("gridWithMisplacedAutoColumn"), "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("gridWithWrongSlash1"), "none", "none", "none", "row", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithWrongSlash2"), "none", "none", "none", "row", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowAndColumn"), "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");
+    testGridDefinitionsValues(document.getElementById("gridWithDuplicatedDense"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithOnlyDense"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithoutColumnInfo"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithTwoAutoFlow"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithImplicitAndNoExplicit"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowColumn"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowRow"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoColumn"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoColumn"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoRow"), "none", "none", "none", "row", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoRow"), "none", "none", "none", "row", "auto", "auto");
 
     debug("");
     debug("Test getting and setting 'grid' shorthand through JS");
     testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
     testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
-    testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "row dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
-    testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
+    testGridDefinitionsSetJSValues("auto-flow dense 20px / none", "none", "none", "none", "row dense", "auto", "20px", "none", "initial", "initial", "row dense", "initial", "20px");
+    testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "initial");
+    testGridDefinitionsSetJSValues("none / auto-flow dense 20px", "none", "none", "none", "column dense", "20px", "auto", "initial", "none", "initial", "column dense", "20px", "initial");
+    testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "initial");
 
     debug("");
     debug("Test the initial value");
@@ -170,8 +199,10 @@
 
     debug("");
     debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
-    testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");
+    testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "initial");
     testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
+    testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "initial");
+    testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
 
     debug("");
     debug("Test the inherit value on reset-only subproperties (grid-*-gap)");

Modified: trunk/Source/WebCore/ChangeLog (206160 => 206161)


--- trunk/Source/WebCore/ChangeLog	2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/Source/WebCore/ChangeLog	2016-09-20 18:41:43 UTC (rev 206161)
@@ -1,3 +1,22 @@
+2016-09-20  Javier Fernandez  <jfernan...@igalia.com>
+
+        [css-grid] The 'grid' shorthand has a new syntax.
+        https://bugs.webkit.org/show_bug.cgi?id=161954
+
+        Reviewed by Darin Adler.
+
+        Implementation of the new CSS syntax for the 'grid' shorthand, as
+        defined in the CSS Grid Layout specification:
+        - https://drafts.csswg.org/css-grid/#grid-shorthand
+
+        No new tests, just adapted the ones we already have and added a few additional test cases.
+
+        * css/CSSValueKeywords.in:
+        * css/parser/CSSParser.cpp:
+        (WebCore::CSSParser::parseImplicitAutoFlow): Added. Similar to parseGridAutoFlow, but using the new 'auto-flow' keyword.
+        (WebCore::CSSParser::parseGridShorthand): New syntax of the 'grid' shorthand.
+        * css/parser/CSSParser.h:
+
 2016-09-20  Alex Christensen  <achristen...@webkit.org>
 
         URLParser should allow '@' in user

Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (206160 => 206161)


--- trunk/Source/WebCore/css/CSSValueKeywords.in	2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/Source/WebCore/css/CSSValueKeywords.in	2016-09-20 18:41:43 UTC (rev 206161)
@@ -1250,6 +1250,7 @@
 span
 
 // grid-auto-flow
+auto-flow
 dense
 
 #if defined(ENABLE_CSS3_TEXT) && ENABLE_CSS3_TEXT

Modified: trunk/Source/WebCore/css/parser/CSSParser.cpp (206160 => 206161)


--- trunk/Source/WebCore/css/parser/CSSParser.cpp	2016-09-20 18:35:24 UTC (rev 206160)
+++ trunk/Source/WebCore/css/parser/CSSParser.cpp	2016-09-20 18:41:43 UTC (rev 206161)
@@ -5501,6 +5501,33 @@
     return parseGridTemplateRowsAndAreasAndColumns(important);
 }
 
+static RefPtr<CSSValue> parseImplicitAutoFlow(CSSParserValueList& inputList, Ref<CSSPrimitiveValue>&& flowDirection)
+{
+    // [ auto-flow && dense? ]
+    auto value = inputList.current();
+    if (!value)
+        return nullptr;
+    auto list = CSSValueList::createSpaceSeparated();
+    list->append(WTFMove(flowDirection));
+    if (value->id == CSSValueAutoFlow) {
+        value = inputList.next();
+        if (value && value->id == CSSValueDense) {
+            list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueDense));
+            inputList.next();
+        }
+    } else {
+        if (value->id != CSSValueDense)
+            return nullptr;
+        value = inputList.next();
+        if (!value || value->id != CSSValueAutoFlow)
+            return nullptr;
+        list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueDense));
+        inputList.next();
+    }
+
+    return WTFMove(list);
+}
+
 bool CSSParser::parseGridShorthand(bool important)
 {
     ASSERT(isCSSGridLayoutEnabled());
@@ -5522,45 +5549,72 @@
 
     // Need to rewind parsing to explore the alternative syntax of this shorthand.
     m_valueList->setCurrentIndex(0);
-
-    // 2- <grid-auto-flow> [ <grid-auto-columns> [ / <grid-auto-rows> ]? ]
-    if (!parseValue(CSSPropertyGridAutoFlow, important))
+    auto value = m_valueList->current();
+    if (!value)
         return false;
 
     RefPtr<CSSValue> autoColumnsValue;
     RefPtr<CSSValue> autoRowsValue;
-
-    if (m_valueList->current()) {
-        autoRowsValue = parseGridTrackList(GridAuto);
-        if (!autoRowsValue)
+    RefPtr<CSSValue> templateRows;
+    RefPtr<CSSValue> templateColumns;
+    RefPtr<CSSValue> gridAutoFlow;
+    if (value->id == CSSValueDense || value->id == CSSValueAutoFlow) {
+        // 2- [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
+        gridAutoFlow = parseImplicitAutoFlow(*m_valueList, CSSValuePool::singleton().createIdentifierValue(CSSValueRow));
+        if (!gridAutoFlow)
             return false;
-        if (m_valueList->current()) {
-            if (!isForwardSlashOperator(*m_valueList->current()) || !m_valueList->next())
+        if (!m_valueList->current())
+            return false;
+        if (isForwardSlashOperator(*m_valueList->current()))
+            autoRowsValue = CSSValuePool::singleton().createImplicitInitialValue();
+        else {
+            autoRowsValue = parseGridTrackList(GridAuto);
+            if (!autoRowsValue)
                 return false;
+            if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current())))
+                return false;
+        }
+        if (!m_valueList->next())
+            return false;
+        templateColumns = parseGridTrackList(GridTemplate);
+        if (!templateColumns)
+            return false;
+        templateRows = CSSValuePool::singleton().createImplicitInitialValue();
+        autoColumnsValue = CSSValuePool::singleton().createImplicitInitialValue();
+    } else {
+        // 3- <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?
+        templateRows = parseGridTrackList(GridTemplate);
+        if (!templateRows)
+            return false;
+        if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current())))
+            return false;
+        if (!m_valueList->next())
+            return false;
+        gridAutoFlow = parseImplicitAutoFlow(*m_valueList, CSSValuePool::singleton().createIdentifierValue(CSSValueColumn));
+        if (!gridAutoFlow)
+            return false;
+        if (!m_valueList->current())
+            autoColumnsValue = CSSValuePool::singleton().createImplicitInitialValue();
+        else {
             autoColumnsValue = parseGridTrackList(GridAuto);
             if (!autoColumnsValue)
                 return false;
         }
-        if (m_valueList->current())
-            return false;
-    } else {
-        // Other omitted values are set to their initial values.
-        autoColumnsValue = CSSValuePool::singleton().createImplicitInitialValue();
+        templateColumns = CSSValuePool::singleton().createImplicitInitialValue();
         autoRowsValue = CSSValuePool::singleton().createImplicitInitialValue();
     }
 
-    // if <grid-auto-rows> value is omitted, it is set to the value specified for grid-auto-columns.
-    if (!autoColumnsValue)
-        autoColumnsValue = autoRowsValue;
+    if (m_valueList->current())
+        return false;
 
-    addProperty(CSSPropertyGridAutoColumns, autoColumnsValue.releaseNonNull(), important);
-    addProperty(CSSPropertyGridAutoRows, autoRowsValue.releaseNonNull(), important);
-
     // It can only be specified the explicit or the implicit grid properties in a single grid declaration.
     // The sub-properties not specified are set to their initial value, as normal for shorthands.
-    addProperty(CSSPropertyGridTemplateColumns, CSSValuePool::singleton().createImplicitInitialValue(), important);
-    addProperty(CSSPropertyGridTemplateRows, CSSValuePool::singleton().createImplicitInitialValue(), important);
+    addProperty(CSSPropertyGridTemplateColumns, templateColumns.releaseNonNull(), important);
+    addProperty(CSSPropertyGridTemplateRows, templateRows.releaseNonNull(), important);
     addProperty(CSSPropertyGridTemplateAreas, CSSValuePool::singleton().createImplicitInitialValue(), important);
+    addProperty(CSSPropertyGridAutoFlow, gridAutoFlow.releaseNonNull(), important);
+    addProperty(CSSPropertyGridAutoColumns, autoColumnsValue.releaseNonNull(), important);
+    addProperty(CSSPropertyGridAutoRows, autoRowsValue.releaseNonNull(), important);
     addProperty(CSSPropertyGridColumnGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
     addProperty(CSSPropertyGridRowGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
 

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to