Bug 1931955 [wpt PR 49234] - Fix min/max-content block size of replaced element, a=testonly

marco-c · marco-c · commit 9610e5587e83 · 2024-11-26T22:56:55.000Z
Automatic update from web-platform-tests
Fix min/max-content block size of replaced element

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 &lt;obrufauigalia.com&gt;

--

wpt-commits: f1eaa58ed9d3e0a9d875387422878f3640c79f97
wpt-pr: 49234

UltraBlame original commit: 7726ba113e468e8e245d5eaff2fb6582baeca873
diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-044.tentative.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-044.tentative.html
@@ -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>
