mirror of
https://github.com/servo/servo.git
synced 2025-07-23 15:23:42 +01:00
layout: Support stretch
cross size for flex base size (#35663)
The computation of the flex base size may involve transferring a definite cross size into the main axis through the aspect ratio. We were only considering numeric sizes as definite, but `stretch` can also be definite. Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
parent
8d8f0f49cf
commit
03e953e22c
4 changed files with 93 additions and 5 deletions
|
@ -2687,15 +2687,17 @@ impl FlexItemBox {
|
||||||
// > If a single-line flex container has a definite cross size, the automatic preferred
|
// > If a single-line flex container has a definite cross size, the automatic preferred
|
||||||
// > outer cross size of any stretched flex items is the flex container’s inner cross size
|
// > outer cross size of any stretched flex items is the flex container’s inner cross size
|
||||||
// > (clamped to the flex item’s min and max cross size) and is considered definite.
|
// > (clamped to the flex item’s min and max cross size) and is considered definite.
|
||||||
|
let cross_stretch_size = container_definite_inner_size
|
||||||
|
.cross
|
||||||
|
.map(|v| v - pbm_auto_is_zero.cross);
|
||||||
let cross_size = if content_box_size.cross.is_initial() &&
|
let cross_size = if content_box_size.cross.is_initial() &&
|
||||||
item_with_auto_cross_size_stretches_to_container_size
|
item_with_auto_cross_size_stretches_to_container_size
|
||||||
{
|
{
|
||||||
container_definite_inner_size
|
cross_stretch_size
|
||||||
.cross
|
|
||||||
.map(|v| v - pbm_auto_is_zero.cross)
|
|
||||||
} else {
|
} else {
|
||||||
// TODO(#32853): handle size keywords.
|
content_box_size
|
||||||
content_box_size.cross.to_numeric()
|
.cross
|
||||||
|
.maybe_resolve_extrinsic(cross_stretch_size)
|
||||||
};
|
};
|
||||||
if let (Some(ratio), Some(cross_size)) = (preferred_aspect_ratio, cross_size) {
|
if let (Some(ratio), Some(cross_size)) = (preferred_aspect_ratio, cross_size) {
|
||||||
let cross_size = cross_size.clamp_between_extremums(
|
let cross_size = cross_size.clamp_between_extremums(
|
||||||
|
|
26
tests/wpt/meta/MANIFEST.json
vendored
26
tests/wpt/meta/MANIFEST.json
vendored
|
@ -246713,6 +246713,32 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"flexbox-flex-base-size-001.html": [
|
||||||
|
"a7a1aef192d8e95a93ecffb9bbe9834eb7ecbca7",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/css/reference/ref-filled-green-200px-square.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"flexbox-flex-base-size-002.html": [
|
||||||
|
"66a1874f933add4ce0e9d0bd5939d46812934ee0",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/css/reference/ref-filled-green-200px-square.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
"min-width-1.html": [
|
"min-width-1.html": [
|
||||||
"a1a39073e88d4626be7c469611e3593415849e7a",
|
"a1a39073e88d4626be7c469611e3593415849e7a",
|
||||||
[
|
[
|
||||||
|
|
30
tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-001.html
vendored
Normal file
30
tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-001.html
vendored
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Flex base size of flex item with stretch cross size</title>
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-base-size">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||||
|
<meta assert="A definite `stretch` cross size can be transferred through the
|
||||||
|
aspect ratio when computing the flex base size of a flex item.">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: stretch;
|
||||||
|
align-self: start;
|
||||||
|
min-height: 0;
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<div class="flex">
|
||||||
|
<canvas width="100" height="100"></canvas>
|
||||||
|
</div>
|
30
tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-002.html
vendored
Normal file
30
tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-002.html
vendored
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Flex base size of flex item with stretch cross size</title>
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-base-size">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||||
|
<meta assert="A definite `stretch` cross size can be transferred through the
|
||||||
|
aspect ratio when computing the flex base size of a flex item.">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
height: stretch;
|
||||||
|
align-self: start;
|
||||||
|
min-width: 0;
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<div class="flex">
|
||||||
|
<canvas width="100" height="100"></canvas>
|
||||||
|
</div>
|
Loading…
Add table
Add a link
Reference in a new issue