mirror of
https://github.com/servo/servo.git
synced 2025-08-04 13:10:20 +01:00
Add test for percentage sizes resolving against subpixel lengths (#35809)
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
GitHub
parent
71c207ff25
commit
6cfa94f3bc
4 changed files with 168 additions and 0 deletions
33
tests/wpt/meta/MANIFEST.json
vendored
33
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -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": [
|
"range-percent-intrinsic-size-1.html": [
|
||||||
"cae1c96eb6d9a54a33ec8a94c749a52ea2a8a086",
|
"cae1c96eb6d9a54a33ec8a94c749a52ea2a8a086",
|
||||||
[
|
[
|
||||||
|
|
@ -438068,6 +438097,10 @@
|
||||||
"34e2ed01e5221369db8669548ec732099bef43e8",
|
"34e2ed01e5221369db8669548ec732099bef43e8",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"percentage-width-subpixels.tentative-ref.html": [
|
||||||
|
"698e9644ddc62324d248e4de9d39690f52b33a01",
|
||||||
|
[]
|
||||||
|
],
|
||||||
"range-percent-intrinsic-size-1-ref.html": [
|
"range-percent-intrinsic-size-1-ref.html": [
|
||||||
"3bacd9e4b8f5919d90f0f20578178e7994a92bf6",
|
"3bacd9e4b8f5919d90f0f20578178e7994a92bf6",
|
||||||
[]
|
[]
|
||||||
|
|
|
||||||
2
tests/wpt/meta/css/css-sizing/percentage-width-subpixels.tentative.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-sizing/percentage-width-subpixels.tentative.html.ini
vendored
Normal 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
39
tests/wpt/tests/css/css-sizing/percentage-width-subpixels.tentative-ref.html
vendored
Normal 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
94
tests/wpt/tests/css/css-sizing/percentage-width-subpixels.tentative.html
vendored
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue