[css-grid] grid-auto-flow|row should take a <track-size>+
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 26 Jul 2016 09:37:41 +0000 (09:37 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 26 Jul 2016 09:37:41 +0000 (09:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=160158

Reviewed by Darin Adler.

Source/WebCore:

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackSizeList):
(WebCore::ComputedStyleExtractor::propertyValue): Return a list of <track-size> instead of
just one.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue): Use the new values of TrackListType;
(WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns): Ditto.
(WebCore::CSSParser::parseGridTemplateShorthand): Ditto.
(WebCore::CSSParser::parseGridShorthand): Ditto.
(WebCore::CSSParser::parseGridTrackList): Changed behavior depending on the value of
TrackSizeList.
* css/CSSParser.h: TrackListType has now 3 different values which determine the behavior of
parseGridTrackList.
* css/CSSPropertyNames.in: Use a new converter for lists.
* css/StyleBuilderConverter.h:
(WebCore::StyleBuilderConverter::convertGridTrackSizeList):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::rawGridTrackSize): Resolve the size of the auto track.
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::gridAutoColumns): Return a Vector.
(WebCore::RenderStyle::gridAutoRows): Ditto.
(WebCore::RenderStyle::setGridAutoColumns): Store a Vector.
(WebCore::RenderStyle::setGridAutoRows): Ditto.
(WebCore::RenderStyle::initialGridAutoColumns): Return a Vector with one auto track.
(WebCore::RenderStyle::initialGridAutoRows): Ditto.
* rendering/style/StyleGridData.h: Store a Vector of GridTrackSize instead of just one.

LayoutTests:

* fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:
* svg/css/getComputedStyle-basic-expected.txt: CSSPrimitiveValue -> CSSValueList.

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

15 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
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/CSSPropertyNames.in
Source/WebCore/css/StyleBuilderConverter.h
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/StyleGridData.h

index c52a4a5..b45ee80 100644 (file)
@@ -1,3 +1,16 @@
+2016-07-25  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] grid-auto-flow|row should take a <track-size>+
+        https://bugs.webkit.org/show_bug.cgi?id=160158
+
+        Reviewed by Darin Adler.
+
+        * fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
+        * fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
+        * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
+        * fast/css-grid-layout/grid-shorthand-get-set.html:
+        * svg/css/getComputedStyle-basic-expected.txt: CSSPrimitiveValue -> CSSValueList.
+
 2016-07-25  Frederic Wang  <fwang@igalia.com>
 
         MathOperator: Add a mapping from combining to non-combining equivalents
index 5fd67fd..12532a8 100644 (file)
@@ -22,6 +22,10 @@ PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').g
 PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "40px"
 PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "20px 40px 40px"
 PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "15px 30px 30px"
+PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-columns') is "25px 50px 100px 25px"
+PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-rows') is "10px 20px 30px 10px"
+PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-columns') is "100px 25px 50px 100px"
+PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-rows') is "30px 10px 20px 30px"
 
 Test that grid-template-* definitions are not affected by grid-auto-* definitions
 PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-columns') is "none"
@@ -36,22 +40,28 @@ PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'aut
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
 
 Test getting and setting grid-auto-columns and grid-auto-rows through JS
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '180px'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is '660px'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'minmax(-webkit-min-content, 48px)'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'minmax(80px, -webkit-min-content)'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'minmax(-webkit-min-content, -webkit-max-content)'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'minmax(-webkit-max-content, -webkit-min-content)'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "180px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "660px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(-webkit-min-content, 48px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "minmax(80px, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(-webkit-min-content, 10px) 48px 5%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto 30px minmax(10%, 60%)"
 
 Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
 
 Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '50px'
index 559b115..eaa62c4 100644 (file)
     grid-auto-columns: minmax(10vw, auto);
 }
 
