Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 02:15:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Treat % as 0 for the min-content contribution of replaced elements (#32103)

Browse source 
`width` and `max-width` typically treat expressions with percentages as
their initial value, but for the min-content contribution of replaced
elements, they should instead be treated as zero.

https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-01-06 06:43:30 -08:00 • committed by GitHub
parent dd9164f49a
commit 1c321a17ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 87 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/meta/MANIFEST.json vendored
View file

@ -581052,6 +581052,13 @@
{}
]
],
"intrinsic-percent-replaced-028.html": [
"f54245a1e1f0aabff40ed8823279b8c0bb48f93d",
[
null,
{}
]
],
"intrinsic-size-fallback-replaced.html": [
"a3325b0aea01c008ec322a20e0f279d5bd765b1c",
[

9
tests/wpt/meta/css/css-sizing/keyword-sizes-on-abspos.html.ini vendored
View file

@ -1,9 +0,0 @@
[keyword-sizes-on-abspos.html]
[.test 17]
expected: FAIL
[.test 22]
expected: FAIL
[.test 27]
expected: FAIL

50
tests/wpt/tests/css/css-sizing/intrinsic-percent-replaced-028.html vendored Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution">
<meta name="assert" content="A preferred or max inline size property set to a percentage is treated as zero when computing the min-content contribution.">
<style>
.wrapper {
display: inline-block;
border: solid;
margin: 5px;
}
</style>
<div style="width: 0px">
<!-- Set 'width' to a percentage -->
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 0%; max-width: 100px"></canvas>
</div>
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 50%; max-width: 100px"></canvas>
</div>
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 100%; max-width: 100px"></canvas>
</div>
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 200%; max-width: 100px"></canvas>
</div>
<!-- Set 'max-width' to a percentage -->
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 100px; max-width: 0%"></canvas>
</div>
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 100px; max-width: 50%"></canvas>
</div>
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 100px; max-width: 100%"></canvas>
</div>
<div class="wrapper" data-expected-client-width="0">
<canvas style="width: 100px; max-width: 200%"></canvas>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout(".wrapper");
</script>