diff options
| -rw-r--r-- | components/layout/flexbox/layout.rs | 8 | ||||
| -rw-r--r-- | tests/wpt/meta/MANIFEST.json | 15 | ||||
| -rw-r--r-- | tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-001.html (renamed from tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html) | 0 | ||||
| -rw-r--r-- | tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox-002.html | 19 |
4 files changed, 38 insertions, 4 deletions
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 index 325d79e7c63..325d79e7c63 100644 --- 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 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 @@ +<!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> |