commit b76583147af3ed9628bc9386e7ef8df4f803391f
parent c852120556b72b8d3a0e07b73c6f4bd7cdb28460
Author: Ian Kilpatrick <ikilpatrick@chromium.org>
Date: Wed, 19 Nov 2025 04:57:02 +0000
Bug 2000900 [wpt PR 56095] - [flex] Use LayoutUnitDiffuser in flex for content alignment., a=testonly
Automatic update from web-platform-tests
[flex] Use LayoutUnitDiffuser in flex for content alignment.
As above, this smears the remainer over the gaps between items.
Bug: 40437604
Change-Id: Ia4ea11ec2f7a5342e1676bd2e0ca92f39b1fb547
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7163999
Reviewed-by: David Grogan <dgrogan@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1546606}
--
wpt-commits: 6a8e3d7026356d8c9239ed9d29b55c3a8ec63b73
wpt-pr: 56095
Diffstat:
2 files changed, 76 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-rounding.html b/testing/web-platform/tests/css/css-flexbox/align-content-rounding.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://crbug.com/40437604">
+<style>
+#flex {
+ display: flex;
+ flex-wrap: wrap;
+ width: 10px;
+ height: 40px;
+ align-content: space-between;
+ outline: solid 1px;
+}
+#flex > div {
+ width: 10px;
+ height: 5px;
+ background: lime;
+}
+</style>
+<div id="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div id="last"></div>
+</div>
+<script>
+test(function() {
+ /* Increase the flexbox by 0.1px increments. */
+ for (let i = 0; i < 10; i++) {
+ const height = (40 + i/10) + 'px';
+ flex.style.height = height;
+ assert_equals(last.getBoundingClientRect().bottom, flex.getBoundingClientRect().bottom, height);
+ }
+}, 'The last item should match the end edge.');
+</script>
diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-rounding.html b/testing/web-platform/tests/css/css-flexbox/justify-content-rounding.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://crbug.com/40437604">
+<style>
+#flex {
+ display: flex;
+ width: 40px;
+ justify-content: space-between;
+ outline: solid 1px;
+}
+#flex > div {
+ width: 5px;
+ height: 10px;
+ background: lime;
+}
+</style>
+<div id="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div id="last"></div>
+</div>
+<script>
+test(function() {
+ /* Increase the flexbox by 0.1px increments. */
+ for (let i = 0; i < 10; i++) {
+ const width = (40 + i/10) + 'px';
+ flex.style.width = width;
+ assert_equals(last.getBoundingClientRect().right, flex.getBoundingClientRect().right, width);
+ }
+}, 'The last item should match the end edge.');
+</script>
