commit a0d9a5cac52be847d8e4d09b0c6940d26a36630a
parent 704b59258de854f1d297991bff730fabbcbfd2a1
Author: Ian Kilpatrick <ikilpatrick@chromium.org>
Date: Wed, 12 Nov 2025 08:51:42 +0000
Bug 1999532 [wpt PR 55979] - [flex] Avoid overflow of flexbox with non-zero flex-factors., a=testonly
Automatic update from web-platform-tests
[flex] Avoid overflow of flexbox with non-zero flex-factors.
Lets say we have three-items with flex-factors of A, B, C.
Previously in flexbox we divided up the free-space within LineFlexer
(effectively) by performing:
- A/(A+B+C)
- B/(A+B+C)
- C/(A+B+C)
This approach can lead to overflow/underflow of the flexing which isn't
ideal.
Instead we can iteratively reduce the free-space within the loop, and
multiply by the what share each item should receive of the *remaining*
free-space. E.g.
- C/(A+B+C)
- B/(A+B)
- A/(A)
This means that there isn't any overflow/underflow of the free-space.
Fixed: 40804774
Change-Id: I1c8e311c6e80deebd3735eae439a71e720877545
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7139011
Auto-Submit: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1543117}
--
wpt-commits: 23be5f0801ec37495a4c3136159450cf083783a8
wpt-pr: 55979
Diffstat:
1 file changed, 28 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-flexbox/flex-rounding.html b/testing/web-platform/tests/css/css-flexbox/flex-rounding.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="help" href="https://issues.chromium.org/issues/40804774">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+body { margin: 0; }
+#flex {
+ display: flex;
+ width: 55px;
+}
+#flex > div {
+ flex-grow: 1;
+}
+</style>
+<div id="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div id="last"></div>
+</div>
+<script>
+test(function() {
+ assert_true(last.getBoundingClientRect().right <= flex.getBoundingClientRect().right);
+}, 'The last item shouldn\'t overflow the flexbox.');
+</script>
