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

Add test for percentage sizes resolving against subpixel lengths (#35809)

Browse source 
Two floats with `width: 50%` each should fit on the same line,
and four floats with `width: 25%` each should fit on the same line.
That's even if the containing block width, expressed in layout units,
cannot be divided by 2 or 4.
This test checks cases that are tricky for browsers where 1 pixel
are either 60, 64 or 100 layout units.
It passes on other browsers but fails on Servo because of #34665.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-03-10 13:09:21 +01:00 • committed by GitHub
parent 71c207ff25
commit 6cfa94f3bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 168 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -247175,6 +247175,35 @@
{}
]
],
"percentage-width-subpixels.tentative.html": [
"2e85baa0f56366e73b34ba8bcb80de2ddf93ee2f",
[
null,
[
[
"/css/css-sizing/percentage-width-subpixels.tentative-ref.html",
"=="
]
],
{
"fuzzy": [
[
null,
[
[
0,
255
],
[
0,
120
]
]
]
]
}
]
],
"range-percent-intrinsic-size-1.html": [
"cae1c96eb6d9a54a33ec8a94c749a52ea2a8a086",
[
@ -438068,6 +438097,10 @@
"34e2ed01e5221369db8669548ec732099bef43e8",
[]
],
"percentage-width-subpixels.tentative-ref.html": [
"698e9644ddc62324d248e4de9d39690f52b33a01",
[]
],
"range-percent-intrinsic-size-1-ref.html": [
"3bacd9e4b8f5919d90f0f20578178e7994a92bf6",
[]

2
tests/wpt/meta/css/css-sizing/percentage-width-subpixels.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[percentage-width-subpixels.tentative.html]
expected: FAIL

39
tests/wpt/tests/css/css-sizing/percentage-width-subpixels.tentative-ref.html vendored Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<style>
.test {
display: flow-root;
height: 10px;
margin-bottom: 5px;
background: green;
}
</style>
<p>Test passes if there are only horizontal green lines and (almost) <strong>no red</strong>.</p>
<div style="--w: 20001px">
<div class="test x2" style="width: calc(var(--w) / 60)"></div>
<div class="test x2" style="width: calc(var(--w) / 64)"></div>
<div class="test x2" style="width: calc(var(--w) / 100)"></div>
</div>
<div style="--w: 20007px">
<div class="test x4" style="width: calc(var(--w) / 60)"></div>
<div class="test x4" style="width: calc(var(--w) / 64)"></div>
<div class="test x4" style="width: calc(var(--w) / 100)"></div>
</div>
<div style="--w: 20010px">
<div class="test x4" style="width: calc(var(--w) / 60)"></div>
<div class="test x4" style="width: calc(var(--w) / 64)"></div>
<div class="test x4" style="width: calc(var(--w) / 100)"></div>
</div>
<div style="--w: 20013px">
<div class="test x4" style="width: calc(var(--w) / 60)"></div>
<div class="test x4" style="width: calc(var(--w) / 64)"></div>
<div class="test x4" style="width: calc(var(--w) / 100)"></div>
</div>

94
tests/wpt/tests/css/css-sizing/percentage-width-subpixels.tentative.html vendored Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: percentage sizes resolving against subpixel lengths</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
<meta name="assert" content="
Two floats with `width: 50%` each should fit on the same line,
and four floats with `width: 25%` each should fit on the same line.
That's even if the containing block width, expressed in layout units,
cannot be divided by 2 or 4.
This test checks cases that are tricky for browsers where 1 pixel
are either 60, 64 or 100 layout units.
">
<!-- Allow a 1px wide 10px tall red area for each of the 12 lines -->
<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-120">
<link rel="match" href="percentage-width-subpixels.tentative-ref.html">
<style>
.test {
display: flow-root;
margin-bottom: 5px;
background: red;
}
.test > div {
height: 10px;
float: left;
background: green;
}
.x2 > div {
width: 50%;
}
.x4 > div {
width: 25%;
}
</style>
<p>Test passes if there are only horizontal green lines and (almost) <strong>no red</strong>.</p>
<!-- 20001 layout units among 2 children would be 10000.5 each,
that should round down to 10000, not up to 10001. -->
<div style="--w: 20001px">
<div class="test x2" style="width: calc(var(--w) / 60)">
<div></div> <div></div>
</div>
<div class="test x2" style="width: calc(var(--w) / 64)">
<div></div> <div></div>
</div>
<div class="test x2" style="width: calc(var(--w) / 100)">
<div></div> <div></div>
</div>
</div>
<!-- 20007 layout units among 4 children would be 5001.75 each,
that should round down to 5001, not up to 5002. -->
<div style="--w: 20007px">
<div class="test x4" style="width: calc(var(--w) / 60)">
<div></div> <div></div> <div></div> <div></div>
</div>
<div class="test x4" style="width: calc(var(--w) / 64)">
<div></div> <div></div> <div></div> <div></div>
</div>
<div class="test x4" style="width: calc(var(--w) / 100)">
<div></div> <div></div> <div></div> <div></div>
</div>
</div>
<!-- 20010 layout units among 4 children would be 5002.5 each,
that should round down to 5002, not up to 5003. -->
<div style="--w: 20010px">
<div class="test x4" style="width: calc(var(--w) / 60)">
<div></div> <div></div> <div></div> <div></div>
</div>
<div class="test x4" style="width: calc(var(--w) / 64)">
<div></div> <div></div> <div></div> <div></div>
</div>
<div class="test x4" style="width: calc(var(--w) / 100)">
<div></div> <div></div> <div></div> <div></div>
</div>
</div>
<!-- 20013 layout units among 4 children would be 5003.25 each,
that should round down to 5003, not up to 5004. -->
<div style="--w: 20013px">
<div class="test x4" style="width: calc(var(--w) / 60)">
<div></div> <div></div> <div></div> <div></div>
</div>
<div class="test x4" style="width: calc(var(--w) / 64)">
<div></div> <div></div> <div></div> <div></div>
</div>
<div class="test x4" style="width: calc(var(--w) / 100)">
<div></div> <div></div> <div></div> <div></div>
</div>
</div>