From 78f3f455dca1ac01c235fe98429d65ea743d70d0 Mon Sep 17 00:00:00 2001 From: Oriol Brufau Date: Fri, 16 May 2025 12:15:16 -0700 Subject: [PATCH] layout: Fix `align-content` on stretched row flex containers (#37024) Fixes a regression from #36973, which didn't take into account that stretching flex items affects their final block size when the cross axis is the block axis. Testing: Adding new test Fixes: #37023 Signed-off-by: Oriol Brufau --- components/layout/flexbox/layout.rs | 8 +++++--- tests/wpt/meta/MANIFEST.json | 15 ++++++++++++++- ...tretched-child-in-nested-flexbox-001.html} | 0 ...stretched-child-in-nested-flexbox-002.html | 19 +++++++++++++++++++ 4 files changed, 38 insertions(+), 4 deletions(-) rename tests/wpt/tests/css/css-flexbox/{stretched-child-in-nested-flexbox.html => stretched-child-in-nested-flexbox-001.html} (100%) create mode 100644 tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-002.html diff --git a/components/layout/flexbox/layout.rs b/components/layout/flexbox/layout.rs index 80057af2b34..8fc5aa0778b 100644 --- a/components/layout/flexbox/layout.rs +++ b/components/layout/flexbox/layout.rs @@ -1929,7 +1929,11 @@ impl FlexItem<'_> { } } - let lazy_block_size = if cross_axis_is_item_block_axis { + let lazy_block_size = if !cross_axis_is_item_block_axis { + used_main_size.into() + } else if let Some(cross_size) = used_cross_size_override { + cross_size.into() + } else { // This means that an auto size with stretch alignment will behave different than // a stretch size. That's not what the spec says, but matches other browsers. // To be discussed in https://github.com/w3c/csswg-drafts/issues/11784. @@ -1946,8 +1950,6 @@ impl FlexItem<'_> { stretch_size, self.is_table(), ) - } else { - used_main_size.into() }; let layout = non_replaced.layout( diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index f428e76b966..0cab7c4aa61 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -181140,7 +181140,7 @@ {} ] ], - "stretched-child-in-nested-flexbox.html": [ + "stretched-child-in-nested-flexbox-001.html": [ "325d79e7c63f3e301c21f53f8bc97b48ae15c6b5", [ null, @@ -181153,6 +181153,19 @@ {} ] ], + "stretched-child-in-nested-flexbox-002.html": [ + "9a00b3c40a35ca6c80965d6266252489e18b665d", + [ + null, + [ + [ + "/css/reference/ref-filled-green-100px-square.xht", + "==" + ] + ], + {} + ] + ], "stretching-orthogonal-flows.html": [ "acaa787faf657b76a5b213fb9203088d5d28f4c4", [ diff --git a/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html b/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-001.html similarity index 100% rename from tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html rename to tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-001.html diff --git a/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-002.html b/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-002.html new file mode 100644 index 00000000000..9a00b3c40a3 --- /dev/null +++ b/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-002.html @@ -0,0 +1,19 @@ + + + +css-flexbox: Tests nested flex item with `align-items: stretch` + + + + + + +

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

+
+
+
+
+
+
+ +