+.gridAutoMultipleTracks {
+    width: 100px;
+    height: 50px;
+    grid-auto-rows: 10px 20px 30px;
+    grid-auto-columns: 25px 50px 100px;
+}
+
 </style>
 <script src="../../resources/js-test-pre.js"></script>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
     <div class="sizedToGridArea thirdRowAutoColumn"></div>
     <div class="sizedToGridArea autoRowThirdColumn"></div>
 </div>
+<div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks">
+    <div style="grid-column: 1; grid-row: 1"></div>
+    <div style="grid-column: 2; grid-row: 2"></div>
+    <div style="grid-column: 3; grid-row: 3"></div>
+    <div style="grid-column: 4; grid-row: 4"></div>
+</div>
+<div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndexes">
+    <div style="grid-column: -2; grid-row: -2"></div>
+    <div style="grid-column: -3; grid-row: -3"></div>
+    <div style="grid-column: -4; grid-row: -4"></div>
+    <div 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');
 
@@ -62,6 +82,8 @@ testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChi
 testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
 testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px", "20px 40px 40px", "15px 30px 30px");
+testGridTemplatesValues(document.getElementById("gridAutoMultipleTracks"), "25px 50px 100px 25px", "10px 20px 30px 10px");
+testGridTemplatesValues(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");
@@ -76,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(-webkit-min-content, 8vh)";
-element.style.gridAutoRows = "minmax(10vw, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(-webkit-min-content, 48px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(80px, -webkit-min-content)'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.gridAutoColumns = "minmax(-webkit-min-content, -webkit-max-content)";
-element.style.gridAutoRows = "minmax(-webkit-max-content, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
+testAutoValues("18em", "66em", "180px", "660px");
+testAutoValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "minmax(-webkit-min-content, 48px)", "minmax(80px, -webkit-min-content)");
+testAutoValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)");
+testAutoValues("minmax(-webkit-min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)");
 
 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] -webkit-min-content", "auto", "auto");
+testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto", "auto");
 
 function testInherit()
 {
index efc1f67..23af612 100644 (file)
@@ -64,6 +64,12 @@ PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyV
 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(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-rows') is "20px 10px"
 
 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"
@@ -120,24 +126,12 @@ PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-tem
 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(gridWithWrongSlash3, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').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(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').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"
index 2150658..80addbb 100644 (file)
@@ -33,6 +33,9 @@
 #gridWithAutoFlowAndRowsAndColumns {
     grid: column 10px / 20px;
 }
+#gridWithAutoFlowAndMultipleAutoTracks {
+    grid: row 20px 10px / 100px 10%;
+}
 
 /* Bad values. */
 
     grid: column / 10px;
 }
 #gridWithWrongSlash2 {
-    grid: column 10px 20px;
-}
-#gridWithWrongSlash3 {
     grid: 5x / 10px / 20px;
 }
 #gridWithAutoFlowRowAndColumn {
     grid: row column 10px;
 }
-#gridWithoutAutoFlowAndExtraBreath {
-    grid: row 10px / 20px 30px;
-}
 #gridWithAutoFlowString1 {
     grid: row 10px "a";
 }
 <div class="grid" id="gridWithMisplacedNone2"></div>
 <div class="grid" id="gridWithWrongSlash1"></div>
 <div class="grid" id="gridWithWrongSlash2"></div>
-<div class="grid" id="gridWithWrongSlash3"></div>
 <div class="grid" id="gridWithAutoFlowRowAndColumn"></div>
-<div class="grid" id="gridWithoutAutoFlowAndExtraBreath"></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>
 <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.");
     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");
 
     debug("");
     debug("Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')");
     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("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");
