[CSSGridLayout] Resolved value of grid-template-* to include every track

Section 5.1.5 of the specs clearly states that the resolved value
for grid-template-{columns|rows} must include every listed track, whether
explicitly or implicitly created. We were only listing the explicit grid
tracks.

Review URL: https://codereview.chromium.org/548263002

git-svn-id: svn://svn.chromium.org/blink/trunk@181579 bbb929c8-8fbe-4397-9dbb-9b2b20218538

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

@@ -4,12 +4,30 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting grid-auto-columns and grid-auto-rows set through CSS
-PASS getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-rows') is '30px'
-PASS getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-columns') is '50px'
-PASS getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-rows') is 'minmax(10%, 15px)'
-PASS getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-columns') is 'minmax(30%, 100px)'
-PASS getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-rows') is 'min-content'
-PASS getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns') is 'max-content'
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-columns') is "50px"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-rows') is "minmax(10%, 15px)"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-columns') is "minmax(30%, 100px)"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-rows') is "min-content"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns') is "max-content"
+
+Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "50px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "50px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
+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"
+
+Test that grid-template-* definitions are not affected by grid-auto-* definitions
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-template-rows') is "none"
 
 Test the initial value
 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'

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

@@ -17,28 +17,49 @@
     grid-auto-rows: min-content;
     grid-auto-columns: max-content;
 }
+
+.gridAutoFixedFixedWithFixedFixed {
+    grid-auto-rows: 30px;
+    grid-auto-columns: 40px;
+    grid-template-rows: 15px;
+    grid-template-columns: 20px;
+}
+
 </style>
 <script src="../../resources/js-test.js"></script>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
 </head>
 <body>
 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div>
 <div class="grid gridAutoMinMax" id="gridAutoMinMax"></div>
 <div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div>
+<div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren">
+    <div class="sizedToGridArea firstRowFirstColumn"></div>
+</div>
+<div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFixedFixedWithChildren">
+    <div class="sizedToGridArea thirdRowAutoColumn"></div>
+    <div class="sizedToGridArea autoRowThirdColumn"></div>
+</div>
 <script>
 description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
 
 debug("Test getting grid-auto-columns and grid-auto-rows set through CSS");
-var gridAutoFixedFixed = document.getElementById("gridAutoFixedFixed");
-shouldBe("getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-rows')", "'30px'");
-shouldBe("getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-columns')", "'50px'");
+testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px");
+testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
+testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "min-content", "max-content");
 
-var gridAutoMinMax = document.getElementById("gridAutoMinMax");
-shouldBe("getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-rows')", "'minmax(10%, 15px)'");
-shouldBe("getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-columns')", "'minmax(30%, 100px)'");
+debug("");
+debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
+testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "30px", "50px");
+testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
+testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
+testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px", "20px 40px 40px", "15px 30px 30px");
 
-var gridAutoMinMaxContent = document.getElementById("gridAutoMinMaxContent");
-shouldBe("getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-rows')", "'min-content'");
-shouldBe("getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns')", "'max-content'");
+debug("");
+debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions");
+testGridDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "none", "none");
+testGridDefinitionsValues(document.getElementById("gridAutoMinMax"), "none", "none");
+testGridDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "none", "none");
 
 debug("");
 debug("Test the initial value");

third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js

@@ -61,3 +61,11 @@ function checkGridAutoFlowSetJSValue(newValue, expectedStyleValue, expectedCompu
     shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'" + expectedComputedStyleValue + "'");
     document.body.removeChild(element);
 }
+
+function testGridAutoDefinitionsValues(element, computedRowValue, computedColumnValue)
+{
+    window.element = element;
+    var elementID = element.id || "element";
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-rows')", computedRowValue);
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-columns')", computedColumnValue);
+}

third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp

@@ -887,21 +887,30 @@ static PassRefPtrWillBeRawPtr<CSSValue> valueForGridTrackList(GridTrackSizingDir
 {
     const Vector<GridTrackSize>& trackSizes = direction == ForColumns ? style.gridTemplateColumns() : style.gridTemplateRows();
     const OrderedNamedGridLines& orderedNamedGridLines = direction == ForColumns ? style.orderedNamedGridColumnLines() : style.orderedNamedGridRowLines();
+    bool isRenderGrid = renderer && renderer->isRenderGrid();
+
+    // Handle the 'none' case.
+    bool trackListIsEmpty = trackSizes.isEmpty();
+    if (isRenderGrid && trackListIsEmpty) {
+        // For grids we should consider every listed track, whether implicitly or explicitly created. If we don't have
+        // any explicit track and there are no children then there are no implicit tracks. We cannot simply check the
+        // number of rows/columns in our internal grid representation because it's always at least 1x1 (see r143331).
+        trackListIsEmpty = !toRenderBlock(renderer)->firstChild();
+    }
 
-    // Handle the 'none' case here.
-    if (!trackSizes.size()) {
+    if (trackListIsEmpty) {
         ASSERT(orderedNamedGridLines.isEmpty());
         return cssValuePool().createIdentifierValue(CSSValueNone);
     }
 
     RefPtrWillBeRawPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
-    if (renderer && renderer->isRenderGrid()) {
+    if (isRenderGrid) {
         const Vector<LayoutUnit>& trackPositions = direction == ForColumns ? toRenderGrid(renderer)->columnPositions() : toRenderGrid(renderer)->rowPositions();
         // There are at least #tracks + 1 grid lines (trackPositions). Apart from that, the grid container can generate implicit grid tracks,
         // so we'll have more trackPositions than trackSizes as the latter only contain the explicit grid.
         ASSERT(trackPositions.size() - 1 >= trackSizes.size());
 
-        for (size_t i = 0; i < trackSizes.size(); ++i) {
+        for (size_t i = 0; i < trackPositions.size() - 1; ++i) {
             addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, *list);
             list->append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
         }