- Revision
- 282463
- Author
- [email protected]
- Date
- 2021-09-15 11:06:47 -0700 (Wed, 15 Sep 2021)
Log Message
[css-grid] Overflow should be computed with the actual logical bottom
https://bugs.webkit.org/show_bug.cgi?id=226981
Reviewed by Javier Fernandez.
When computing the overflow area in the grid container, we need to obtain the result of ClientLogicalBottom
function. This value should be retrieved after computing the actual logical height rather than before.
For grid, width/height of the overflow rect should be the width/height of the grid area of the items rather than
the width/height of the container block. As per https://github.com/w3c/csswg-drafts/issues/3653, child's margins
along with padding should contribute to the scrollable overflow area.
Test: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::clientLogicalBottomAfterRepositioning):
(WebCore::RenderBlock::computeOverflow):
* rendering/RenderBlock.h:
(WebCore::RenderBlock::logicalLeftForChild const):
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::clientLogicalBottomAfterRepositioning): Deleted.
* rendering/RenderFlexibleBox.h:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock):
Modified Paths
Diff
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-overflow-002-expected.txt (282462 => 282463)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-overflow-002-expected.txt 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-overflow-002-expected.txt 2021-09-15 18:06:47 UTC (rev 282463)
@@ -41,77 +41,18 @@
Content-Alignment: center and Overflow-Alignment: unsafe
-FAIL .grid 1 assert_equals:
-<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
- <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="110" data-expected-scroll-height="300">
- <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
- <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
- </div>
-</div>
-scrollWidth expected 110 but got 80
-FAIL .grid 2 assert_equals:
-<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
- <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="205">
- <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
- <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
- </div>
-</div>
-scrollHeight expected 205 but got 260
-FAIL .grid 3 assert_equals:
-<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
- <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
- <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
- <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
- </div>
-</div>
-scrollWidth expected 160 but got 130
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
PASS .grid 4
PASS .grid 5
-FAIL .grid 6 assert_equals:
-<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
- <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="150">
- <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
- <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
- </div>
-</div>
-scrollHeight expected 150 but got 260
-FAIL .grid 7 assert_equals:
-<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
- <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
- <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
- <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
- </div>
-</div>
-scrollWidth expected 160 but got 130
+PASS .grid 6
+PASS .grid 7
PASS .grid 8
PASS .grid 9
PASS .grid 10
-FAIL .grid 11 assert_equals:
-<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
- <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="100" data-expected-scroll-height="100">
- <div class="item1 firstRowSecondColumn" data-offset-x="20" data-offset-y="-180" data-expected-width="50" data-expected-height="150"></div>
- <div class="item2 secondRowFirstColumn" data-offset-x="-130" data-offset-y="-30" data-expected-width="150" data-expected-height="100"></div>
- </div>
-</div>
-scrollHeight expected 100 but got 310
-FAIL .grid 12 assert_equals:
-<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
- <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="180" data-expected-scroll-height="205">
- <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
- <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
- </div>
-</div>
-scrollWidth expected 180 but got 150
+PASS .grid 11
+PASS .grid 12
PASS .grid 13
PASS .grid 14
Modified: trunk/Source/WebCore/ChangeLog (282462 => 282463)
--- trunk/Source/WebCore/ChangeLog 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/Source/WebCore/ChangeLog 2021-09-15 18:06:47 UTC (rev 282463)
@@ -1,3 +1,29 @@
+2021-09-15 Ziran Sun <[email protected]>
+
+ [css-grid] Overflow should be computed with the actual logical bottom
+ https://bugs.webkit.org/show_bug.cgi?id=226981
+
+ Reviewed by Javier Fernandez.
+
+ When computing the overflow area in the grid container, we need to obtain the result of ClientLogicalBottom
+ function. This value should be retrieved after computing the actual logical height rather than before.
+
+ For grid, width/height of the overflow rect should be the width/height of the grid area of the items rather than
+ the width/height of the container block. As per https://github.com/w3c/csswg-drafts/issues/3653, child's margins
+ along with padding should contribute to the scrollable overflow area.
+
+ Test: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
+ * rendering/RenderBlock.cpp:
+ (WebCore::RenderBlock::clientLogicalBottomAfterRepositioning):
+ (WebCore::RenderBlock::computeOverflow):
+ * rendering/RenderBlock.h:
+ (WebCore::RenderBlock::logicalLeftForChild const):
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::clientLogicalBottomAfterRepositioning): Deleted.
+ * rendering/RenderFlexibleBox.h:
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutBlock):
+
2021-09-15 Youenn Fablet <[email protected]>
imported/w3c/web-platform-tests/webrtc-extensions/transfer-datachannel.html is failing after https://trac.webkit.org/changeset/282445/webkit
Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (282462 => 282463)
--- trunk/Source/WebCore/rendering/RenderBlock.cpp 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/Source/WebCore/rendering/RenderBlock.cpp 2021-09-15 18:06:47 UTC (rev 282463)
@@ -660,6 +660,23 @@
}
}
+LayoutSize RenderBlock::clientLogicalRightAndBottomAfterRepositioning() const
+{
+ LayoutUnit maxChildLogicalRight;
+ LayoutUnit maxChildLogicalBottom;
+ for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+ if (child->isOutOfFlowPositioned())
+ continue;
+ LayoutUnit childLogicalRight = logicalLeftForChild(*child) + logicalWidthForChild(*child) + marginEndForChild(*child);
+ LayoutUnit childLogicalBottom = logicalTopForChild(*child) + logicalHeightForChild(*child) + marginAfterForChild(*child);
+ maxChildLogicalRight = std::max(maxChildLogicalRight, childLogicalRight);
+ maxChildLogicalBottom = std::max(maxChildLogicalBottom, childLogicalBottom);
+
+ }
+ return LayoutSize(maxChildLogicalRight + paddingRight(), std::max(clientLogicalBottom(), maxChildLogicalBottom + paddingAfter()));
+}
+
+
// Overflow is always relative to the border-box of the element in question.
// Therefore, if the element has a vertical scrollbar placed on the left, an overflow rect at x=2px would conceptually intersect the scrollbar.
void RenderBlock::computeOverflow(LayoutUnit oldClientAfterEdge, bool)
@@ -670,15 +687,22 @@
addOverflowFromPositionedObjects();
if (hasNonVisibleOverflow()) {
+ // Set the axis we don't care about to be 1, since we want this overflow to always be considered reachable.
+ LayoutUnit rectWidth = 1_lu;
+ // For grid, width of the overflow rect should be the width of the grid area of the items rather than the container block.
+ // As per https://github.com/w3c/csswg-drafts/issues/3653, child's margins along with padding should contribute to the
+ // scrollable overflow area.
+ if (this->isRenderGrid())
+ rectWidth = clientLogicalRightAndBottomAfterRepositioning().width();
+
// When we have overflow clip, propagate the original spillout since it will include collapsed bottom margins
- // and bottom padding. Set the axis we don't care about to be 1, since we want this overflow to always
- // be considered reachable.
+ // and bottom padding.
LayoutRect clientRect(flippedClientBoxRect());
LayoutRect rectToApply;
if (isHorizontalWritingMode())
- rectToApply = LayoutRect(clientRect.x(), clientRect.y(), 1_lu, std::max(0_lu, oldClientAfterEdge - clientRect.y()));
+ rectToApply = LayoutRect(clientRect.x(), clientRect.y(), rectWidth, std::max(0_lu, oldClientAfterEdge - clientRect.y()));
else
- rectToApply = LayoutRect(clientRect.x(), clientRect.y(), std::max(0_lu, oldClientAfterEdge - clientRect.x()), 1_lu);
+ rectToApply = LayoutRect(clientRect.x(), clientRect.y(), std::max(0_lu, oldClientAfterEdge - clientRect.x()), rectWidth);
addLayoutOverflow(rectToApply);
if (hasRenderOverflow())
m_overflow->setLayoutClientAfterEdge(oldClientAfterEdge);
Modified: trunk/Source/WebCore/rendering/RenderBlock.h (282462 => 282463)
--- trunk/Source/WebCore/rendering/RenderBlock.h 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/Source/WebCore/rendering/RenderBlock.h 2021-09-15 18:06:47 UTC (rev 282463)
@@ -232,6 +232,7 @@
LayoutUnit adjustContentBoxLogicalHeightForBoxSizing(std::optional<LayoutUnit> height) const override;
void paintExcludedChildrenInBorder(PaintInfo&, const LayoutPoint&);
+ LayoutSize clientLogicalRightAndBottomAfterRepositioning() const;
// Accessors for logical width/height and margins in the containing block's block-flow direction.
enum ApplyLayoutDeltaMode { ApplyLayoutDelta, DoNotApplyLayoutDelta };
LayoutUnit logicalWidthForChild(const RenderBox& child) const { return isHorizontalWritingMode() ? child.width() : child.height(); }
@@ -238,6 +239,7 @@
LayoutUnit logicalHeightForChild(const RenderBox& child) const { return isHorizontalWritingMode() ? child.height() : child.width(); }
LayoutSize logicalSizeForChild(const RenderBox& child) const { return isHorizontalWritingMode() ? child.size() : child.size().transposedSize(); }
LayoutUnit logicalTopForChild(const RenderBox& child) const { return isHorizontalWritingMode() ? child.y() : child.x(); }
+ LayoutUnit logicalLeftForChild(const RenderBox& child) const { return isHorizontalWritingMode() ? child.x() : child.y(); }
void setLogicalLeftForChild(RenderBox& child, LayoutUnit logicalLeft, ApplyLayoutDeltaMode = DoNotApplyLayoutDelta);
void setLogicalTopForChild(RenderBox& child, LayoutUnit logicalTop, ApplyLayoutDeltaMode = DoNotApplyLayoutDelta);
LayoutUnit marginBeforeForChild(const RenderBoxModelObject& child) const { return child.marginBefore(&style()); }
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (282462 => 282463)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2021-09-15 18:06:47 UTC (rev 282463)
@@ -390,7 +390,7 @@
repaintChildrenDuringLayoutIfMoved(oldChildRects);
// FIXME: css3/flexbox/repaint-rtl-column.html seems to repaint more overflow than it needs to.
- computeOverflow(clientLogicalBottomAfterRepositioning());
+ computeOverflow(clientLogicalRightAndBottomAfterRepositioning().height());
}
updateLayerTransform();
@@ -462,18 +462,6 @@
flipForRightToLeftColumn(lineContexts);
}
-LayoutUnit RenderFlexibleBox::clientLogicalBottomAfterRepositioning()
-{
- LayoutUnit maxChildLogicalBottom;
- for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
- if (child->isOutOfFlowPositioned())
- continue;
- LayoutUnit childLogicalBottom = logicalTopForChild(*child) + logicalHeightForChild(*child) + marginAfterForChild(*child);
- maxChildLogicalBottom = std::max(maxChildLogicalBottom, childLogicalBottom);
- }
- return std::max(clientLogicalBottom(), maxChildLogicalBottom + paddingAfter());
-}
-
bool RenderFlexibleBox::mainAxisIsChildInlineAxis(const RenderBox& child) const
{
return isHorizontalFlow() == child.isHorizontalWritingMode();
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (282462 => 282463)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2021-09-15 18:06:47 UTC (rev 282463)
@@ -170,7 +170,6 @@
bool hasAutoMarginsInCrossAxis(const RenderBox& child) const;
bool updateAutoMarginsInCrossAxis(RenderBox& child, LayoutUnit availableAlignmentSpace);
void repositionLogicalHeightDependentFlexItems(Vector<LineContext>&, LayoutUnit gapBetweenLines);
- LayoutUnit clientLogicalBottomAfterRepositioning();
LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, const RenderBox& child);
LayoutUnit marginBoxAscentForChild(const RenderBox& child);
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (282462 => 282463)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2021-09-15 18:05:10 UTC (rev 282462)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2021-09-15 18:06:47 UTC (rev 282463)
@@ -263,7 +263,6 @@
setLogicalHeight(trackBasedLogicalHeight);
- LayoutUnit oldClientAfterEdge = clientLogicalBottom();
updateLogicalHeight();
// Once grid's indefinite height is resolved, we can compute the
@@ -300,7 +299,7 @@
layoutPositionedObjects(relayoutChildren || isDocumentElementRenderer());
- computeOverflow(oldClientAfterEdge);
+ computeOverflow(clientLogicalRightAndBottomAfterRepositioning().height());
}
updateLayerTransform();
