[css-grid] New syntax for the 'grid' shorthand

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
index 73cdf6ec523d1b4ff76dcfdd601f27856d7810be..6183092b6208de55d2a64083f2c13306831a4022 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
@@ -12,38 +12,80 @@
 .gridWithInherit {
     grid: inherit;
 }
-#gridWithAutoFlowAndRows {
-    grid: column 10px;
-}
-#gridWithAutoFlowNone {
-    grid: none 10px;
+#gridWithAutoFlowAndAutoRows {
+    grid: auto-flow 10px / none;
 }
 #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;
+}

[Manuel Rego, 2016/09/12 20:48:17]

Nit: you don't have a test for:
  grid: auto-flow / 10px;

[jfernandez, 2016/09/13 12:50:30]

Done.

+#gridWithRowsNoneAndAutoFlowAndAutoColumn {
+    grid: none / auto-flow 10px;
+}
+#gridWithRowsAndAutoFlowDenseColumn {
+    grid: 10px / auto-flow dense;
+}
+#gridWithRowsAndAutoFlowAndAutoColumns {
+    grid: 20px / auto-flow 10px;
+}
+#gridWithRowsAndAutoFlowAndMultipleAutoTracks {
+    grid: 100px 50px / auto-flow 20px 10px;
 }
 
 /* Bad values. */
 
-#gridWithExplicitAndImplicit {
-    grid: 10px / 20px column;
+#gridWithMisplacedAutoColumn {
+    grid: 10px / 20px auto-flow;
 }
 #gridWithMisplacedNone1 {
-    grid: column 10px / none 20px;
+    grid: auto-flow 10px / none 20px;
 }
 #gridWithMisplacedNone2 {
     grid: 10px / 20px none;
 }
 #gridWithMisplacedDense {
-    grid: dense column dense;
+    grid: dense auto-flow / 10px;

[Manuel Rego, 2016/09/12 20:48:17]

I believe this is right, as the spec says:
  [ auto-flow && dense? ] <‘grid-auto-rows’>? / <‘grid-template-columns’>

So the order between auto-flow and dense is no important:
https://drafts.csswg.org/css-values-4/#comb-all

[jfernandez, 2016/09/13 12:50:30]

Acknowledged.

+}
+#gridWitDuplicatedDense {
+    grid: dense auto-flow dense / 10px;
+}
+#gridWithoutColumnInfo {
+    grid: auto-flow dense 10px;
+}
+#gridWithTwoAutoFlow {
+    grid: auto-flow / auto-flow 20px;
+}
+#gridWithImplicitAndNoExplicit {
+    grid: column 20px / 10px;
+}
+#gridWithExtraIdBeforeAutoFlowColumn {
+    grid: 10px / a auto-flow 20px;
+}
+#gridWithExtraIdBeforeAutoFlowRow {
+    grid: a auto-flow 10px / 20px;
+}
+#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;

[Manuel Rego, 2016/09/12 20:48:17]

Nit: We could add another wrong case only with dense:
  grid: dense / 10px;
or:
  grid: 10px / dense;

[jfernandez, 2016/09/13 12:50:30]

Acknowledged.

 }
 </style>
 <script src="../../resources/js-test.js"></script>
@@ -57,16 +99,30 @@
 <div class="grid" class="gridWithTemplate">
     <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
 </div-->
-<div class="grid" id="gridWithAutoFlowAndRows"></div>
-<div class="grid" id="gridWithAutoFlowNone"></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="gridWithAutoFlowAndAutoRowsAndColumns"></div>
 <div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
-<div class="grid" id="gridWithExplicitAndImplicit"></div>
+<div class="grid" id="gridWithRowsAndAutoFlow"></div>
+<div class="grid" id="gridWithRowsNoneAndAutoFlowAndAutoColumn"></div>
+<div class="grid" id="gridWithRowsAndAutoFlowDenseColumn"></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="gridWithMisplacedDense"></div>
+<div class="grid" id="gridWithDuplicatedDense"></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="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.");
@@ -76,26 +132,43 @@
     testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "10px", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows"), "none", "none", "none", "column", "10px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "row", "auto", "auto");
-    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("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("gridWithRowsAndAutoFlowAndAutoColumns"), "none", "20px", "none", "column", "10px", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndMultipleAutoTracks"), "none", "100px 50px", "none", "column", "20px 10px", "auto");
 
     debug("");
     debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
-    testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "none", "none", "none", "row", "auto", "auto");
+    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("gridWithDuplicatedDense"), "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");
@@ -111,7 +184,9 @@
 
     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("");