mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
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:
parent
c19c7b2ed8
commit
202cac900d
7 changed files with 94 additions and 67 deletions
13
tests/wpt/meta/MANIFEST.json
vendored
13
tests/wpt/meta/MANIFEST.json
vendored
|
@ -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",
|
||||
[
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
[quirks-auto-block-size-with-percentage-item.html]
|
||||
[#container 1]
|
||||
expected: FAIL
|
17
tests/wpt/tests/css/css-flexbox/stretch-requires-computed-auto-size.html
vendored
Normal file
17
tests/wpt/tests/css/css-flexbox/stretch-requires-computed-auto-size.html
vendored
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue