commit aa18774378e5cf338e137afdd7b141b133b8694e
parent a3c25ca8b8babda8af2c34fc77860ae5999eab55
Author: Morten Stenshorne <mstensho@chromium.org>
Date: Fri, 28 Nov 2025 14:53:28 +0000
Bug 2002869 [wpt PR 56330] - Handle column-height correctly in nested block fragmentation., a=testonly
Automatic update from web-platform-tests
Handle column-height correctly in nested block fragmentation.
Behavior resolved here:
https://github.com/w3c/csswg-drafts/issues/11977#issuecomment-3582505348
In short, let column rows behave pretty much as if they have
break-inside:avoid set.
Bug: 445971864, 403183884
Change-Id: Iecf283741fb32ddef30b0e8f0ebecb92deea1afe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7208938
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1551192}
--
wpt-commits: cb6907a22b2454b7e0def6ede8fa23f7a2c2080b
wpt-pr: 56330
Diffstat:
6 files changed, 85 insertions(+), 4 deletions(-)
diff --git a/testing/web-platform/tests/css/css-multicol/column-height-007.html b/testing/web-platform/tests/css/css-multicol/column-height-007.html
@@ -1,15 +1,15 @@
<!DOCTYPE html>
-<title>column-height and column-wrap in inner multicol, nested multicol</title>
+<title>column-height and column-wrap in inner multicol, nested multicol, room for one row</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
<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="position:relative; width:100px; height:100px; background:red;">
- <div style="columns:2; column-fill:auto; height:100px; gap:0;">
- <div style="columns:2; column-fill:auto; column-height:60px; column-wrap:wrap; gap:10px 0;">
+ <div style="columns:2; column-fill:auto; height:150px; gap:0;">
+ <div style="columns:2; column-fill:auto; column-height:100px; column-wrap:wrap; gap:10px 0;">
<div style="height:360px; background:green;"></div>
</div>
</div>
- <div style="position:absolute; top:60px; left:0; width:100px; height:10px; background:green;"></div>
+ <div style="position:absolute; top:60px; right:0; width:25px; height:40px; background:green;"></div>
</div>
diff --git a/testing/web-platform/tests/css/css-multicol/column-height-025.html b/testing/web-platform/tests/css/css-multicol/column-height-025.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>column-height and column-wrap in inner multicol, nested multicol, not enough room for one row</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
+<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="position:relative; width:100px; height:100px; background:red;">
+ <div style="columns:5; column-fill:auto; height:100px; gap:13px 0;">
+ <div style="columns:2; column-fill:auto; column-height:350px; column-wrap:wrap; gap:13px 0;">
+ <div style="height:900px; background:green;"></div>
+ </div>
+ </div>
+ <div style="position:absolute; top:50px; left:60px; width:20px; height:50px; background:green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-multicol/column-height-026.html b/testing/web-platform/tests/css/css-multicol/column-height-026.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>column-height and column-wrap in inner multicol, nested multicol, room for exactly four rows</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
+<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; column-fill:auto; height:100px; gap:0;">
+ <div style="columns:2; column-fill:auto; column-height:25px; column-wrap:wrap; gap:0;">
+ <div style="height:400px; background:green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-multicol/column-height-027.html b/testing/web-platform/tests/css/css-multicol/column-height-027.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>column-height and column-wrap in inner multicol, nested multicol, room for three rows and parts of the gap after</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
+<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="position:relative; width:100px; height:100px; background:red;">
+ <div style="columns:2; column-fill:auto; height:100px; gap:0;">
+ <div style="columns:2; column-fill:auto; column-height:25px; column-wrap:wrap; gap:10px 0;">
+ <div style="height:300px; background:green;"></div>
+ </div>
+ </div>
+ <div style="position:absolute; top:25px; left:0; width:100px; height:10px; background:green;"></div>
+ <div style="position:absolute; top:60px; left:0; width:100px; height:10px; background:green;"></div>
+ <div style="position:absolute; top:95px; left:0; width:100px; height:5px; background:green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-multicol/column-height-028.html b/testing/web-platform/tests/css/css-multicol/column-height-028.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>column-height and column-wrap in inner multicol, nested multicol, room for three rows and then some</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
+<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="position:relative; width:100px; height:100px; background:red;">
+ <div style="columns:2; column-fill:auto; height:100px; gap:0;">
+ <div style="columns:2; column-fill:auto; column-height:20px; column-wrap:wrap; gap:10px 0;">
+ <div style="height:240px; background:green;"></div>
+ </div>
+ </div>
+ <div style="position:absolute; top:20px; left:0; width:100px; height:10px; background:green;"></div>
+ <div style="position:absolute; top:50px; left:0; width:100px; height:10px; background:green;"></div>
+ <div style="position:absolute; top:80px; left:0; width:100px; height:20px; background:green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-multicol/column-height-029.html b/testing/web-platform/tests/css/css-multicol/column-height-029.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>column-height and column-wrap in inner multicol, nested multicol, column spanner</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
+<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="position:relative; width:100px; height:100px; background:red;">
+ <div style="columns:2; column-fill:auto; height:100px; gap:0;">
+ <div style="columns:2; column-fill:auto; column-height:60px; column-wrap:wrap; gap:13px 0;">
+ <div style="height:100px; background:green;"></div>
+ <div style="column-span:all; height:20px; background:green;"></div>
+ <div style="height:80px; background:green;"></div>
+ </div>
+ </div>
+ <div style="position:absolute; top:50px; left:0; width:50px; height:50px; background:green;"></div>
+ <div style="position:absolute; top:60px; left:50px; width:50px; height:40px; background:green;"></div>
+</div>
