Diff
Modified: trunk/LayoutTests/ChangeLog (199980 => 199981)
--- trunk/LayoutTests/ChangeLog 2016-04-25 09:46:31 UTC (rev 199980)
+++ trunk/LayoutTests/ChangeLog 2016-04-25 09:54:48 UTC (rev 199981)
@@ -1,3 +1,13 @@
+2016-04-25 Manuel Rego Casasnovas <[email protected]>
+
+ [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 <[email protected]>
Refactor RenderMathMLMenclose.
Added: trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt (0 => 199981)
--- trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt 2016-04-25 09:54:48 UTC (rev 199981)
@@ -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
+
Added: trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html (0 => 199981)
--- trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html 2016-04-25 09:54:48 UTC (rev 199981)
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<link href="" rel="stylesheet">
+<link href="" 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=""
+<script src=""
+<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>
Modified: trunk/Source/WebCore/ChangeLog (199980 => 199981)
--- trunk/Source/WebCore/ChangeLog 2016-04-25 09:46:31 UTC (rev 199980)
+++ trunk/Source/WebCore/ChangeLog 2016-04-25 09:54:48 UTC (rev 199981)
@@ -1,3 +1,24 @@
+2016-04-25 Manuel Rego Casasnovas <[email protected]>
+
+ [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 <[email protected]>
Refactor RenderMathMLMenclose.
Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (199980 => 199981)
--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-04-25 09:46:31 UTC (rev 199980)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-04-25 09:54:48 UTC (rev 199981)
@@ -1070,18 +1070,20 @@
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;
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (199980 => 199981)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-25 09:46:31 UTC (rev 199980)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-25 09:54:48 UTC (rev 199981)
@@ -428,6 +428,11 @@
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 @@
// 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
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (199980 => 199981)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2016-04-25 09:46:31 UTC (rev 199980)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2016-04-25 09:54:48 UTC (rev 199981)
@@ -61,6 +61,7 @@
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;
