Stretch nested columns to the block-size of the outer fragmentainer.

This is required by the spec.
https://www.w3.org/TR/css-break-3/#box-splitting "When a box breaks, its
content box extends to fill any remaining fragmentainer extent"

We can finally DCHECK that minimal_space_shortage is set, rather than
bailing if it isn't.

Add a test that demonstrates that this is necessary in order to paint
the backgrounds and column rules correctly. It also fixes a problem with
offsetLeft and offsetTop, because we confused the legacy code (still
used for offsetFoo) when writing back fragmentainer groups that didn't
take up all available space.

Bug: 829028
Change-Id: Ic23f94d2b9db4d4cc4f8d9036b32676a933f82c9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3144154
Reviewed-by: Ian Kilpatrick <[email protected]>
Commit-Queue: Morten Stenshorne <[email protected]>
Cr-Commit-Position: refs/heads/main@{#919172}

Author: mstensho

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

@@ -778,19 +778,25 @@ scoped_refptr<const NGLayoutResult> NGColumnLayoutAlgorithm::LayoutRow(
         (!column_break_token || result->ColumnSpanner()))
       break;
 
-    // We're in a situation where we'd like to stretch the columns, but then we
-    // need to know the stretch amount (minimal space shortage).
-    if (minimal_space_shortage == LayoutUnit::Max())
-      break;
-
-    // We also need at least one soft break opportunity. If forced breaks cause
-    // too many breaks, there's no stretch amount that could prevent the columns
-    // from overflowing.
-    if (used_column_count_ <= forced_break_count + 1)
-      break;
-
-    LayoutUnit new_column_block_size = StretchColumnBlockSize(
-        minimal_space_shortage, column_size.block_size, row_offset);
+    // Attempt to stretch the columns.
+    LayoutUnit new_column_block_size;
+    if (used_column_count_ <= forced_break_count + 1) {
+      // If we have no soft break opportunities (because forced breaks cause too
+      // many breaks already), there's no stretch amount that could prevent the
+      // columns from overflowing. Give up, unless we're nested inside another
+      // fragmentation context, in which case we'll stretch the columns to take
+      // up all the space inside the multicol container fragment. A box is
+      // required to use all the remaining fragmentainer space when something
+      // inside breaks; see https://www.w3.org/TR/css-break-3/#box-splitting
+      if (!is_constrained_by_outer_fragmentation_context_)
+        break;
+      new_column_block_size = FragmentainerSpaceAtBfcStart(ConstraintSpace());
+    } else {
+      DCHECK(minimal_space_shortage != LayoutUnit::Max());
+      new_column_block_size = column_size.block_size + minimal_space_shortage;
+    }
+    new_column_block_size =
+        ConstrainColumnBlockSize(new_column_block_size, row_offset);
 
     // Give up if we cannot get taller columns. The multicol container may have
     // a specified block-size preventing taller columns, for instance.
@@ -1196,15 +1202,6 @@ LayoutUnit NGColumnLayoutAlgorithm::CalculateBalancedColumnBlockSize(
                                   row_offset);
 }
 
-LayoutUnit NGColumnLayoutAlgorithm::StretchColumnBlockSize(
-    LayoutUnit minimal_space_shortage,
-    LayoutUnit current_column_size,
-    LayoutUnit row_offset) const {
-  LayoutUnit length = current_column_size + minimal_space_shortage;
-  // Honor {,min-,max-}{height,width} properties.
-  return ConstrainColumnBlockSize(length, row_offset);
-}
-
 // Constrain a balanced column block size to not overflow the multicol
 // container.
 LayoutUnit NGColumnLayoutAlgorithm::ConstrainColumnBlockSize(

third_party/blink/renderer/core/layout/ng/ng_column_layout_algorithm.h

@@ -79,12 +79,6 @@ class CORE_EXPORT NGColumnLayoutAlgorithm
       LayoutUnit row_offset,
       const NGBlockBreakToken* child_break_token);
 
-  // Stretch the column length. We do this during column balancing, when we
-  // discover that the current length isn't large enough to fit all content.
-  LayoutUnit StretchColumnBlockSize(LayoutUnit minimal_space_shortage,
-                                    LayoutUnit current_column_size,
-                                    LayoutUnit row_offset) const;
-
   LayoutUnit ConstrainColumnBlockSize(LayoutUnit size,
                                       LayoutUnit row_offset) const;
   LayoutUnit CurrentContentBlockOffset(LayoutUnit border_box_row_offset) const {

third_party/blink/web_tests/TestExpectations

@@ -1274,10 +1274,8 @@ crbug.com/1225630 virtual/layout_ng_block_frag/fast/multicol/insane-column-count
 crbug.com/1066626 virtual/layout_ng_block_frag/fast/multicol/layers-split-across-columns.html [ Failure ]
 crbug.com/1066626 virtual/layout_ng_block_frag/fast/multicol/mixed-opacity-fixed-test.html [ Failure ]
 crbug.com/1079031 virtual/layout_ng_block_frag/fast/multicol/mixed-opacity-test.html [ Crash Failure ]
-crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/nested-balanced-inner-column-count-1-with-forced-break.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/nested-short-first-row-extra-tall-line.html [ Failure ]
 crbug.com/1225630 virtual/layout_ng_block_frag/fast/multicol/nested-very-tall-inside-short-crash.html [ Skip ]
-crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/nested-with-forced-breaks-in-eariler-rows.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/nested-with-padding.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/fast/multicol/span/outer-column-break-after-inner-spanner-2.html [ Failure ]
 crbug.com/1242348 virtual/layout_ng_block_frag/fast/multicol/tall-line-in-short-block.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-multicol/multicol-nested-column-rule-003.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gaps-and-rules">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+  .mc {
+    columns: 2;
+    column-gap: 20px;
+    column-rule: 20px solid green;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="mc" style="column-fill:auto; width:100px; height:100px; background:red;">
+  <div class="mc">
+    <div style="background:green;">
+      <div style="height:10px; break-after:column;"></div>
+      <div style="height:10px; break-after:column;"></div>
+      <div style="height:200px;"></div>
+    </div>
+  </div>
+</div>