index d5a9ba2..5144ffb 100644 (file)
@@ -329,11 +329,11 @@ rect: style.getPropertyCSSValue(font-variant-alternates) : [object CSSPrimitiveV
 rect: style.getPropertyValue(font-variant-east-asian) : normal
 rect: style.getPropertyCSSValue(font-variant-east-asian) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(grid-auto-columns) : auto
-rect: style.getPropertyCSSValue(grid-auto-columns) : [object CSSPrimitiveValue]
+rect: style.getPropertyCSSValue(grid-auto-columns) : [object CSSValueList]
 rect: style.getPropertyValue(grid-auto-flow) : row
 rect: style.getPropertyCSSValue(grid-auto-flow) : [object CSSValueList]
 rect: style.getPropertyValue(grid-auto-rows) : auto
-rect: style.getPropertyCSSValue(grid-auto-rows) : [object CSSPrimitiveValue]
+rect: style.getPropertyCSSValue(grid-auto-rows) : [object CSSValueList]
 rect: style.getPropertyValue(grid-column-end) : auto
 rect: style.getPropertyCSSValue(grid-column-end) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(grid-column-start) : auto
@@ -863,11 +863,11 @@ g: style.getPropertyCSSValue(font-variant-alternates) : [object CSSPrimitiveValu
 g: style.getPropertyValue(font-variant-east-asian) : normal
 g: style.getPropertyCSSValue(font-variant-east-asian) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(grid-auto-columns) : auto
-g: style.getPropertyCSSValue(grid-auto-columns) : [object CSSPrimitiveValue]
+g: style.getPropertyCSSValue(grid-auto-columns) : [object CSSValueList]
 g: style.getPropertyValue(grid-auto-flow) : row
 g: style.getPropertyCSSValue(grid-auto-flow) : [object CSSValueList]
 g: style.getPropertyValue(grid-auto-rows) : auto
-g: style.getPropertyCSSValue(grid-auto-rows) : [object CSSPrimitiveValue]
+g: style.getPropertyCSSValue(grid-auto-rows) : [object CSSValueList]
 g: style.getPropertyValue(grid-column-end) : auto
 g: style.getPropertyCSSValue(grid-column-end) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(grid-column-start) : auto
index 4acb3ee..dbc3f06 100644 (file)
@@ -1,3 +1,37 @@
+2016-07-25  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] grid-auto-flow|row should take a <track-size>+
+        https://bugs.webkit.org/show_bug.cgi?id=160158
+
+        Reviewed by Darin Adler.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForGridTrackSizeList):
+        (WebCore::ComputedStyleExtractor::propertyValue): Return a list of <track-size> instead of
+        just one.
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue): Use the new values of TrackListType;
+        (WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns): Ditto.
+        (WebCore::CSSParser::parseGridTemplateShorthand): Ditto.
+        (WebCore::CSSParser::parseGridShorthand): Ditto.
+        (WebCore::CSSParser::parseGridTrackList): Changed behavior depending on the value of
+        TrackSizeList.
+        * css/CSSParser.h: TrackListType has now 3 different values which determine the behavior of
+        parseGridTrackList.
+        * css/CSSPropertyNames.in: Use a new converter for lists.
+        * css/StyleBuilderConverter.h:
+        (WebCore::StyleBuilderConverter::convertGridTrackSizeList):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::rawGridTrackSize): Resolve the size of the auto track.
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyle::gridAutoColumns): Return a Vector.
+        (WebCore::RenderStyle::gridAutoRows): Ditto.
+        (WebCore::RenderStyle::setGridAutoColumns): Store a Vector.
+        (WebCore::RenderStyle::setGridAutoRows): Ditto.
+        (WebCore::RenderStyle::initialGridAutoColumns): Return a Vector with one auto track.
+        (WebCore::RenderStyle::initialGridAutoRows): Ditto.
+        * rendering/style/StyleGridData.h: Store a Vector of GridTrackSize instead of just one.
+
 2016-07-25  Frederic Wang  <fwang@igalia.com>
 
         MathOperator: Add a mapping from combining to non-combining equivalents
index b14927f..a9f30e3 100644 (file)
@@ -1111,6 +1111,16 @@ static void addValuesForNamedGridLinesAtIndex(OrderedNamedLinesCollector& collec
         list.append(WTFMove(lineNames));
 }
 
