Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

layout: Fix align-content on stretched row flex containers (#37024)

Browse source 
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 <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-05-16 12:15:16 -07:00 • committed by GitHub
parent c1a70f4eb2
commit 78f3f455dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 38 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/layout/flexbox/layout.rs
View file

@ -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 // 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. // 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. // To be discussed in https://github.com/w3c/csswg-drafts/issues/11784.
@ -1946,8 +1950,6 @@ impl FlexItem<'_> {
stretch_size, stretch_size,
self.is_table(), self.is_table(),
) )
} else {
used_main_size.into()
}; };
let layout = non_replaced.layout( let layout = non_replaced.layout(

15
tests/wpt/meta/MANIFEST.json vendored
View file

@ -181140,7 +181140,7 @@
{} {}
] ]
], ],
"stretched-child-in-nested-flexbox.html": [ "stretched-child-in-nested-flexbox-001.html": [
"325d79e7c63f3e301c21f53f8bc97b48ae15c6b5", "325d79e7c63f3e301c21f53f8bc97b48ae15c6b5",
[ [
null, 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": [ "stretching-orthogonal-flows.html": [
"acaa787faf657b76a5b213fb9203088d5d28f4c4", "acaa787faf657b76a5b213fb9203088d5d28f4c4",
[ [

0
tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html → tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-001.html vendored
View file

19
tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-002.html vendored Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
<title>css-flexbox: Tests nested flex item with `align-items: stretch`</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This checks that a stretched flex item in a multi-line nested flexbox streches to the size of the parent flex container's line.">
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex;">
<div style="width: 50px; height: 100px; background: green;"></div>
<div style="display: flex; flex-wrap: wrap">
<div style="background: green; width: 50px;"></div>
</div>
</div>
</body>
</html>