Allow un-balanced columns even if column size is unconstrained.
Back in the days, the spec actually said that column-fill:auto should be
disregarded if block-size was unconstrained. But this was changed a
long time ago. The last version of the spec said this was
https://www.w3.org/TR/2011/CR-css3-multicol-20110412/#cf :
"In continuous media, this property will only be consulted if the length
of columns has been constrained. Otherwise, columns will automatically
be balanced."
This requirement is gone here:
https://www.w3.org/TR/2017/WD-css-multicol-1-20171005/#cf
With this change, we'll only balance columns if column-fill is
'balance', and not if column-fill is 'auto'.
There's one exception: We still balance content before a column spanner
(regardless of what the column-fill property says). In addition to
making sense, it's a spec requirement:
https://www.w3.org/TR/css-multicol-1/#valdef-column-span-all
Gecko has been doing this for years already.
If block-size is unconstrained and column-fill is auto, it still means
that we need to know the column block-size before laying out. The new
test multicol-fill-auto-004.html illustrates this. All columns in a row
needs to have the same block-size. To achieve this we just re-use the
same mechanism that we use for the initial column balancing pass, except
that we don't assume any implicit breaks. This called for a rename of
CalculateBalancedColumnBlockSize() to ResolveColumnAutoBlockSize(), with
a new parameter that says whether or not to assume implicit/soft breaks.
If an unconstrained column-fill:auto multicol container is nested inside
another multicol container that is to be balanced, we also need to
balance the inner multicol in the initial column balancing pass of the
outer multicol, so that the outer columns don't get overstretched. The
new test multicol-fill-balance-026.html illustrates this.
This CL fixes 3 existing tests, in addition to the new test
columnfill-auto-max-height-003.html . The two other new tests pass
without this CL as well.
Bug: 1156312, 967329
Change-Id: If41c50376fcd3a84457d603a5cb3fecb2aa2f917
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4173395
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1093508}
diff --git a/css/css-multicol/columnfill-auto-max-height-003.html b/css/css-multicol/columnfill-auto-max-height-003.html
new file mode 100644
index 0000000..a632c8f
--- /dev/null
+++ b/css/css-multicol/columnfill-auto-max-height-003.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:red;">
+ <div style="columns:2; gap:0; column-fill:auto; max-height:200px; background:red;">
+ <div style="width:200%; height:100px; background:green;"></div>
+ </div>
+</div>
diff --git a/css/css-multicol/multicol-fill-auto-004.html b/css/css-multicol/multicol-fill-auto-004.html
new file mode 100644
index 0000000..18e6fa7
--- /dev/null
+++ b/css/css-multicol/multicol-fill-auto-004.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:red;">
+ <div style="columns:5; gap:10px; column-fill:auto; column-rule:10px solid green;">
+ <div style="background:green;">
+ <div style="height:10px;"></div>
+ <div style="break-before:column; height:10px;"></div>
+ <div style="break-before:column; height:10px;"></div>
+ <div style="break-before:column; height:10px;"></div>
+ <div style="break-before:column; height:100px;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-multicol/multicol-fill-balance-026.html b/css/css-multicol/multicol-fill-balance-026.html
new file mode 100644
index 0000000..d38ca32
--- /dev/null
+++ b/css/css-multicol/multicol-fill-balance-026.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:red;">
+ <div style="columns:5; gap:0;">
+ <div style="columns:2; column-fill:auto; gap:0;">
+ <div style="height:1000px; background:green;"></div>
+ </div>
+ </div>
+</div>
