Skip to content

Commit

Permalink
[LayoutNG] OOFs and column balancing
Browse files Browse the repository at this point in the history 
OOFs currently only affect the initial column balancing pass, but we
want them to affect column balancing on later passes, too. To do
so, we need to lay out the OOFs during column layout. Currently,
though, OOFs are laid out at the end of multicol layout (to ensure
the containing block has completed layout).

However, we can perform layout earlier for OOFs whose CB hasn't broken
so that they affect column balancing. The problem is that these
columns haven't been added to the builder at the time when the
columns are being balanced, so the OOFs haven't been propagated up
to the builder, either.

To address this, add a new ColumnBalancingInfo struct to hold the
current columns so that NGOutOfFlowLayoutPart will know which
columns to use. This will also store a list of OOFs so that we
can propagate the OOFs to this struct rather than to the builder.

This struct will then be passed into HandleFragmentation() so that
a special layout pass can be run on the current unbalanced columns,
where we will propagate the info needed to successfully
affect column balancing (such as the minimal space shortage,
# of new columns added, and if there was a violating break). This
special layout pass won't update the builder (i.e. the OOF results
aren't added and new columns aren't created).

Since we don't actually add the OOFs in this pass to the builder,
we will continue to lay out the OOFs at a later point (as is
currently done) where they will be officially laid out and added
to the builder.

Note that out-of-flow-in-multicolumn-099.html passed previously to
this CL since break-inside:avoid doesn't affect the OOF. This was
simply added to make sure that case was working as expected.

Bug: 1341358
Change-Id: Ic1fa6b57a8e4fa26a3f0e1acbd2efe7425787ab0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3761109
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: Daniel Libby <dlibby@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1024906}
  • Loading branch information
@alisonmaher @chromium-wpt-export-bot
alisonmaher authored and chromium-wpt-export-bot committed Jul 15, 2022
1 parent 92c5a8f commit 77d05b2
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 0 deletions.
16 changes: 16 additions & 0 deletions css/css-break/out-of-flow-in-multicolumn-094.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>
OOFs and column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height:200px; width:200px; background:red;">
<div style="width:200px; columns:2; column-rule:solid green; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
<div style="position:relative;">
<div style="position:absolute; height:100px;"></div>
</div>
</div>
</div>
18 changes: 18 additions & 0 deletions css/css-break/out-of-flow-in-multicolumn-095.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>
OOFs and column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height:200px; width:200px; background:red;">
<div style="width:200px; columns:2; column-rule:solid green; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="position:relative; height:100px;">
<div style="position:absolute; contain:size; height:100px;"></div>
</div>
<div style="position:relative;">
<div style="position:absolute; contain:size; height:100px;"></div>
</div>
</div>
</div>
18 changes: 18 additions & 0 deletions css/css-break/out-of-flow-in-multicolumn-096.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>
OOFs and nested column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height:200px; width:200px; background:red;">
<div style="width:200px; columns:1;">
<div style="width:200px; columns:2; column-rule:solid green; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
<div style="position:relative;">
<div style="position:absolute; height:100px;"></div>
</div>
</div>
</div>
</div>
18 changes: 18 additions & 0 deletions css/css-break/out-of-flow-in-multicolumn-097.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>
OOFs and column balancing with a spanner.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height:200px; width:200px; background:red;"></div>
<div style="width:200px; columns:2; column-rule:20px solid green; margin-top:-300px; position:relative;">
<div style="contain:size; height:80px;"></div>
<div style="column-span:all; height:20px;"></div>
<div style="contain:size; height:100px; width:100%; background:green;"></div>
<div style="contain:size; height:100px; width:100%; background:green;"></div>
<div style="position:relative;">
<div style="position:absolute; width:100%; height:100px; background:green;"></div>
</div>
<div style="position:absolute; bottom:0; right:0; width:90px; height:100px; background:green;"></div>
</div>
18 changes: 18 additions & 0 deletions css/css-break/out-of-flow-in-multicolumn-098.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>
OOFs and column balancing with a spanner and the CB breaks across the spanner.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height:200px; width:200px; background:red;"></div>
<div style="width:200px; columns:2; column-rule:20px solid green; margin-top:-300px; position:relative;">
<div style="position:relative;">
<div style="contain:size; height:80px;"></div>
<div style="column-span:all; height:20px;"></div>
<div style="contain:size; height:100px; width:100%; background:green;"></div>
<div style="contain:size; height:100px; width:100%; background:green;"></div>
<div style="position:absolute; width:100%; height:100px; background:green;"></div>
</div>
<div style="position:absolute; bottom:0; right:0; width:90px; height:100px; background:green;"></div>
</div>
15 changes: 15 additions & 0 deletions css/css-break/out-of-flow-in-multicolumn-099.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>
OOFs and column balancing with a nested break-inside:avoid.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:200px; columns:2; column-rule:solid green; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="position:relative; height:200px; width:100%; background:red;">
<div style="position:absolute; width:100%; background:green;">
<div style="height:200px; break-inside:avoid;"></div>
</div>
</div>
</div>

0 comments on commit 77d05b2

Please sign in to comment.