Source/WebCore/ChangeLog

 12017-06-01 Javier Fernandez <jfernandez@igalia.com>
 2
 3 [css-grid] Margin wrong applied when stretching an orthogonal item in fixed size track
 4 https://bugs.webkit.org/show_bug.cgi?id=172590
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 We need to consider orthogonality when using the item's logical margin to
 9 compute the available space for stretching.
 10
 11 The issue this CL fixes is only reproducible when the grid layout logic
 12 is executed several times, since probably the item doesn't need to be
 13 laid out again. In such cases, we just get the cached logical margins
 14 but we were not taking orthogonality into account.
 15
 16 Test: fast/css-grid-layout/grid-item-stretching-must-not-depend-on-previous-layouts.html
 17
 18 * rendering/RenderGrid.cpp:
 19 (WebCore::RenderGrid::layoutBlock):
 20 (WebCore::RenderGrid::marginLogicalSizeForChild):
 21 (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
 22 * rendering/RenderGrid.h:
 23
1242017-06-01 Konstantin Tokarev <annulen@yandex.ru>
225
326 Get rid of more HIGH_DPI_CANVAS leftovers

Source/WebCore/rendering/RenderGrid.cpp

@@static LayoutUnit computeOverflowAlignmentOffset(OverflowAlignment overflow, Lay
11351135 return 0;
11361136}
11371137
1138 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
1139 LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox& child) const
 1138LayoutUnit RenderGrid::marginLogicalSizeForChild(GridTrackSizingDirection direction, const RenderBox& child) const
11401139{
1141  return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent();
 1140 return flowAwareDirectionForChild(child, direction) == ForColumns ? child.marginLogicalWidth() : child.marginLogicalHeight();
11421141}
11431142
11441143LayoutUnit RenderGrid::computeMarginLogicalSizeForChild(GridTrackSizingDirection direction, const RenderBox& child) const

@@LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUni
11611160 // Because we want to avoid multiple layouts, stretching logic might be performed before
11621161 // children are laid out, so we can't use the child cached values. Hence, we need to
11631162 // compute margins in order to determine the available height before stretching.
1164  return gridAreaBreadthForChild - (child.needsLayout() ? computeMarginLogicalSizeForChild(ForRows, child) : marginLogicalHeightForChild(child));
 1163 GridTrackSizingDirection childBlockFlowDirection = flowAwareDirectionForChild(child, ForRows);
 1164 return gridAreaBreadthForChild - (child.needsLayout() ? computeMarginLogicalSizeForChild(childBlockFlowDirection, child) : marginLogicalSizeForChild(childBlockFlowDirection, child));
11651165}
11661166
11671167StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child) const

Source/WebCore/rendering/RenderGrid.h

@@private:
130130 void applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection);
131131
132132 void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
133  LayoutUnit marginLogicalHeightForChild(const RenderBox&) const;
 133 LayoutUnit marginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
134134 LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
135135 LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
136136 StyleSelfAlignmentData justifySelfForChild(const RenderBox&) const;

LayoutTests/ChangeLog

 12017-06-01 Javier Fernandez <jfernandez@igalia.com>
 2
 3 [css-grid] Margin wrong applied when stretching an orthogonal item in fixed size track
 4 https://bugs.webkit.org/show_bug.cgi?id=172590
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 * TestExpectations: 2 tests pass now but 3 more fail because of bug #172836
 9 * fast/css-grid-layout/grid-item-stretching-must-not-depend-on-previous-layouts-expected.html: Added.
 10 * fast/css-grid-layout/grid-item-stretching-must-not-depend-on-previous-layouts.html: Added.
 11
1122017-06-01 Yusuke Suzuki <utatane.tea@gmail.com>
213
314 Unreviewed, rebaseline test results according to the error message change

LayoutTests/imported/w3c/ChangeLog

112017-06-01 Javier Fernandez <jfernandez@igalia.com>
22
 3 [css-grid] Margin wrong applied when stretching an orthogonal item in fixed size track
 4 https://bugs.webkit.org/show_bug.cgi?id=172590
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 All the test cases of these tests pass with this change, so updating their expectations accordingly.
 9
 10 * web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-006-expected.txt:
 11 * web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-006-expected.txt:
 12 * web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-006-expected.txt:
 13
 142017-06-01 Javier Fernandez <jfernandez@igalia.com>
 15
