[LayoutNG] Column balancing with OOFs when the CB finds a spanner
In CL:3018723, we allow OOFs to get laid out once they reach a spanner
so that they can take up the space they contributed to in the initial
column balancing pass. However, if the spanner was a child of the
containing block, we could end up in a case where the OOF is laid
out before the CB has finished layout. This can be problematic for
cases such as an OOF positioned at bottom:0.
To fix this, delay the layout of an OOF in this case if the CB has
not finished layout. Because of this, we could end up in cases where
the OOF contributes to the initial column block size before the spanner
but gets laid out after the spanner. This can lead to unexpected
results.
I had originally planned to address this case by not allowing the OOF
to contribute to the initial column block size if the CB found a
spanner or had broken previously due to a spanner. This, however, led
to new web test failures (see Patchset2). Thus, I've opened a new bug
to track this use case instead since the logic to get this working
would likely be a bit complex:
https://bugs.chromium.org/p/chromium/issues/detail?id=1236603.
Bug: 1206618
Change-Id: Ia028bbb112eab3c0f6d2a949d9eec0e3c86cb605
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3069646
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#908964}
diff --git a/css/css-break/out-of-flow-in-multicolumn-074.html b/css/css-break/out-of-flow-in-multicolumn-074.html
new file mode 100644
index 0000000..1c6882d
--- /dev/null
+++ b/css/css-break/out-of-flow-in-multicolumn-074.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>
+ Out-of-flow positioned with bottom:0 with spanner sibling.
+</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+ .multicol {
+ column-count: 4;
+ column-gap: 0px;
+ width: 100px;
+ margin-top: -105px;
+ }
+ .abs {
+ position: absolute;
+ background-color: green;
+ height: 400px;
+ width: 25px;
+ bottom: 0;
+ }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="multicol">
+ <div style="position: relative;">
+ <div style="height: 400px;"></div>
+ <div class="abs"></div>
+ <div style="column-span: all; height:5px;"></div>
+ <div style="height: 400px; width: 25px; background-color: red;"></div>
+ </div>
+</div>