+static Ref<CSSValueList> valueForGridTrackSizeList(GridTrackSizingDirection direction, const RenderStyle& style)
+{
+    auto& autoTrackSizes = direction == ForColumns ? style.gridAutoColumns() : style.gridAutoRows();
+
+    auto list = CSSValueList::createSpaceSeparated();
+    for (auto& trackSize : autoTrackSizes)
+        list->append(specifiedValueForGridTrackSize(trackSize, style));
+    return list;
+}
+
 static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, RenderObject* renderer, const RenderStyle& style)
 {
     bool isRowAxis = direction == ForColumns;
@@ -2881,14 +2891,14 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         }
 
         // 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
+        // one for grid-template-{rows|columns} but not for the grid-auto-{rows|columns} as things like
         // grid-auto-columns: 2fr; cannot be resolved to a value in pixels as the '2fr' means very different things
         // depending on the size of the explicit grid or the number of implicit tracks added to the grid. See
         // http://lists.w3.org/Archives/Public/www-style/2013Nov/0014.html
         case CSSPropertyGridAutoColumns:
-            return specifiedValueForGridTrackSize(style->gridAutoColumns(), *style);
+            return valueForGridTrackSizeList(ForColumns, *style);
         case CSSPropertyGridAutoRows:
-            return specifiedValueForGridTrackSize(style->gridAutoRows(), *style);
+            return valueForGridTrackSizeList(ForRows, *style);
 
         case CSSPropertyGridTemplateColumns:
             return valueForGridTrackList(ForColumns, renderer, *style);
index 002f4ec..bf3f561 100644 (file)
@@ -2759,14 +2759,14 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     case CSSPropertyGridAutoRows:
         if (!isCSSGridLayoutEnabled())
             return false;
-        parsedValue = parseGridTrackSize(*m_valueList);
+        parsedValue = parseGridTrackList(GridAuto);
         break;
 
     case CSSPropertyGridTemplateColumns:
     case CSSPropertyGridTemplateRows:
         if (!isCSSGridLayoutEnabled())
             return false;
-        parsedValue = parseGridTrackList();
+        parsedValue = parseGridTrackList(GridTemplate);
         break;
 
     case CSSPropertyGridColumnStart:
