layout: Remove special height logic of replaced element with auto width (#35275)

When computing the intrinsic block size of a replaced element with a
computed preferred inline size of `auto`, instead of transferring the
final inline size through the aspect ratio, we were only transferring
the min and max constraints.

We did this to match other browsers, but Ian Kilpatrick agreed that this
is a bug and plans to change Blink.

CSSWG issue: https://github.com/w3c/csswg-drafts/issues/11236

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-03-13 01:57:26 +01:00 committed by GitHub
parent e2daeeaceb
commit 98816b753c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 80 additions and 114 deletions

View file

@ -979,28 +979,6 @@ impl Sizes {
get_content_size: impl FnOnce() -> ContentSizes,
is_table: bool,
) -> Au {
let (preferred, min, max) = self.resolve_each(
axis,
automatic_size,
automatic_minimum_size,
stretch_size,
get_content_size,
is_table,
);
preferred.clamp_between_extremums(min, max)
}
/// Resolves each of the three sizes into a numerical value, separately.
#[inline]
pub(crate) fn resolve_each(
&self,
axis: Direction,
automatic_size: Size<Au>,
automatic_minimum_size: Au,
stretch_size: Option<Au>,
get_content_size: impl FnOnce() -> ContentSizes,
is_table: bool,
) -> (Au, Au, Option<Au>) {
// The provided `get_content_size` is a FnOnce but we may need its result multiple times.
// A LazyCell will only invoke it once if needed, and then reuse the result.
let content_size = LazyCell::new(get_content_size);
@ -1010,7 +988,7 @@ impl Sizes {
// but it can be a smaller amount if there are collapsed rows.
// Therefore, disregard sizing properties and just defer to the intrinsic size.
// This is being discussed in https://github.com/w3c/csswg-drafts/issues/11408
return (content_size.max_content, content_size.min_content, None);
return content_size.max_content;
}
let preferred =
@ -1028,7 +1006,7 @@ impl Sizes {
min.max_assign(content_size.min_content);
}
let max = self.max.resolve_for_max(stretch_size, &content_size);
(preferred, min, max)
preferred.clamp_between_extremums(min, max)
}
/// Tries to extrinsically resolve the three sizes into a single [`SizeConstraint`].

View file

@ -535,7 +535,7 @@ impl ReplacedContents {
)
.into()
};
let (preferred_inline, min_inline, max_inline) = sizes.inline.resolve_each(
let inline_size = sizes.inline.resolve(
Direction::Inline,
automatic_size.inline,
Au::zero(),
@ -543,19 +543,10 @@ impl ReplacedContents {
get_inline_content_size,
false, /* is_table */
);
let inline_size = preferred_inline.clamp_between_extremums(min_inline, max_inline);
// Now we can compute the block size, using the inline size from above.
let block_content_size = LazyCell::new(|| -> ContentSizes {
let get_inline_size = || {
if sizes.inline.preferred.is_initial() {
// TODO: do we really need to special-case `auto`?
// https://github.com/w3c/csswg-drafts/issues/11236
SizeConstraint::MinMax(min_inline, max_inline)
} else {
SizeConstraint::Definite(inline_size)
}
};
let get_inline_size = || SizeConstraint::Definite(inline_size);
self.content_size(
Direction::Block,
preferred_aspect_ratio,

View file

@ -594924,14 +594924,14 @@
]
],
"replaced-element-043.html": [
"9ad35c1a316dfdd5163e63f671f58f3c85892100",
"01b23ffbf20afacddd12825b0c655b5fabf3e2be",
[
null,
{}
]
],
"replaced-element-044.tentative.html": [
"58a4b9b76ff32010a82c49d1e5d42090d794a081",
"replaced-element-044.html": [
"10bbf297d47028f1660c3b2345a32895e92b6cb7",
[
null,
{}
@ -595281,7 +595281,7 @@
]
],
"keyword-sizes-on-replaced-element.html": [
"497f87ca5fca68e6423c6aba94a34d3de938c1b1",
"39b2e591d5396587377dbdcd3ff78529157e0de0",
[
null,
{}
@ -716308,7 +716308,7 @@
]
],
"video-intrinsic-width-height.html": [
"c66a79344cd9deafe42772b05ee2e6c6cc3392d2",
"047c832da35246278ce58a255037c64bb1d8b723",
[
null,
{}

View file

@ -10,6 +10,3 @@
[.item 7]
expected: FAIL
[.item 10]
expected: FAIL

View file

@ -10,6 +10,3 @@
[.item 7]
expected: FAIL
[.item 10]
expected: FAIL

View file

@ -4,6 +4,7 @@
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6071#issuecomment-2243986313">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11236">
<meta name="assert" content="
Min, max and preferred sizing constraints are transferred to the other axis via the preferred aspect ratio.
In case of conflict,
@ -62,11 +63,11 @@ canvas {
<td><code>min-width</code></td>
<td>
<canvas width="15" height="15" style="min-width: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 10px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 20px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 30px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 40px"
@ -79,11 +80,11 @@ canvas {
<td><code>min-height</code></td>
<td>
<canvas width="15" height="15" style="min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-height: 20px"
@ -100,13 +101,13 @@ canvas {
<canvas width="15" height="15" style="max-width: 10px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 20px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 30px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 40px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 50px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
</td>
</tr>
<tr>
@ -117,24 +118,24 @@ canvas {
<canvas width="15" height="15" style="max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
</td>
</tr>
<tr>
<td><code>min-width</code>, <code>min-height</code></td>
<td>
<canvas width="15" height="15" style="min-width: 0px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 0px; min-height: 20px"
@ -143,11 +144,11 @@ canvas {
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 10px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 10px; min-height: 20px"
@ -156,11 +157,11 @@ canvas {
data-expected-width="50" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 20px; min-height: 0px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 5px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="min-width: 20px; min-height: 20px"
@ -216,26 +217,26 @@ canvas {
<canvas width="15" height="15" style="min-width: 0px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 0px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 10px; max-height: 0px"
data-expected-width="10" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="min-width: 10px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 20px; max-height: 0px"
data-expected-width="20" data-expected-height="0"></canvas>
@ -244,11 +245,11 @@ canvas {
<canvas width="15" height="15" style="min-width: 20px; max-height: 10px"
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 15px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 20px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="min-width: 20px; max-height: 25px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<br>
<canvas width="15" height="15" style="min-width: 30px; max-height: 0px"
data-expected-width="30" data-expected-height="0"></canvas>
@ -320,9 +321,9 @@ canvas {
data-expected-width="10" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 20px; min-height: 0px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 5px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 10px"
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 20px; min-height: 15px"
@ -333,11 +334,11 @@ canvas {
data-expected-width="20" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 30px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 30px; min-height: 20px"
@ -346,11 +347,11 @@ canvas {
data-expected-width="30" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 40px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 40px; min-height: 20px"
@ -359,11 +360,11 @@ canvas {
data-expected-width="40" data-expected-height="25"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 50px; min-height: 0px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 5px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 10px"
data-expected-width="20" data-expected-height="15"></canvas>
data-expected-width="20" data-expected-height="10"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 15px"
data-expected-width="30" data-expected-height="15"></canvas>
<canvas width="15" height="15" style="max-width: 50px; min-height: 20px"
@ -406,52 +407,52 @@ canvas {
<canvas width="15" height="15" style="max-width: 20px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 15px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 20px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 20px; max-height: 25px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 30px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 30px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 40px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 40px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<br>
<canvas width="15" height="15" style="max-width: 50px; max-height: 0px"
data-expected-width="0" data-expected-height="0"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 5px"
data-expected-width="10" data-expected-height="5"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 10px"
data-expected-width="15" data-expected-height="10"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 15px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 20px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
<canvas width="15" height="15" style="max-width: 50px; max-height: 25px"
data-expected-width="15" data-expected-height="15"></canvas>
data-expected-width="15" data-expected-height="8"></canvas>
</td>
</tr>
</table>

View file

@ -8,8 +8,6 @@
<meta name="assert" content="
The inline size resulting from an intrinsic keyword is transferred
to the block axis through aspect ratio.
Except if the inline size is `auto`, then we ignore the ratio and
just use the natural block size instead.
">
<style>
@ -17,7 +15,7 @@ canvas { aspect-ratio: 1; height: auto; background: cyan; }
</style>
<canvas width="50" height="25" style="width: auto"
data-expected-width="50" data-expected-height="25"></canvas>
data-expected-width="50" data-expected-height="50"></canvas>
<canvas width="50" height="25" style="width: min-content"
data-expected-width="50" data-expected-height="50"></canvas>
<canvas width="50" height="25" style="width: fit-content"

View file

@ -201,14 +201,14 @@
<canvas width="100" height="100" class="test height" style="height: fit-content"
data-expected-width="110" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test min-height" style="min-height: fit-content"
data-expected-width="10" data-expected-height="110"></canvas>
data-expected-width="10" data-expected-height="10"></canvas>
<canvas width="100" height="100" class="test max-height" style="max-height: fit-content"
data-expected-width="510" data-expected-height="110"></canvas>
data-expected-width="510" data-expected-height="510"></canvas>
<canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content"
data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content"
data-expected-width="60" data-expected-height="110"></canvas>
data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content"
data-expected-width="60" data-expected-height="60"></canvas>
@ -217,7 +217,7 @@
<canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content"
data-expected-width="160" data-expected-height="160"></canvas>
<canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content"
data-expected-width="160" data-expected-height="110"></canvas>
data-expected-width="160" data-expected-height="160"></canvas>
</div>
<script src="/resources/testharness.js"></script>

View file

@ -26,6 +26,10 @@
verify that width/height does not influence intrinsic ratio -->
<video title="both width/height attributes and style"
data-expected-width="300" data-expected-height="150"
width="100" height="100" style="width: auto; height: auto; aspect-ratio: auto"></video>
<!-- Same, but now keeping the `aspect-ratio` presentational hint -->
<video title="both width/height attributes and style keeping aspect-ratio"
data-expected-width="300" data-expected-height="300"
width="100" height="100" style="width: auto; height: auto"></video>
<script>
Array.prototype.forEach.call(document.querySelectorAll('video'), function(video)