[css-grid] Fix grid-template-columns|rows computed style with content…

… alignment

https://bugs.webkit.org/show_bug.cgi?id=156793

Reviewed by Darin Adler.

Source/WebCore:

Computed style of grid-template-columns and grid-template-rows properties
was including the distribution offset because of content alignment.
We should subtract that offset, like we do for the case of gaps,
when we're calculating the computed style.

Test: fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::offsetBetweenTracks):
(WebCore::RenderGrid::populateGridPositions): Deleted FIXME.
* rendering/RenderGrid.h:

LayoutTests:

* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt: Added.
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html: Added.


Canonical link: https://commits.webkit.org/175082@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@199981 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,13 @@
+2016-04-25  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Fix grid-template-columns|rows computed style with content alignment
+        https://bugs.webkit.org/show_bug.cgi?id=156793
+
+        Reviewed by Darin Adler.
+
+        * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt: Added.
+        * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html: Added.
+
 2016-04-25  Frederic Wang  <fwang@igalia.com>
 
         Refactor RenderMathMLMenclose.

LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt

@@ -0,0 +1,37 @@
+Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+.grid {
+    -webkit-grid-template-columns: 300px 200px 100px;
+    -webkit-grid-template-rows: 150px 100px 50px;
+    width: 800px;
+    height: 500px;
+}
+
+.gaps {
+    -webkit-grid-gap: 10px 20px;
+}
+</style>
+
+<div class="grid contentStart" id="gridContentStart"></div>
+<div class="grid contentCenter" id="gridContentCenter"></div>
+<div class="grid contentEnd" id="gridContentEnd"></div>
+<div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div>
+<div class="grid contentSpaceAround" id="gridContentSpaceAround"></div>
+<div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div>
+<div class="grid contentStretch" id="gridContentStretch"></div>
+
+<div class="grid gaps contentStart" id="gridGapsContentStart"></div>
+<div class="grid gaps contentCenter" id="gridGapsContentCenter"></div>
+<div class="grid gaps contentEnd" id="gridGapsContentEnd"></div>
+<div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></div>
+<div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div>
+<div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
+<div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>
+
+<script src="../../resources/js-test.js"></script>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script>
+    description("Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.");
+
+    testGridTemplatesValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridContentStretch"), "300px 200px 100px", "150px 100px 50px");
+
+    testGridTemplatesValues(document.getElementById("gridGapsContentStart"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridGapsContentEnd"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridGapsContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
+    testGridTemplatesValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");
+</script>

Source/WebCore/ChangeLog

@@ -1,3 +1,24 @@
+2016-04-25  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Fix grid-template-columns|rows computed style with content alignment
+        https://bugs.webkit.org/show_bug.cgi?id=156793
+
+        Reviewed by Darin Adler.
+
+        Computed style of grid-template-columns and grid-template-rows properties
+        was including the distribution offset because of content alignment.
+        We should subtract that offset, like we do for the case of gaps,
+        when we're calculating the computed style.
+
+        Test: fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForGridTrackList):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::offsetBetweenTracks):
+        (WebCore::RenderGrid::populateGridPositions): Deleted FIXME.
+        * rendering/RenderGrid.h:
+
 2016-04-25  Frederic Wang  <fwang@igalia.com>
 
         Refactor RenderMathMLMenclose.

Source/WebCore/css/CSSComputedStyleDeclaration.cpp

@@ -1070,18 +1070,20 @@ static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, R
     auto list = CSSValueList::createSpaceSeparated();
     unsigned insertionIndex;
     if (isRenderGrid) {
-        const Vector<LayoutUnit>& trackPositions = direction == ForColumns ? downcast<RenderGrid>(*renderer).columnPositions() : downcast<RenderGrid>(*renderer).rowPositions();
+        auto& grid = downcast<RenderGrid>(*renderer);
+        const auto& trackPositions = direction == ForColumns ? grid.columnPositions() : grid.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());
 
         unsigned i = 0;
-        LayoutUnit gutterSize = downcast<RenderGrid>(*renderer).guttersSize(direction, 2);
+        LayoutUnit gutterSize = grid.guttersSize(direction, 2);
+        LayoutUnit offsetBetweenTracks = grid.offsetBetweenTracks(direction);
         for (; i < trackPositions.size() - 2; ++i) {
             addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
-            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i] - gutterSize, style));
+            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i] - gutterSize - offsetBetweenTracks, style));
         }
-        // Last track line does not have any gutter.
+        // Last track line does not have any gutter or distribution offset.
         addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
         list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
         insertionIndex = trackPositions.size() - 1;

Source/WebCore/rendering/RenderGrid.cpp

@@ -428,6 +428,11 @@ LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, size_t sp
     return valueForLength(trackGap, 0) * (span - 1);
 }
 
+LayoutUnit RenderGrid::offsetBetweenTracks(GridTrackSizingDirection direction) const
+{
+    return direction == ForColumns ? m_offsetBetweenColumns : m_offsetBetweenRows;
+}
+
 void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
 {
     bool wasPopulated = gridWasPopulated();
@@ -1646,8 +1651,6 @@ void RenderGrid::populateGridPositions(GridSizingData& sizingData)
     // Since we add alignment offsets and track gutters, grid lines are not always adjacent. Hence we will have to
     // assume from now on that we just store positions of the initial grid lines of each track,
     // except the last one, which is the only one considered as a final grid line of a track.
-    // FIXME: This will affect the computed style value of grid tracks size, since we are
-    // using these positions to compute them.
 
     // The grid container's frame elements (border, padding and <content-position> offset) are sensible to the
     // inline-axis flow direction. However, column lines positions are 'direction' unaware. This simplification

Source/WebCore/rendering/RenderGrid.h

@@ -61,6 +61,7 @@ class RenderGrid final : public RenderBlock {
     const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
 
     LayoutUnit guttersSize(GridTrackSizingDirection, size_t span) const;
+    LayoutUnit offsetBetweenTracks(GridTrackSizingDirection) const;
 
 private:
     const char* renderName() const override;