@@ -5689,7 +5689,7 @@ bool CSSParser::parseGridTemplateRowsAndAreasAndColumns(bool important)
     RefPtr<CSSValue> templateColumns;
     if (m_valueList->current()) {
         ASSERT(isForwardSlashOperator(*m_valueList->current()));
-        templateColumns = parseGridTemplateColumns(DisallowRepeat);
+        templateColumns = parseGridTemplateColumns(GridTemplateNoRepeat);
         if (!templateColumns)
             return false;
         // The template-columns <track-list> can't be 'none'.
@@ -5733,7 +5733,7 @@ bool CSSParser::parseGridTemplateShorthand(bool important)
     if (firstValueIsNone)
         rowsValue = CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
     else
-        rowsValue = parseGridTrackList();
+        rowsValue = parseGridTrackList(GridTemplate);
 
     if (rowsValue) {
         auto columnsValue = parseGridTemplateColumns();
@@ -5783,13 +5783,13 @@ bool CSSParser::parseGridShorthand(bool important)
     RefPtr<CSSValue> autoRowsValue;
 
     if (m_valueList->current()) {
-        autoRowsValue = parseGridTrackSize(*m_valueList);
+        autoRowsValue = parseGridTrackList(GridAuto);
         if (!autoRowsValue)
             return false;
         if (m_valueList->current()) {
             if (!isForwardSlashOperator(*m_valueList->current()) || !m_valueList->next())
                 return false;
-            autoColumnsValue = parseGridTrackSize(*m_valueList);
+            autoColumnsValue = parseGridTrackList(GridAuto);
             if (!autoColumnsValue)
                 return false;
         }
@@ -5931,6 +5931,8 @@ RefPtr<CSSValue> CSSParser::parseGridTrackList(TrackListType trackListType)
 
     CSSParserValue* value = m_valueList->current();
     if (value->id == CSSValueNone) {
+        if (trackListType == GridAuto)
+            return nullptr;
         m_valueList->next();
         return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
     }
@@ -5938,17 +5940,22 @@ RefPtr<CSSValue> CSSParser::parseGridTrackList(TrackListType trackListType)
     auto values = CSSValueList::createSpaceSeparated();
     // Handle leading  <custom-ident>*.
     value = m_valueList->current();
-    if (value && value->unit == CSSParserValue::ValueList)
+    bool allowGridLineNames = trackListType != GridAuto;
+    if (value && value->unit == CSSParserValue::ValueList) {
+        if (!allowGridLineNames)
+            return nullptr;
         parseGridLineNames(*m_valueList, values);
+    }
 
     bool seenTrackSizeOrRepeatFunction = false;
     bool seenAutoRepeat = false;
     bool allTracksAreFixedSized = true;
+    bool repeatAllowed = trackListType == GridTemplate;
     while (CSSParserValue* currentValue = m_valueList->current()) {
         if (isForwardSlashOperator(*currentValue))
             break;
         if (currentValue->unit == CSSParserValue::Function && equalLettersIgnoringASCIICase(currentValue->function->name, "repeat(")) {
-            if (trackListType == DisallowRepeat)
+            if (!repeatAllowed)
                 return nullptr;
             bool isAutoRepeat;
             if (!parseGridTrackRepeatFunction(values, isAutoRepeat, allTracksAreFixedSized))
@@ -5971,8 +5978,11 @@ RefPtr<CSSValue> CSSParser::parseGridTrackList(TrackListType trackListType)
 
         // This will handle the trailing <custom-ident>* in the grammar.
         value = m_valueList->current();
-        if (value && value->unit == CSSParserValue::ValueList)
+        if (value && value->unit == CSSParserValue::ValueList) {
+            if (!allowGridLineNames)
+                return nullptr;
             parseGridLineNames(*m_valueList, values);
+        }
     }
 
     if (!seenTrackSizeOrRepeatFunction)
index 9126f27..5726d29 100644 (file)
@@ -235,15 +235,15 @@ public:
     bool isCSSGridLayoutEnabled() const;
     RefPtr<CSSValue> parseGridPosition();
     bool parseGridItemPositionShorthand(CSSPropertyID, bool important);
-    enum TrackListType { AllowRepeat, DisallowRepeat };
-    RefPtr<CSSValue> parseGridTemplateColumns(TrackListType = AllowRepeat);
+    enum TrackListType { GridTemplate, GridTemplateNoRepeat, GridAuto };
+    RefPtr<CSSValue> parseGridTemplateColumns(TrackListType = GridTemplate);
     bool parseGridTemplateRowsAndAreasAndColumns(bool important);
     bool parseGridTemplateShorthand(bool important);
     bool parseGridShorthand(bool important);
     bool parseGridAreaShorthand(bool important);
     bool parseGridGapShorthand(bool important);
     bool parseSingleGridAreaLonghand(RefPtr<CSSValue>&);
-    RefPtr<CSSValue> parseGridTrackList(TrackListType = AllowRepeat);
+    RefPtr<CSSValue> parseGridTrackList(TrackListType);
     bool parseGridTrackRepeatFunction(CSSValueList&, bool& isAutoRepeat, bool& allTracksAreFixedSized);
     RefPtr<CSSValue> parseGridTrackSize(CSSParserValueList& inputList);
     RefPtr<CSSPrimitiveValue> parseGridBreadth(CSSParserValue&);
index 5ae0735..8ee0e7c 100644 (file)
@@ -498,8 +498,8 @@ justify-items [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentDat
 #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
 grid [Longhands=grid-template-rows|grid-template-columns|grid-template-areas|grid-auto-flow|grid-auto-rows|grid-auto-columns|grid-column-gap|grid-row-gap]
 grid-area [Longhands=grid-row-start|grid-column-start|grid-row-end|grid-column-end]
-grid-auto-columns [Converter=GridTrackSize]
-grid-auto-rows [Converter=GridTrackSize]
+grid-auto-columns [Converter=GridTrackSizeList]
+grid-auto-rows [Converter=GridTrackSizeList]
 grid-column-end [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnEnd]
 grid-column-gap [Initial=initialZeroLength, Converter=Length]
 grid-column-start [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnStart]
index 285bfee..ef4fbbd 100644 (file)
@@ -101,6 +101,7 @@ public:
 #endif
 #if ENABLE(CSS_GRID_LAYOUT)
     static GridTrackSize convertGridTrackSize(StyleResolver&, CSSValue&);
+    static Vector<GridTrackSize> convertGridTrackSizeList(StyleResolver&, CSSValue&);
     static Optional<GridPosition> convertGridPosition(StyleResolver&, CSSValue&);
     static GridAutoFlow convertGridAutoFlow(StyleResolver&, CSSValue&);
 #endif // ENABLE(CSS_GRID_LAYOUT)
@@ -992,6 +993,20 @@ inline void StyleBuilderConverter::createImplicitNamedGridLinesFromGridArea(cons
     }
 }
 
+inline Vector<GridTrackSize> StyleBuilderConverter::convertGridTrackSizeList(StyleResolver& styleResolver, CSSValue& value)
+{
+    ASSERT(value.isValueList());
+    auto& valueList = downcast<CSSValueList>(value);
+    Vector<GridTrackSize> trackSizes;
+    trackSizes.reserveInitialCapacity(valueList.length());
+    for (auto& currValue : valueList) {
+        ASSERT(!currValue->isGridLineNamesValue());
+        ASSERT(!currValue->isGridAutoRepeatValue());
+        trackSizes.uncheckedAppend(convertGridTrackSize(styleResolver, currValue));
+    }
+    return trackSizes;
+}
+
 inline GridTrackSize StyleBuilderConverter::convertGridTrackSize(StyleResolver& styleResolver, CSSValue& value)
 {
     return createGridTrackSize(value, styleResolver);
index aa558e0..b838c2c 100644 (file)
@@ -875,7 +875,7 @@ const GridTrackSize& RenderGrid::rawGridTrackSize(GridTrackSizingDirection direc
     bool isRowAxis = direction == ForColumns;
     auto& trackStyles = isRowAxis ? style().gridColumns() : style().gridRows();
     auto& autoRepeatTrackStyles = isRowAxis ? style().gridAutoRepeatColumns() : style().gridAutoRepeatRows();
-    auto& autoTrackSize = isRowAxis ? style().gridAutoColumns() : style().gridAutoRows();
+    auto& autoTrackStyles = isRowAxis ? style().gridAutoColumns() : style().gridAutoRows();
     unsigned insertionPoint = isRowAxis ? style().gridAutoRepeatColumnsInsertionPoint() : style().gridAutoRepeatRowsInsertionPoint();
     unsigned repetitions = autoRepeatCountForDirection(direction);
 
@@ -885,12 +885,17 @@ const GridTrackSize& RenderGrid::rawGridTrackSize(GridTrackSizingDirection direc
     unsigned explicitTracksCount = trackStyles.size() + repetitions;
 
     int untranslatedIndexAsInt = translatedIndex + (isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
-    if (untranslatedIndexAsInt < 0)
-        return autoTrackSize;
+    unsigned autoTrackStylesSize = autoTrackStyles.size();
+    if (untranslatedIndexAsInt < 0) {
+        int index = untranslatedIndexAsInt % static_cast<int>(autoTrackStylesSize);
+        // We need to traspose the index because the first negative implicit line will get the last defined auto track and so on.
+        index += index ? autoTrackStylesSize : 0;
+        return autoTrackStyles[index];
+    }
 
     unsigned untranslatedIndex = static_cast<unsigned>(untranslatedIndexAsInt);
     if (untranslatedIndex >= explicitTracksCount)
-        return autoTrackSize;
+        return autoTrackStyles[(untranslatedIndex - explicitTracksCount) % autoTrackStylesSize];
 
     if (!repetitions || untranslatedIndex < insertionPoint)
         return trackStyles[untranslatedIndex];
index 0a6917e..dc1aade 100644 (file)
@@ -979,8 +979,8 @@ public:
     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); }
-    const GridTrackSize& gridAutoColumns() const { return rareNonInheritedData->m_grid->m_gridAutoColumns; }
-    const GridTrackSize& gridAutoRows() const { return rareNonInheritedData->m_grid->m_gridAutoRows; }
+    const Vector<GridTrackSize>& gridAutoColumns() const { return rareNonInheritedData->m_grid->m_gridAutoColumns; }
+    const Vector<GridTrackSize>& gridAutoRows() const { return rareNonInheritedData->m_grid->m_gridAutoRows; }
     const Length& gridColumnGap() const { return rareNonInheritedData->m_grid->m_gridColumnGap; }
     const Length& gridRowGap() const { return rareNonInheritedData->m_grid->m_gridRowGap; }
 
@@ -1560,8 +1560,8 @@ public:
     void setJustifySelfPosition(ItemPosition position) { rareNonInheritedData.access()->m_justifySelf.setPosition(position); }
     void setJustifySelfOverflow(OverflowAlignment overflow) { rareNonInheritedData.access()->m_justifySelf.setOverflow(overflow); }
 #if ENABLE(CSS_GRID_LAYOUT)
-    void setGridAutoColumns(const GridTrackSize& length) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridAutoColumns, length); }
-    void setGridAutoRows(const GridTrackSize& length) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridAutoRows, length); }
+    void setGridAutoColumns(const Vector<GridTrackSize>& trackSizeList) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridAutoColumns, trackSizeList); }
+    void setGridAutoRows(const Vector<GridTrackSize>& trackSizeList) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridAutoRows, trackSizeList); }
     void setGridColumns(const Vector<GridTrackSize>& lengths) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridColumns, lengths); }
     void setGridRows(const Vector<GridTrackSize>& lengths) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridRows, lengths); }
     void setGridAutoRepeatColumns(const Vector<GridTrackSize>& lengths) { SET_NESTED_VAR(rareNonInheritedData, m_grid, m_gridAutoRepeatColumns, lengths); }
