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

layout: Let stretch on flex item cross size stretch to the line (#38526)

Browse source 
We were instead stretching to the containing block, which implied that
the behaviors of a `stretch` size and `stretch` alignment weren't
consistent.

As resolved by the CSSWG, the behavior will now be:
 - If the cross size of the line is known, stretch to the line.
 - Otherwise, stretch to the containing block.

See https://github.com/w3c/csswg-drafts/issues/11784

This aligns us with Blink, which has already shipped this new behavior.

Testing: Improves existing WPT and adds a new test.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-08-08 08:45:30 -07:00 • committed by GitHub
parent 9866ca7e59
commit 93c9fc14f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 164 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -172605,6 +172605,19 @@
{}
]
],
"align-self-016.html": [
"4b2bc6d2efc9f4b1c68ad33961ec97b5a7e7405b",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"alignment": {
"flex-align-baseline-column-rtl-direction.html": [
"3be57a2b34bf4c68f0041b874fbfdcecd797a20a",

27
tests/wpt/meta/css/css-sizing/keyword-sizes-on-flex-item-001.html.ini vendored
View file

@ -1,27 +0,0 @@
[keyword-sizes-on-flex-item-001.html]
[.test 57]
expected: FAIL
[.test 58]
expected: FAIL
[.test 59]
expected: FAIL
[.test 60]
expected: FAIL
[.test 61]
expected: FAIL
[.test 62]
expected: FAIL
[.test 63]
expected: FAIL
[.test 64]
expected: FAIL
[.test 65]
expected: FAIL

3
tests/wpt/meta/css/css-sizing/stretch/flex-line-002.html.ini vendored
View file

@ -1,3 +0,0 @@
[flex-line-002.html]
[.stretch 3]
expected: FAIL

3
tests/wpt/meta/css/css-sizing/stretch/flex-line-003.html.ini vendored
View file

@ -1,3 +0,0 @@
[flex-line-003.html]
[.stretch 3]
expected: FAIL

3
tests/wpt/meta/css/css-sizing/stretch/flex-line-004.html.ini vendored
View file

@ -1,3 +0,0 @@
[flex-line-004.html]
[.stretch 3]
expected: FAIL

3
tests/wpt/meta/css/css-sizing/stretch/flex-line-005.html.ini vendored
View file

@ -1,3 +0,0 @@
[flex-line-005.html]
[.stretch 1]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/stretch/stretch-block-size-001.html.ini vendored
View file

@ -4,9 +4,3 @@
[[data-expected-height\] 37]
expected: FAIL
[[data-expected-height\] 21]
expected: FAIL
[[data-expected-height\] 44]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/stretch/stretch-inline-size-001.html.ini vendored
View file

@ -4,9 +4,3 @@
[[data-expected-width\] 37]
expected: FAIL
[[data-expected-width\] 21]
expected: FAIL
[[data-expected-width\] 44]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/stretch/stretch-max-block-size-001.html.ini vendored
View file

@ -10,9 +10,3 @@
[[data-expected-height\]:not([skip-second-pass\]) 45]
expected: FAIL
[[data-expected-height\] 21]
expected: FAIL
[[data-expected-height\]:not([skip-second-pass\]) 44]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/stretch/stretch-max-inline-size-001.html.ini vendored
View file

@ -10,9 +10,3 @@
[[data-expected-width\]:not([skip-second-pass\]) 45]
expected: FAIL
[[data-expected-width\] 21]
expected: FAIL
[[data-expected-width\]:not([skip-second-pass\]) 44]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/stretch/stretch-min-block-size-001.html.ini vendored
View file

@ -16,9 +16,3 @@
[[data-expected-height\] 46]
expected: FAIL
[[data-expected-height\] 21]
expected: FAIL
[[data-expected-height\] 44]
expected: FAIL

6
tests/wpt/meta/css/css-sizing/stretch/stretch-min-inline-size-001.html.ini vendored
View file

@ -16,9 +16,3 @@
[[data-expected-width\] 46]
expected: FAIL
[[data-expected-width\] 21]
expected: FAIL
[[data-expected-width\] 44]
expected: FAIL

46
tests/wpt/tests/css/css-flexbox/align-self-016.html vendored Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox: shrink-to-fit item in multi-line column container</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11784">
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
<meta assert="
#item has `align-self: start`, which sizes it as `fit-content`.
Therefore, we initially shrink-to-fit it into the container (100px),
thus getting a cross size of 100px and a main size of 200px.
However, we have another item which is 200px wide, so the flex line
grows to that size.
Once we know the final cross size of the line, we shrink-to-fit #item
into the line (200px), thus getting a final cross size of 200px.
Now both floats fit side by side into these 200px, so vertically they
only need 100px, but the main size of #item remains as 200px.
">
<style>
#container {
display: flex;
flex-flow: column wrap;
width: 100px;
border-right: 100px solid red;
}
#item{
align-self: start;
background: linear-gradient(to bottom, red 50%, green 50%);
}
.float {
float: left;
width: 100px;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="item">
<div class="float"></div>
<div class="float"></div>
</div>
<div style="width: 200px"></div>
</div>