Skip to content

Commit

Permalink
Cherry-pick 809b95b. rdar://problem/108327029
Browse files Browse the repository at this point in the history
    [margin-trim][block layout] Nested self-collapsing children at block-end should also be trimmed.
    https://bugs.webkit.org/show_bug.cgi?id=255736
    rdar://108327029

    Reviewed by Alan Baradlay.

    When walking back up the block container for the purposes of block-end
    margin trimming we may run into a self collapsing child that needs to
    have both of its margins trimmed and its position adjusted. However, it
    is also possible that these self-collapsing children may also have other
    self-collapsing children nested arbitrarily within. If that is the case,
    we need to also trim the margins of all of its descendants.

    * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child-expected.txt:
    * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children-expected.txt:
    * Source/WebCore/rendering/RenderBlockFlow.cpp:
    (WebCore::RenderBlockFlow::trimBlockEndChildrenMargins):

    Canonical link: https://commits.webkit.org/263439@main

Identifier: 259548.716@safari-7615-branch
  • Loading branch information
sammygill authored and MyahCobbs committed May 1, 2023
1 parent b149bce commit fe8bf73
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 128 deletions.
Original file line number Diff line number Diff line change
@@ -1,46 +1,13 @@

PASS item 1
FAIL item 2 assert_equals:
<item data-expected-margin-bottom="0" style="block-size: auto;">
<div><item data-expected-margin-bottom="10"></item></div>
<div>
<item data-expected-margin-bottom="0" style="block-size: auto;">
<div><item data-expected-margin-bottom="0"></item></div>
</item>
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
</div>
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
</item>
margin-bottom expected "0" but got "10"
PASS item 2
PASS item 3
PASS item 4
PASS item 5
FAIL item 6 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 7 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 8 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 9 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 10 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 11 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
PASS item 6
PASS item 7
PASS item 8
PASS item 9
PASS item 10
PASS item 11

Original file line number Diff line number Diff line change
@@ -1,93 +1,20 @@

PASS item 1
PASS item 2
FAIL item 3 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
</item></div>
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 4 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 5 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 6 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 7 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 8 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 9 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
</item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 10 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 11 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 12 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 13 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 14 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
FAIL item 15 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 16 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0">
<div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
</item>
margin-bottom expected "0" but got "10"
FAIL item 17 assert_equals:
<item class="collapsed" data-expected-margin-bottom="0"></item>
margin-bottom expected "0" but got "10"
PASS item 3
PASS item 4
PASS item 5
PASS item 6
PASS item 7
PASS item 8
PASS item 9
PASS item 10
PASS item 11
PASS item 12
PASS item 13
PASS item 14
PASS item 15
PASS item 16
PASS item 17
PASS item 18

14 changes: 14 additions & 0 deletions Source/WebCore/rendering/RenderBlockFlow.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -846,6 +846,14 @@ void RenderBlockFlow::layoutBlockChildren(bool relayoutChildren, LayoutUnit& max

void RenderBlockFlow::trimBlockEndChildrenMargins()
{
auto trimSelfCollapsingChildDescendants = [&](RenderBox& child) {
ASSERT(child.isSelfCollapsingBlock());
for (auto itr = RenderIterator<RenderBox>(&child, child.firstChildBox()); itr; itr = itr.traverseNext()) {
setTrimmedMarginForChild(*itr, MarginTrimType::BlockStart);
setTrimmedMarginForChild(*itr, MarginTrimType::BlockEnd);
}
};

ASSERT(style().marginTrim().contains(MarginTrimType::BlockEnd));
// If we are trimming the block end margin, we need to make sure we trim the margin of the children
// at the end of the block by walking back up the container. Any self collapsing children will also need to
Expand All @@ -862,6 +870,12 @@ void RenderBlockFlow::trimBlockEndChildrenMargins()
if (child->isSelfCollapsingBlock()) {
setTrimmedMarginForChild(*child, MarginTrimType::BlockStart);
childContainingBlock->setLogicalTopForChild(*child, childContainingBlock->logicalHeight());

// If this self-collapsing child has any other children, which must also be
// self-collapsing, we should trim the margins of all its descendants
if (child->firstChildBox() && !child->childrenInline())
trimSelfCollapsingChildDescendants(*child);

child = child->previousSiblingBox();
} else if (auto* nestedBlock = dynamicDowncast<RenderBlockFlow>(child); nestedBlock && nestedBlock->isBlockContainer() && !nestedBlock->childrenInline() && !nestedBlock->style().marginTrim().contains(MarginTrimType::BlockEnd)) {
MarginInfo nestedBlockMarginInfo(*nestedBlock, nestedBlock->borderAndPaddingBefore(), nestedBlock->borderAndPaddingAfter());
Expand Down

0 comments on commit fe8bf73

Please sign in to comment.