commit d381558d43cbab00581f04f78bd1906a386b140e
parent b5fbcea50741063e59635b04224d54e4055ff9de
Author: Morten Stenshorne <mstensho@chromium.org>
Date: Mon, 5 Jan 2026 10:37:00 +0000
Bug 2005577 [wpt PR 56688] - Avoid column progression subpixel inaccuracies., a=testonly
Automatic update from web-platform-tests
Avoid column progression subpixel inaccuracies.
We can use LayoutUnitDiffuser so that everything sums up nicely.
Update a WPT test that relied on the inaccuracies now fixed. With the
code changes in this CL, we would render identically to what Firefox
does, but that wasn't the expected result, even though it is better.
Rewrite the test to not rely on subpixel behavior.
Also update one unit test, which was using subpixels for no reason (and
relying on the results being inaccurate).
Rewrite css-multicol/multicol-width-ch-001.xht , to make it fit within
the viewport (it was much wider than 800px), not use XHTML, and use grid
in the ref, since that's hopefully more likely to match. Adding five
13ch width elements with 1ch between them is not guaranteed to be the
same as 69ch. Instead, use grid, and distribute 1ch to the "gaps" and
1fr for the five "columns". And use Ahem.
Bug: 467869214
Change-Id: I946d2cd39e78b987af402c43f29fff191634786b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7251229
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1563919}
--
wpt-commits: 3efb92ad353b33381e9c87c57bc7600e6865d66c
wpt-pr: 56688
Diffstat:
7 files changed, 121 insertions(+), 93 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-006-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-006-ref.html
@@ -3,10 +3,11 @@
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
.outer-container {
+ position: relative;
columns: 3;
column-fill: auto;
height: 100px;
- width: 600px;
+ width: 620px;
gap: 10px;
background: yellow;
}
@@ -22,7 +23,6 @@
.inner-column {
height: 250px;
background: hotpink;
- width: 80px;
}
#col-gap1 {
@@ -30,16 +30,16 @@
height: 80px;
width: 1px;
background: green;
- top: 18px;
- left: 104px;
+ top: 10px;
+ left: 100px;
}
#col-gap2 {
position: absolute;
width: 1px;
background: green;
- top: 18px;
- left: 307px;
+ top: 10px;
+ left: 310px;
height: 45px;
}
</style>
@@ -47,6 +47,6 @@
<div class="nested-container">
<div class="inner-column"></div>
</div>
+ <div id="col-gap1"></div>
+ <div id="col-gap2"></div>
</div>
-<div id="col-gap1"></div>
-<div id="col-gap2"></div>
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-006.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-006.html
@@ -10,7 +10,7 @@
columns: 3;
column-fill: auto;
height: 100px;
- width: 600px;
+ width: 620px;
gap: 10px;
background: yellow;
}
@@ -29,7 +29,6 @@
.inner-column {
height: 250px;
background: hotpink;
- width: 80px;
}
</style>
<div class="outer-container">
diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.html b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Test: column-width (ch units)</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-number-and-width-of-columns">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="multicol-width-ch-ref.html">
+<meta name="assert" value="Test that the ch unit can be used as a value for column-width.">
+<style>
+ .multicol {
+ font: 10px ahem;
+ width: 69ch;
+ column-width: 13ch;
+ column-gap: 1ch;
+ background: yellow;
+ }
+</style>
+
+<div class="multicol">
+ one two three four
+ five six seven eight
+ nineten eleven twelve
+ thirtn fourtnfiftn sixtn
+ seventn eightn ninetn twenty
+ hundred thousand million billionx
+ trillionsopp
+</div>
diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.xht
@@ -1,33 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>CSS Multi-column Layout Test: column-width (ch units)</title>
-<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
-<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-number-and-width-of-columns"/>
-<link rel="match" href="multicol-width-ch-ref.xht"/>
-<meta name="assert" value="Test that the ch unit can be used as a value for column-width."/>
-<style type="text/css"><![CDATA[
-.multicol {
- font: 3em monospace;
- width: 69ch;
- column-width: 13ch;
- column-gap: 1ch;
- background: yellow;
-}
-]]></style>
-</head>
-
-<body>
- <p>Test passes if we have five columns with four lines in each. The final column should contain the words: million, billion, trillion.</p>
- <div class="multicol">
- one two three four
- five six seven eight
- nineten eleven twelve
- thirtn fourtnfiftn sixtn
- seventn eightn ninetn twenty
- hundred thousand million billion
- trillion
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>multicolumn | column-width</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+ .multicol-ref {
+ font: 10px ahem;
+ display: grid;
+ grid-template-columns: 1fr 1ch 1fr 1ch 1fr 1ch 1fr 1ch 1fr;
+ width: 69ch;
+ background: yellow;
+ }
+</style>
+
+<div class="multicol-ref">
+ <span>
+ one two three four
+ five six seven eight
+ </span>
+ <span></span>
+ <span>
+ nineten eleven twelve
+ thirtn
+ </span>
+ <span></span>
+ <span>
+ fourtnfiftn sixtn
+ seventn eightn ninetn
+ </span>
+ <span></span>
+ <span>
+ twenty
+ hundred thousand
+ </span>
+ <span></span>
+ <span>
+ million billionx
+ trillionsopp
+ </span>
+</div>
diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.xht
@@ -1,50 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>multicolumn | column-width</title>
-<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
-<style type="text/css"><![CDATA[
-.multicol-ref {
- display: flow-root;
- width: 69ch;
- font: 3em monospace;
- background: yellow;
-}
-.multicol-ref > span {
- float: left;
- width: 13ch;
- margin-right: 1ch;
-}
-.multicol-ref > span:last-child {
- margin: 0;
-}
-]]></style>
-</head>
-
-<body>
- <p>Test passes if we have five columns with four lines in each. The final column should contain the words: million, billion, trillion.</p>
- <div class="multicol-ref">
- <span>
- one two three four
- five six seven eight
- </span>
- <span>
- nineten eleven twelve
- thirtn
- </span>
- <span>
- fourtnfiftn sixtn
- seventn eightn ninetn
- </span>
- <span>
- twenty
- hundred thousand
- </span>
- <span>
- million billion
- trillion
- </span>
- </div>
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-multicol/subpixel-column-progression.html b/testing/web-platform/tests/css/css-multicol/subpixel-column-progression.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>Element placed right after all columns (as specified by column-count)</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://issues.chromium.org/issues/467869214">
+<style>
+ body { margin:0; }
+</style>
+<div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;">
+ <div style="height:479px;"></div>
+ <div id="elm1" style="height:1px;"></div>
+</div>
+
+<div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;">
+ <div style="height:958px;"></div>
+ <div id="elm2" style="height:1px;"></div>
+</div>
+
+<div style="columns:100; column-fill:auto; gap:1.01px; width:500px; height:1px;">
+ <div style="height:99px;"></div>
+ <div id="elm3" style="margin-left:auto; width:0; height:1px;"></div>
+</div>
+
+<div style="columns:100; column-fill:auto; gap:1.01px; width:0; height:1px;">
+ <div style="height:100px;"></div>
+ <div id="elm4" style="height:1px;"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ test(()=> {
+ assert_equals(elm1.getBoundingClientRect().left, 100);
+ }, "Should be exactly to the right of the multicol container");
+
+ test(()=> {
+ assert_equals(elm2.getBoundingClientRect().left, 200);
+ }, "Should equal to two multicol container widths");
+
+ test(()=> {
+ assert_equals(elm3.getBoundingClientRect().left, 500);
+ }, "Fractional column gaps and widths");
+
+ test(()=> {
+ assert_equals(elm4.getBoundingClientRect().left, 101);
+ }, "No space for columns, only gaps");
+</script>
