Skip to content

Commit 248c945

Browse files
Loirooriolservo-wpt-sync
Loirooriol
authored and
servo-wpt-sync
committed
Add test for percentage sizes resolving against subpixel lengths
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 <[email protected]>
1 parent e10de92 commit 248c945

2 files changed

+133
-0
lines changed

‎css/css-sizing/percentage-width-subpixels.tentative-ref.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Test Reference</title>
4+
<link rel="author" title="Oriol Brufau" href="[email protected]">
5+
6+
<style>
7+
.test {
8+
display: flow-root;
9+
height: 10px;
10+
margin-bottom: 5px;
11+
background: green;
12+
}
13+
</style>
14+
15+
<p>Test passes if there are only horizontal green lines and (almost) <strong>no red</strong>.</p>
16+
17+
<div style="--w: 20001px">
18+
<div class="test x2" style="width: calc(var(--w) / 60)"></div>
19+
<div class="test x2" style="width: calc(var(--w) / 64)"></div>
20+
<div class="test x2" style="width: calc(var(--w) / 100)"></div>
21+
</div>
22+
23+
<div style="--w: 20007px">
24+
<div class="test x4" style="width: calc(var(--w) / 60)"></div>
25+
<div class="test x4" style="width: calc(var(--w) / 64)"></div>
26+
<div class="test x4" style="width: calc(var(--w) / 100)"></div>
27+
</div>
28+
29+
<div style="--w: 20010px">
30+
<div class="test x4" style="width: calc(var(--w) / 60)"></div>
31+
<div class="test x4" style="width: calc(var(--w) / 64)"></div>
32+
<div class="test x4" style="width: calc(var(--w) / 100)"></div>
33+
</div>
34+
35+
<div style="--w: 20013px">
36+
<div class="test x4" style="width: calc(var(--w) / 60)"></div>
37+
<div class="test x4" style="width: calc(var(--w) / 64)"></div>
38+
<div class="test x4" style="width: calc(var(--w) / 100)"></div>
39+
</div>

‎css/css-sizing/percentage-width-subpixels.tentative.html

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Test: percentage sizes resolving against subpixel lengths</title>
4+
<link rel="author" title="Oriol Brufau" href="[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
6+
<meta name="assert" content="
7+
Two floats with `width: 50%` each should fit on the same line,
8+
and four floats with `width: 25%` each should fit on the same line.
9+
That's even if the containing block width, expressed in layout units,
10+
cannot be divided by 2 or 4.
11+
This test checks cases that are tricky for browsers where 1 pixel
12+
are either 60, 64 or 100 layout units.
13+
">
14+
15+
<!-- Allow a 1px wide 10px tall red area for each of the 12 lines -->
16+
<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-120">
17+
<link rel="match" href="percentage-width-subpixels.tentative-ref.html">
18+
19+
<style>
20+
.test {
21+
display: flow-root;
22+
margin-bottom: 5px;
23+
background: red;
24+
}
25+
.test > div {
26+
height: 10px;
27+
float: left;
28+
background: green;
29+
}
30+
.x2 > div {
31+
width: 50%;
32+
}
33+
.x4 > div {
34+
width: 25%;
35+
}
36+
</style>
37+
38+
<p>Test passes if there are only horizontal green lines and (almost) <strong>no red</strong>.</p>
39+
40+
<!-- 20001 layout units among 2 children would be 10000.5 each,
41+
that should round down to 10000, not up to 10001. -->
42+
<div style="--w: 20001px">
43+
<div class="test x2" style="width: calc(var(--w) / 60)">
44+
<div></div> <div></div>
45+
</div>
46+
<div class="test x2" style="width: calc(var(--w) / 64)">
47+
<div></div> <div></div>
48+
</div>
49+
<div class="test x2" style="width: calc(var(--w) / 100)">
50+
<div></div> <div></div>
51+
</div>
52+
</div>
53+
54+
<!-- 20007 layout units among 4 children would be 5001.75 each,
55+
that should round down to 5001, not up to 5002. -->
56+
<div style="--w: 20007px">
57+
<div class="test x4" style="width: calc(var(--w) / 60)">
58+
<div></div> <div></div> <div></div> <div></div>
59+
</div>
60+
<div class="test x4" style="width: calc(var(--w) / 64)">
61+
<div></div> <div></div> <div></div> <div></div>
62+
</div>
63+
<div class="test x4" style="width: calc(var(--w) / 100)">
64+
<div></div> <div></div> <div></div> <div></div>
65+
</div>
66+
</div>
67+
68+
<!-- 20010 layout units among 4 children would be 5002.5 each,
69+
that should round down to 5002, not up to 5003. -->
70+
<div style="--w: 20010px">
71+
<div class="test x4" style="width: calc(var(--w) / 60)">
72+
<div></div> <div></div> <div></div> <div></div>
73+
</div>
74+
<div class="test x4" style="width: calc(var(--w) / 64)">
75+
<div></div> <div></div> <div></div> <div></div>
76+
</div>
77+
<div class="test x4" style="width: calc(var(--w) / 100)">
78+
<div></div> <div></div> <div></div> <div></div>
79+
</div>
80+
</div>
81+
82+
<!-- 20013 layout units among 4 children would be 5003.25 each,
83+
that should round down to 5003, not up to 5004. -->
84+
<div style="--w: 20013px">
85+
<div class="test x4" style="width: calc(var(--w) / 60)">
86+
<div></div> <div></div> <div></div> <div></div>
87+
</div>
88+
<div class="test x4" style="width: calc(var(--w) / 64)">
89+
<div></div> <div></div> <div></div> <div></div>
90+
</div>
91+
<div class="test x4" style="width: calc(var(--w) / 100)">
92+
<div></div> <div></div> <div></div> <div></div>
93+
</div>
94+
</div>

0 commit comments

Comments
 (0)