Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 12:51:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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 <obrufau@igalia.com>

--

wpt-commits: f1eaa58ed9d3e0a9d875387422878f3640c79f97
wpt-pr: 49234
This commit is contained in:
Oriol Brufau 2024-11-19 09:52:10 +00:00 committed by moz-wptsync-bot
parent ff3520f23d
commit b57605dbb1
1 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-044.tentative.html Normal file
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>