[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

LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child-expected.txt

@@ -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
 

LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children-expected.txt

@@ -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
 

Source/WebCore/rendering/RenderBlockFlow.cpp

@@ -878,6 +878,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
@@ -894,6 +902,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());