Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-14 01:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Fix caching of streching flex items in row flex (#34162)

Browse source 
When a flex item stretches in the cross axis in a row flex, the flex
container layout should depend on block constraints. In this case the
cross axis is the block axis (assuming horizontal writing modes --
vertical are not yet supported). This changes fixes an issue where the
cached layout was used in this case when stretching should trigger a new
layout.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-11-08 17:59:23 +01:00 • committed by GitHub
parent e366d253dc
commit f4cc20f7ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -177861,6 +177861,19 @@
{}
]
],
"stretched-child-in-nested-flexbox.html": [
"325d79e7c63f3e301c21f53f8bc97b48ae15c6b5",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"stretching-orthogonal-flows.html": [
"acaa787faf657b76a5b213fb9203088d5d28f4c4",
[

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

@ -0,0 +1,18 @@
<!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="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 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;">
<div style="background: green; width: 50px;"></div>
</div>
</div>
</body>
</html>