layout: Restrict stretch alignment to flex items with computed auto size (#36288)

We were allowing `align-self: stretch` to stretch flex items whose cross
size behaves as `auto`, including cyclic percentages.

However, https://github.com/w3c/csswg-drafts/issues/4525 resolved that
stretching should only happen when the cross size computes to `auto`.

So this patch exposes this information in `ContentBoxSizesAndPBM`, and
refactors the flexbox stretching logic.

Fixes: #36285

Testing:
 - `/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html`
 - `/css/css-flexbox/stretch-requires-computed-auto-size.html`

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-04-04 03:15:40 -07:00 committed by GitHub
parent c19c7b2ed8
commit 202cac900d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 94 additions and 67 deletions

View file

@ -180356,6 +180356,19 @@
{}
]
],
"stretch-requires-computed-auto-size.html": [
"01bc822af2a20636efe2d3a281ddaa41f5898906",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"stretched-child-in-nested-flexbox.html": [
"325d79e7c63f3e301c21f53f8bc97b48ae15c6b5",
[

View file

@ -1,3 +0,0 @@
[quirks-auto-block-size-with-percentage-item.html]
[#container 1]
expected: FAIL

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Stretch alignment with percentage that behaves as auto</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-align-items-stretch">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
Stretch alignment requires a computed cross size of `auto`.
So a cyclic percentage that only behaves as `auto` doesn't stretch.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex">
<div style="width: 100px; height: 100px; background: green"></div>
<div style="width: 100px; height: 50%; background: red"></div>
</div>