Title: [238551] trunk
- Revision
- 238551
- Author
- [email protected]
- Date
- 2018-11-27 05:52:57 -0800 (Tue, 27 Nov 2018)
Log Message
[css-grid] align-self center and position sticky don't work together
https://bugs.webkit.org/show_bug.cgi?id=191963
Reviewed by Manuel Rego Casasnovas.
LayoutTests/imported/w3c:
This change makes several cases of the following tests to pass now.
* web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt:
Source/WebCore:
This is a fix for a regression introduced in r515391, where we landed
the implementation of alignment for positioned objects in a Grid Layout
container.
We assumed that items with non-static positions shouldn't honor the
CSS Box Alignment properties. This is only true for out-of-flow items,
absolute or fixed positioned elements. However, sticky positioned
elements are treated as relative positioned items, but they indeed use
non-static position to define their behavior.
No new tests, this change is covered by current tests and make several cases to pass now.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::columnAxisPositionForChild const):
(WebCore::RenderGrid::rowAxisPositionForChild const):
Modified Paths
Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (238550 => 238551)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1,3 +1,17 @@
+2018-11-27 Javier Fernandez <[email protected]>
+
+ [css-grid] align-self center and position sticky don't work together
+ https://bugs.webkit.org/show_bug.cgi?id=191963
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ This change makes several cases of the following tests to pass now.
+
+ * web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt:
+
2018-11-26 Javier Fernandez <[email protected]>
[css-grid] absolute positioned child is sized wrongly when using auto-fit, generating spurious collapsed tracks
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt (238550 => 238551)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001-expected.txt 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1,38 +1,4 @@
-FAIL .grid 1 assert_equals:
-<div class="container">
- <div style="height:30px"></div>
- <div class="grid">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
- <div class="item4"></div>
- </div>
- <div class="grid scroll">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
- <div class="item4"></div>
- </div>
- <div style="height:2000px"></div>
-</div>
-offsetTop expected 140 but got 100
-FAIL .grid 2 assert_equals:
-<div class="container">
- <div style="height:30px"></div>
- <div class="grid">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
- <div class="item4"></div>
- </div>
- <div class="grid scroll">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
- <div class="item4"></div>
- </div>
- <div style="height:2000px"></div>
-</div>
-offsetTop expected 140 but got 100
+PASS .grid 1
+PASS .grid 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt (238550 => 238551)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002-expected.txt 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1,38 +1,4 @@
-FAIL .grid 1 assert_equals:
-<div class="container">
- <div style="height:30px"></div>
- <div class="grid">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="10"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
- <div class="item4"></div>
- </div>
- <div class="grid scroll">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="40"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="290"></div>
- <div class="item4"></div>
- </div>
- <div style="height:2000px"></div>
-</div>
-offsetTop expected 140 but got 100
-FAIL .grid 2 assert_equals:
-<div class="container">
- <div style="height:30px"></div>
- <div class="grid">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="10"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
- <div class="item4"></div>
- </div>
- <div class="grid scroll">
- <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="40"></div>
- <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
- <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="290"></div>
- <div class="item4"></div>
- </div>
- <div style="height:2000px"></div>
-</div>
-offsetTop expected 140 but got 100
+PASS .grid 1
+PASS .grid 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt (238550 => 238551)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001-expected.txt 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1,40 +1,4 @@
-FAIL .grid 1 assert_equals:
-<div class="container">
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid">
- <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid scroll">
- <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 2000px; height: 10px;"></div>
-</div>
-offsetLeft expected 140 but got 100
-FAIL .grid 2 assert_equals:
-<div class="container">
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid">
- <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid scroll">
- <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 2000px; height: 10px;"></div>
-</div>
-offsetLeft expected 140 but got 100
+PASS .grid 1
+PASS .grid 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt (238550 => 238551)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002-expected.txt 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1,40 +1,4 @@
-FAIL .grid 1 assert_equals:
-<div class="container">
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid">
- <div class="item1 sticky justifySelfStart" data-offset-x="10" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid scroll">
- <div class="item1 sticky justifySelfStart" data-offset-x="40" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="290" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 2000px; height: 10px;"></div>
-</div>
-offsetLeft expected 140 but got 100
-FAIL .grid 2 assert_equals:
-<div class="container">
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid">
- <div class="item1 sticky justifySelfStart" data-offset-x="10" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 30px; float:left; height: 10px;"></div>
- <div class="grid scroll">
- <div class="item1 sticky justifySelfStart" data-offset-x="40" data-offset-y="0"></div>
- <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
- <div class="item3 sticky justifySelfEnd" data-offset-x="290" data-offset-y="150"></div>
- <div class="item4"></div>
- </div>
- <div style="width: 2000px; height: 10px;"></div>
-</div>
-offsetLeft expected 140 but got 100
+PASS .grid 1
+PASS .grid 2
Modified: trunk/Source/WebCore/ChangeLog (238550 => 238551)
--- trunk/Source/WebCore/ChangeLog 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/Source/WebCore/ChangeLog 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1,3 +1,26 @@
+2018-11-27 Javier Fernandez <[email protected]>
+
+ [css-grid] align-self center and position sticky don't work together
+ https://bugs.webkit.org/show_bug.cgi?id=191963
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ This is a fix for a regression introduced in r515391, where we landed
+ the implementation of alignment for positioned objects in a Grid Layout
+ container.
+
+ We assumed that items with non-static positions shouldn't honor the
+ CSS Box Alignment properties. This is only true for out-of-flow items,
+ absolute or fixed positioned elements. However, sticky positioned
+ elements are treated as relative positioned items, but they indeed use
+ non-static position to define their behavior.
+
+ No new tests, this change is covered by current tests and make several cases to pass now.
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::columnAxisPositionForChild const):
+ (WebCore::RenderGrid::rowAxisPositionForChild const):
+
2018-11-26 Daniel Bates <[email protected]>
REGRESSION (r238078): Do not draw caps lock indicator when Strong Password button is shown
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (238550 => 238551)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2018-11-27 13:34:17 UTC (rev 238550)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2018-11-27 13:52:57 UTC (rev 238551)
@@ -1288,7 +1288,7 @@
{
bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
bool childIsLTR = child.style().isLeftToRightDirection();
- if (!hasStaticPositionForChild(child, ForRows))
+ if (child.isOutOfFlowPositioned() && !hasStaticPositionForChild(child, ForRows))
return GridAxisStart;
switch (alignSelfForChild(child).position()) {
@@ -1356,7 +1356,7 @@
{
bool hasSameDirection = child.style().direction() == style().direction();
bool gridIsLTR = style().isLeftToRightDirection();
- if (!hasStaticPositionForChild(child, ForColumns))
+ if (child.isOutOfFlowPositioned() && !hasStaticPositionForChild(child, ForColumns))
return GridAxisStart;
switch (justifySelfForChild(child).position()) {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