@@ -2096,8 +2096,8 @@ public:
 
     static GridAutoFlow initialGridAutoFlow() { return AutoFlowRow; }
 
-    static GridTrackSize initialGridAutoColumns() { return GridTrackSize(Length(Auto)); }
-    static GridTrackSize initialGridAutoRows() { return GridTrackSize(Length(Auto)); }
+    static Vector<GridTrackSize> initialGridAutoColumns() { return { GridTrackSize(Length(Auto)) }; }
+    static Vector<GridTrackSize> initialGridAutoRows() { return { GridTrackSize(Length(Auto)) }; }
 
     static NamedGridAreaMap initialNamedGridArea() { return NamedGridAreaMap(); }
     static size_t initialNamedGridAreaCount() { return 0; }
index 7e1bd8c..538477a 100644 (file)
@@ -85,8 +85,8 @@ public:
 
     unsigned m_gridAutoFlow : GridAutoFlowBits;
 
-    GridTrackSize m_gridAutoRows;
-    GridTrackSize m_gridAutoColumns;
+    Vector<GridTrackSize> m_gridAutoRows;
+    Vector<GridTrackSize> m_gridAutoColumns;
 
     NamedGridAreaMap m_namedGridArea;
     // Because m_namedGridArea doesn't store the unnamed grid areas, we need to keep track