316 [css-grid] Update W3C web platform tests for the CSS Grid Layout feature
417 https://bugs.webkit.org/show_bug.cgi?id=172783
518

LayoutTests/TestExpectations

@@webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFa
284284# grid layout tests
285285webkit.org/b/165062 fast/css-grid-layout/grid-baseline.html [ ImageOnlyFailure ]
286286webkit.org/b/165062 fast/css-grid-layout/grid-baseline-margins.html [ ImageOnlyFailure ]
287 webkit.org/b/172590 imported/w3c/web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-013.html [ ImageOnlyFailure ]
288 webkit.org/b/172590 imported/w3c/web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-017.html [ ImageOnlyFailure ]
289287webkit.org/b/149891 imported/w3c/web-platform-tests/css/css-grid-1/grid-layout-properties.html [ Failure ]
290288webkit.org/b/169271 imported/w3c/web-platform-tests/css/css-grid-1/grid-items/grid-items-sizing-alignment-001.html [ ImageOnlyFailure ]
 289webkit.org/b/172836 imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-014.html [ Failure ]
 290webkit.org/b/172836 imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-014.html [ Failure ]
 291webkit.org/b/172836 imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-014.html [ Failure ]
291292
292293# selectors4
293294webkit.org/b/64861 imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html [ ImageOnlyFailure ]

LayoutTests/fast/css-grid-layout/grid-item-stretching-must-not-depend-on-previous-layouts-expected.html

 1<!DOCTYPE html>
 2<style>
 3body { overflow: hidden; } /* Ensure there wont be scrollbar to avoid the extra layout. */
 4.grid {
 5 display: inline-grid;
 6 border: solid thick;
 7 grid: 100px / 100px;
 8 align-items: start;
 9}
 10.item {
 11 background: magenta;
 12 writing-mode: vertical-lr;
 13 margin-right: 25px;
 14}
 15</style>
 16<p>Check whether stretching logic is not affected by multiple layouts becuase of the grid item's override height.<br>The test passes if there is a margin-right of 25px.</p>
 17<div class="grid">
 18 <div class="item">item</div>
 19</div>

LayoutTests/fast/css-grid-layout/grid-item-stretching-must-not-depend-on-previous-layouts.html

 1<!DOCTYPE html>
 2<link rel="match" href="grid-item-stretching-must-not-depend-on-previous-layouts-expected.html">
 3<style>
 4.grid {
 5 display: inline-grid;
 6 border: solid thick;
 7 grid: 100px / 100px;
 8 align-items: start;
 9}
 10.item {
 11 background: magenta;
 12 writing-mode: vertical-lr;
 13 margin-right: 25px;
 14}
 15</style>
 16<p>Check whether stretching logic is not affected by multiple layouts becuase of the grid item's override height.<br>The test passes if there is a margin-right of 25px.</p>
 17<div class="grid">
 18 <div class="item">item</div>
 19</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-006-expected.txt

@@X XXX
99X
1010XX XXX
1111
12 FAIL .grid 1 assert_equals:
13 <div class="grid">
14  <div data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
15  <div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
16  <div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
17  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
18 </div>
19 width expected 90 but got 100
 12PASS .grid 1
2013

LayoutTests/imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-lr-006-expected.txt

@@X XXX
99X
1010XX XXX
1111
12 FAIL .grid 1 assert_equals:
13 <div class="grid">
14  <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="90" class="firstRowFirstColumn">X XX X</div>
15  <div data-offset-x="0" data-offset-y="100" data-expected-width="130" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
16  <div data-offset-x="150" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
17  <div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
18 </div>
19 height expected 90 but got 100
 12PASS .grid 1
2013

LayoutTests/imported/w3c/web-platform-tests/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-006-expected.txt

@@X XXX
99X
1010XX XXX
1111
12 FAIL .grid 1 assert_equals:
13 <div class="grid">
14  <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="90" class="firstRowFirstColumn">X XX X</div>
15  <div data-offset-x="100" data-offset-y="100" data-expected-width="130" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
16  <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
17  <div data-offset-x="0" data-offset-y="100" data-expected-width="90" data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
18 </div>
19 height expected 90 but got 100
 12PASS .grid 1
2013