[css-grid] grid-auto-flow|row should take a <track-size>+

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html
index 29edd22b8089c0a0673b2bbbf6bc2a69dda3eec2..80d8cd15a98cb2da7a69e57be6b37a901f0b26e0 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html
@@ -30,6 +30,14 @@
     grid-auto-columns: minmax(10vw, auto);
 }
 
+.gridAutoMultipleTracks {
+    width: 100px;
+    height: 50px;
+    grid-auto-rows: 10px 20px 30px;
+    grid-auto-columns: 25px 50px 100px;
+}
+
+.ahem { font: 10px/1 Ahem; }
 </style>
 <script src="../../resources/js-test.js"></script>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
@@ -46,6 +54,19 @@
     <div class="sizedToGridArea thirdRowAutoColumn"></div>
     <div class="sizedToGridArea autoRowThirdColumn"></div>
 </div>
+<div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks">
+    <div class="ahem" style="grid-column: 1; grid-row: 1"></div>

[Manuel Rego, 2016/07/22 08:24:55]

Nit: "ahem" class is not needed here as you don't have any text.

[svillar, 2016/07/22 13:08:28]

Yeah, it used to, but I removed it at the very last moment.

+    <div class="ahem" style="grid-column: 2; grid-row: 2"></div>
+    <div class="ahem" style="grid-column: 3; grid-row: 3"></div>
+    <div class="ahem" style="grid-column: 4; grid-row: 4"></div>
+</div>
+<div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndexes">
+    <div class="ahem" style="grid-column: -2; grid-row: -2"></div>
+    <div class="ahem" style="grid-column: -3; grid-row: -3"></div>
+    <div class="ahem" style="grid-column: -4; grid-row: -4"></div>
+    <div class="ahem" style="grid-column: -5; grid-row: -5"></div>
+</div>
+
 <script>
 description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
 
@@ -61,6 +82,8 @@ testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChi
 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px 40px 40px", "15px 30px 30px");
+testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracks"), "25px 50px 100px 25px", "10px 20px 30px 10px");
+testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracksNegativeIndexes"), "100px 25px 50px 100px", "30px 10px 20px 30px");
 
 debug("");
 debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions");
@@ -75,64 +98,31 @@ document.body.appendChild(element);
 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 
+function testAutoValues(autoCols, autoRows, computedAutoCols, computedAutoRows) {
+     element = document.createElement("div");
+     document.body.appendChild(element);
+     element.style.fontSize = "10px";
+     element.style.gridAutoColumns = autoCols;
+     element.style.gridAutoRows = autoRows;
+     shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", computedAutoCols || autoCols);
+     shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", computedAutoRows || autoRows);
+}
+
 debug("");
 debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
-element.style.font = "10px Ahem";
-element.style.gridAutoColumns = "18em";
-element.style.gridAutoRows = "66em";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'180px'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'660px'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.gridAutoColumns = "minmax(min-content, 8vh)";
-element.style.gridAutoRows = "minmax(10vw, min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(min-content, 48px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(80px, min-content)'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.gridAutoColumns = "minmax(min-content, max-content)";
-element.style.gridAutoRows = "minmax(max-content, min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(min-content, max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(max-content, min-content)'");
+testAutoValues("18em", "66em", "180px", "660px");
+testAutoValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(min-content, 48px)", "minmax(80px, min-content)");
+testAutoValues("minmax(min-content, max-content)", "minmax(max-content, min-content)");
+testAutoValues("minmax(min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)");

[Manuel Rego, 2016/07/22 08:24:55]

Shouldn't the percentages be resolved when you check the computed style?

[svillar, 2016/07/22 13:08:28]

Content sized tracks cannot be resolved for obvious reasons, but percentages of
definite sizes should be indeed resolved. I'll check it.

 
 debug("");
 debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-// No comma.
-element.style.gridAutoColumns = "minmax(10px 20px)";
-// Only 1 argument provided.
-element.style.gridAutoRows = "minmax(10px)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
-// Nested minmax.
-element.style.gridAutoColumns = "minmax(minmax(10px, 20px), 20px)";
-// Only 2 arguments are allowed.
-element.style.gridAutoRows = "minmax(10px, 20px, 30px)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
-// No breadth value.
-element.style.gridAutoColumns = "minmax()";
-// No comma.
-element.style.gridAutoRows = "minmax(30px 30% 30em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
-// None is not allowed for grid-auto-{rows|columns}.
-element.style.gridAutoColumns = "none";
-element.style.gridAutoRows = "none";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
+testAutoValues("minmax(10px 20px)", "minmax(10px)", "auto", "auto");
+testAutoValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)", "auto", "auto");
+testAutoValues("minmax()", "minmax(30px 30% 30em)", "auto", "auto");
+testAutoValues("none", "none", "auto", "auto");
+testAutoValues("10px [a] 20px", "[z] auto [y] min-content", "auto", "auto");
+testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto", "auto");
 
 function testInherit()
 {