From 46dbe4ce320eb99e851dd422f624615e18c39e15 Mon Sep 17 00:00:00 2001 From: Oriol Brufau Date: Thu, 29 Aug 2024 13:24:23 +0200 Subject: [PATCH] Obey min and max cross sizes of flex items (#33242) When laying out the contents of a flex item, we used to resolve their cross-axis percentages against the preferred cross size of the item. Now we will take the min and max cross sizes into account. Signed-off-by: Oriol Brufau Co-authored-by: Martin Robinson --- components/layout_2020/flexbox/layout.rs | 7 ++++- tests/wpt/meta/MANIFEST.json | 13 ++++++++ .../percentage-max-height-005.html | 30 +++++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs index 7179885ff46..3247a753c3a 100644 --- a/components/layout_2020/flexbox/layout.rs +++ b/components/layout_2020/flexbox/layout.rs @@ -1626,7 +1626,12 @@ impl FlexItem<'_> { IndependentFormattingContext::NonReplaced(non_replaced) => { let cross_size = match used_cross_size_override { Some(s) => AuOrAuto::LengthPercentage(s), - None => self.content_box_size.cross.map(|t| t), + None => self.content_box_size.cross.map(|cross_size| { + cross_size.clamp_between_extremums( + self.content_min_size.cross, + self.content_max_size.cross, + ) + }), }; let item_writing_mode = non_replaced.style.effective_writing_mode(); diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index 7f7a3ed28b2..71c9ed2611e 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -176387,6 +176387,19 @@ {} ] ], + "percentage-max-height-005.html": [ + "3ca28b3ec1ecc6a204fb1177e1452ec4ce7a5c1c", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], "percentage-padding-002.html": [ "9eaaff013ef26f557f5f883fea76b81b6031769f", [ diff --git a/tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html b/tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html new file mode 100644 index 00000000000..3ca28b3ec1e --- /dev/null +++ b/tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html @@ -0,0 +1,30 @@ + +CSS Flexbox Test: flex item with max cross size + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+