mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
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:
parent
e2daeeaceb
commit
98816b753c
9 changed files with 80 additions and 114 deletions
|
@ -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`].
|
||||
|
|
|
@ -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,
|
||||
|
|
10
tests/wpt/meta/MANIFEST.json
vendored
10
tests/wpt/meta/MANIFEST.json
vendored
|
@ -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,
|
||||
{}
|
||||
|
|
|
@ -10,6 +10,3 @@
|
|||
|
||||
[.item 7]
|
||||
expected: FAIL
|
||||
|
||||
[.item 10]
|
||||
expected: FAIL
|
||||
|
|
|
@ -10,6 +10,3 @@
|
|||
|
||||
[.item 7]
|
||||
expected: FAIL
|
||||
|
||||
[.item 10]
|
||||
expected: FAIL
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue