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

layout: Use definite cross size to compute flex base size (#35688)

Browse source 
An intrinsic flex base size depends on the contents, which may depend on
the cross size through an aspect ratio. We were only taking this into
account if the preferred cross size was numeric, but `auto` or `stretch`
can also be definite.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-02-27 14:54:44 +01:00 • committed by GitHub
parent 64e227005f
commit 1966ab182f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 110 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -576237,6 +576237,13 @@
{}
]
],
"flex-basis-013.html": [
"c11624a47eb07f9b46affbb735cb707c6aec600d",
[
null,
{}
]
],
"flex-basis-intrinsics-001.html": [
"164abd82e5fb6c2dd140347287613888f23b2599",
[

2
tests/wpt/meta/css/css-sizing/intrinsic-percent-replaced-026.html.ini vendored
View file

@ -1,2 +0,0 @@
[intrinsic-percent-replaced-026.html]
expected: FAIL

80
tests/wpt/tests/css/css-flexbox/flex-basis-013.html vendored Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: flex base size that depends on cross size</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-base-size">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11791">
<meta name="assert" content="The flex item has a definite cross size of 100px
because it stretches. So the canvas can resolve its percentage against that,
and thus the intrinsic flex basis results in a flex base size of 100px.">
<style>
.container {
display: inline-flex;
vertical-align: top;
width: 50px;
height: 50px;
background: red;
margin: 5px;
}
.container.column {
flex-direction: column;
}
.item {
min-width: 0;
min-height: 0;
background: green;
}
.container.column .stretch-size {
width: -moz-available;
width: -webkit-fill-available;
width: stretch;
}
.container.row .stretch-size {
height: -moz-available;
height: -webkit-fill-available;
height: stretch;
}
.container.column canvas {
display: block;
width: 100%;
}
.container.row canvas {
display: block;
height: 100%;
}
</style>
<div id="tests"></div>
<div id="log"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
let canvas = document.createElement("canvas");
canvas.width = canvas.height = "5";
let item = document.createElement("div");
item.appendChild(canvas);
item.dataset.expectedWidth = item.dataset.expectedHeight = "50";
let container = document.createElement("div");
container.appendChild(item);
let tests = document.getElementById("tests");
for (let direction of ["row", "column"]) {
container.className = "container " + direction;
for (let stretchSize of [false, true]) {
item.className = "item" + (stretchSize ? " stretch-size" : "");
for (let flexBasis of ["auto", "content", "min-content", "fit-content", "max-content"]) {
item.style.flexBasis = flexBasis;
tests.appendChild(container.cloneNode(true));
}
}
}
checkLayout(".container");
</script>