Fix min/max-content block size of replaced element (#34284)

The min-content and max-content sizes on the block axis depend on the
inline size. But when computing the SizeConstraint corresponding to the
inline axis, we were resolving the preferred inline size ignoring
intrinsic keywords. Now we will only ignore `auto`.

Also, this patch refactors the logic to compute the min-content and
max-content block sizes after fully resolving the inline size.
This avoids having to resolve the inline sizing properties twice.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2024-11-18 23:04:57 +01:00 committed by GitHub
parent 696c591d81
commit 8c689aac67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 67 additions and 28 deletions

View file

@ -572214,6 +572214,13 @@
{}
]
],
"replaced-element-044.tentative.html": [
"58a4b9b76ff32010a82c49d1e5d42090d794a081",
[
null,
{}
]
],
"sign-function-aspect-ratio.html": [
"e5ba1a8321a42918cccee4ee164527fa25078e4f",
[

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS aspect-ratio: replaced element transferring intrinsic sizes</title>
<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/11236">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<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>
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>
<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"
data-expected-width="50" data-expected-height="50"></canvas>
<canvas width="50" height="25" style="width: max-content"
data-expected-width="50" data-expected-height="50"></canvas>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("canvas");
</script>