[LayoutNG] Abspos elements inside a spanner

It was decided that the containing block chain goes directly from a
column spanner to the multi-column container. Thus, if an absolute
positioned element is nested inside a spanner, we should begin
looking for its containing block starting with the multi-column
container, as well.

This is an update to the previous legacy behavior, and the related
web test has been updated to reflect the new behavior.

Bug: 1079031
Change-Id: Ia9f60107417158c32d78e12a1d414181411ecb0a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2568852
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834360}

third_party/blink/renderer/core/layout/layout_object.cc

@@ -162,6 +162,18 @@ LayoutObject* FindAncestorByPredicate(const LayoutObject* descendant,
           skip_info->Update(*legend_parent);
         object = legend_parent;
       }
+    } else if (UNLIKELY(object->IsColumnSpanAll())) {
+      // The containing block chain goes directly from the column spanner to the
+      // multi-column container.
+      const auto* multicol_container =
+          object->SpannerPlaceholder()->MultiColumnBlockFlow();
+      if (multicol_container->IsLayoutNGObject()) {
+        while (object->Parent() != multicol_container) {
+          object = object->Parent();
+          if (skip_info)
+            skip_info->Update(*object);
+        }
+      }
     }
   }
   return nullptr;

third_party/blink/renderer/core/layout/ng/ng_out_of_flow_layout_part_test.cc

@@ -842,11 +842,9 @@ TEST_F(NGOutOfFlowLayoutPartTest, PositionedFragmentationWithNestedSpanners) {
   EXPECT_EQ(expectation, dump);
 }
 
-// Tests that column spanners are used as the containing block for abspos
-// elements nested inside of a spanner.
-// TODO(almaher): Abspos elements nested in a spanner are never getting laid
-// out.
-TEST_F(NGOutOfFlowLayoutPartTest, DISABLED_AbsposInSpanner) {
+// Tests that abspos elements bubble up to their containing block when nested
+// inside of a spanner.
+TEST_F(NGOutOfFlowLayoutPartTest, AbsposInSpanner) {
   SetBodyInnerHTML(
       R"HTML(
       <style>
@@ -854,17 +852,74 @@ TEST_F(NGOutOfFlowLayoutPartTest, DISABLED_AbsposInSpanner) {
           column-count:2; column-fill:auto; column-gap:16px; height:40px;
         }
         .rel {
-          position: relative; width:30px;
+          position: relative;
+        }
+        .abs {
+          position:absolute; width:5px; height:50px; top:5px;
+        }
+      </style>
+      <div id="container">
+        <div class="rel" style="width:50px;">
+          <div id="multicol">
+            <div class="rel" style="width:30px;">
+              <div style="width:10px; height:30px;"></div>
+              <div>
+                <div style="column-span:all;">
+                  <div class="abs"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      )HTML");
+  String dump = DumpFragmentTree(GetElementById("container"));
+
+  String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
+  offset:unplaced size:1000x40
+    offset:0,0 size:50x40
+      offset:0,0 size:50x40
+        offset:0,0 size:17x15
+          offset:0,0 size:30x15
+            offset:0,0 size:10x15
+        offset:33,0 size:17x15
+          offset:0,0 size:30x15
+            offset:0,0 size:10x15
+            offset:0,15 size:30x0
+        offset:0,15 size:50x0
+        offset:0,15 size:17x25
+          offset:0,0 size:30x0
+            offset:0,0 size:30x0
+      offset:0,5 size:5x50
+)DUMP";
+  EXPECT_EQ(expectation, dump);
+}
+
+// Tests that abspos elements bubble up to their containing block when nested
+// inside of a spanner and get the correct static position.
+TEST_F(NGOutOfFlowLayoutPartTest, AbsposInSpannerStaticPos) {
+  SetBodyInnerHTML(
+      R"HTML(
+      <style>
+        #multicol {
+          column-count:2; column-fill:auto; column-gap:16px; height:40px;
+        }
+        .rel {
+          position: relative;
         }
         .abs {
           position:absolute; width:5px; height:50px;
         }
       </style>
       <div id="container">
-        <div id="multicol">
-          <div class="rel">
-            <div style="column-span:all;">
-              <div class="abs"></div>
+        <div class="rel" style="width:50px;">
+          <div id="multicol">
+            <div class="rel" style="width:30px;">
+              <div style="width:10px; height:30px;"></div>
+              <div style="column-span:all; margin-top:5px;">
+                <div style="width:20px; height:5px;"></div>
+                <div class="abs"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -874,13 +929,19 @@ TEST_F(NGOutOfFlowLayoutPartTest, DISABLED_AbsposInSpanner) {
 
   String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
   offset:unplaced size:1000x40
-    offset:0,0 size:1000x40
-      offset:0,0 size:492x1
-        offset:0,0 size:30x0
-      offset:0,0 size:1000x0
-        offset:0,0 size:5x50
-      offset:0,0 size:492x40
-        offset:0,0 size:30x0
+    offset:0,0 size:50x40
+      offset:0,0 size:50x40
+        offset:0,0 size:17x15
+          offset:0,0 size:30x15
+            offset:0,0 size:10x15
+        offset:33,0 size:17x15
+          offset:0,0 size:30x15
+            offset:0,0 size:10x15
+        offset:0,20 size:50x5
+          offset:0,0 size:20x5
+        offset:0,25 size:17x15
+          offset:0,0 size:30x0
+      offset:0,25 size:5x50
 )DUMP";
   EXPECT_EQ(expectation, dump);
 }

third_party/blink/web_tests/TestExpectations

@@ -977,6 +977,7 @@ virtual/layout_ng_block_frag/external/wpt/css/css-break/tall-line-in-short-fragm
 virtual/layout_ng_block_frag/external/wpt/css/css-break/trailing-child-margin-000.html [ Pass ]
 virtual/layout_ng_block_frag/external/wpt/css/css-break/trailing-child-margin-002.html [ Pass ]
 virtual/layout_ng_block_frag/external/wpt/css/css-contain/contain-size-monolithic-002.html [ Pass ]
+virtual/layout_ng_block_frag/external/wpt/css/css-multicol/abspos-containing-block-outside-spanner.html [ Pass ]
 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/balance-break-avoidance-001.html [ Pass ]
 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/balance-orphans-widows-000.html [ Pass ]
 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/baseline-001.html [ Pass ]
@@ -1093,7 +1094,6 @@ crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/out-of-flow/nested-
 crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/overflowing-columns-large-gaps.html [ Failure ]
 crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/positioned-outside-of-columns.html [ Crash Failure ]
 crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/positioned-split.html [ Failure ]
-crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/span/abspos-containing-block-outside-spanner.html [ Crash Failure Timeout ]
 crbug.com/1058792 virtual/layout_ng_block_frag/fast/multicol/span/invalid-spanner-in-transform.html [ Failure Crash ]
 crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/span/outer-column-break-after-inner-spanner-2.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/span/outer-column-break-after-inner-spanner-and-float.html [ Failure ]
@@ -3185,6 +3185,7 @@ crbug.com/829028 external/wpt/css/css-break/tall-line-in-short-fragmentainer-001
 crbug.com/829028 external/wpt/css/css-break/tall-line-in-short-fragmentainer-002.html [ Failure ]
 crbug.com/829028 external/wpt/css/css-break/trailing-child-margin-000.html [ Failure ]
 crbug.com/829028 external/wpt/css/css-break/trailing-child-margin-002.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-multicol/abspos-containing-block-outside-spanner.html [ Failure ]
 crbug.com/967329 external/wpt/css/css-multicol/columnfill-auto-max-height-001.html [ Failure ]
 crbug.com/967329 external/wpt/css/css-multicol/columnfill-auto-max-height-002.html [ Failure ]
 crbug.com/829028 external/wpt/css/css-multicol/balance-break-avoidance-001.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-multicol/abspos-containing-block-outside-spanner-ref.html

+<!DOCTYPE html>
+<p>There should be no red.</p>
+<div style="position:absolute; top:0; left:0; background-color:green; height:100px; width:100px;"></div>
+<div style="position:absolute; bottom:0; right:0; background-color:green; height:100px; width:100px;"></div>

third_party/blink/web_tests/external/wpt/css/css-multicol/abspos-containing-block-outside-spanner.html

+<!DOCTYPE html>
+<title>Abspos elements nested inside a column spanner</title>
+<link rel="help" href="href=https://drafts.csswg.org/css-multicol/">
+<link rel="match" href="abspos-containing-block-outside-spanner-ref.html">
+<p>There should be no red.</p>
+<div style="position:absolute; top:0; left:0; background-color:red; height:100px; width:100px;"></div>
+<div style="position:absolute; bottom:0; right:0; background-color:red; height:100px; width:100px;"></div>
+<div style="columns:3; column-gap:1em; width:20em;">
+    <div style="position:relative;">
+        <div style="column-span:all; height:50px;">
+            <div style="position:absolute; top:0; left:0; background-color:green; height:100px; width:100px;"></div>
+            <div style="position:absolute; bottom:0; right:0; background-color:green; height:100px; width:100px;"></div>
+        </div>
+    </div>
+</div>

third_party/blink/web_tests/fast/multicol/span/abspos-containing-block-outside-spanner-expected.html

-<!DOCTYPE html>
-<p>Below, the word PASS should be seen twice.</p>
-<div style="width:20em; overflow:hidden;">
-    <br>
-    <div style="float:left;"><span style="background:green; color:white;">PASS</span></div>
-    <br>
-    <div style="margin:10px; height:50px;"></div>
-    <div style="float:right;"><span style="background:green; color:white;">PASS</span></div>
-</div>

third_party/blink/web_tests/fast/multicol/span/abspos-containing-block-outside-spanner.html

-<!DOCTYPE html>
-<p>Below, the word PASS should be seen twice.</p>
-<div style="-webkit-columns:3; -webkit-column-gap:1em; width:20em;">
-    <br>
-    <div style="position:relative; orphans:1; widows:1;">
-        <span style="background:green; color:green;">PASS</span>
-        <br>
-        <br>
-        <br>
-        <div style="-webkit-column-span:all; margin:10px; height:50px;">
-            <div style="position:absolute; top:0; left:0; color:white;">PASS</div>
-            <div style="position:absolute; bottom:0; right:0; color:white;">PASS</div>
-        </div>
-        <br>
-        <br>
-        <br>
-        <br>
-        <div style="text-align:right;">
-            <span style="background:green; color:green;">PASS</span>
-        </div>
-    </div>
-    <br>
-</div>