commit 71e95460481aa5596059e56aa631e8cb37c93d1f
parent 769cb2974e826e837439e350e0e9f94bc8887e03
Author: Oriol Brufau <obrufau@igalia.com>
Date: Fri, 19 Dec 2025 09:31:54 +0000
Bug 2006960 [wpt PR 56861] - layout: Obey min/max constraints when min/max violations sum to zero when flexing items, a=testonly
Automatic update from web-platform-tests
layout: Fix logic for min/max violations when flexing flex items
The old logic had the problem that, if the total violation was zero, we
would just freeze all items without clamping their target main size
between the min and max sizes.
This patch refactors the logic to make it simpler.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
--
wpt-commits: 62263b789bce82b4dd0e6250a2c8b84ec82ce446
wpt-pr: 56861
Diffstat:
1 file changed, 43 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-flexbox/total-min-max-violation-zero.html b/testing/web-platform/tests/css/css-flexbox/total-min-max-violation-zero.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Flexbox: total min/max violation of zero when flexing items</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flexibility">
+<link rel="help" href="https://github.com/servo/servo/issues/41289">
+<meta name="assert" content="
+ Both targets get their target main size initialized to 300px.
+ Distributing the negative remaining free space sets them to 150px.
+ The 1st item has a min-width of 250px, that's a violation of 100px.
+ The 2nd item has a max-width of 50px, that's a violation of -100px.
+ Therefore, the total violation is 0px, thus freezing all items.
+ But the min/max constraints still need to apply.
+ So the final main sizes are 250px and 50px, respectively.
+">
+
+<style>
+#flex {
+ display: flex;
+ width: 300px;
+ height: 300px;
+ border: solid;
+}
+.item {
+ flex: 0 1 300px;
+ min-width: 0px;
+}
+</style>
+
+<div id="flex">
+ <div class="item" style="min-width: 250px; background: cyan"
+ data-expected-width="250"></div>
+ <div class="item" style="max-width: 50px; background: orange"
+ data-expected-width="50"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+checkLayout(".item")
+</script>
