Skip to content

Commit de0b49c

Browse files
tcaptan-crchromium-wpt-export-bot
tcaptan-cr
authored and
chromium-wpt-export-bot
committed
Snap Border, Outline, and Column-Rule Widths before Layout
Chrome renders a 1 pixel gap between a parent's border and a child's background, when a sub pixel borders widths decimal value is greater than or equal to 0.5. This happens because * the parent's size gets calculated at layout time with the sub pixel values * the child's position gets calculated based on the parent's position and size * the border width gets floored at paint time to just the whole value This leaves a 1 pixel gap between the last pixel in the parent's border and the first pixel in the child's background. This behavior is a regression introduced in: https://chromium-review.googlesource.com/c/chromium/src/+/2199140 This CL is also reverting the subpixel border width behavior of https://codereview.chromium.org/2640143005 Which changed Chrome to "Use floor instead of round for decimal border widths" with the intent to increase interop with Firefox and Safari which both floor borders. Previously Chrome was rounding the borders at Paint time, avoiding the gaps between a parent's border and a child's background. The proposed fix is to snap (floor) the borders widths before layout, matching what Gecko and WebKit do. Outline widths also use `ConvertBorderWidth` as their conversion function and will also be snapped before layout. While Column-Rule widths were already snapped before layout by `StyleBuilderConverter::ConvertLineWidth`, with this CL they will also use `StyleBuilderConverter::ConvertBorderWidth` in order to unify the snapping of widths behavior and code paths. CSS isses: w3c/csswg-drafts#5210 w3c/csswg-drafts#7473 R=pdr Change-Id: Ib32ba28e4f193ba79f90f96771378abaf0c589a8 Bug: 1120347, 1201762
1 parent a658bff commit de0b49c

11 files changed

+485
-7
lines changed

‎css/css-borders/border-width-rounding.tentative.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
>
2+
<html>
3+
<head>
4+
<title>
5+
CSS Border: width rounding
6+
title>
7+
8+
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
9+
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width">
10+
11+
<meta name="assert" content="border-width computed value after rounding.">
12+
13+
<script src="/resources/testharness.js">script>
14+
<script src="/resources/testharnessreport.js">script>
15+
head>
16+
<body>
17+
<h1>
18+
Test passes if border widths are rounded up
19+
when they are greater than 0 and less than 1,
20+
and rounded down when they are greater than 1.
21+
h1>
22+
23+
<script>
24+
const values = [
25+
{ input: "0px", expected: "0px" },
26+
{ input: "0.1px", expected: "1px" },
27+
{ input: "0.25px", expected: "1px" },
28+
{ input: "0.5px", expected: "1px" },
29+
{ input: "0.9px", expected: "1px" },
30+
{ input: "1px", expected: "1px" },
31+
{ input: "1.25px", expected: "1px" },
32+
{ input: "1.5px", expected: "1px" },
33+
{ input: "2px", expected: "2px" },
34+
{ input: "2.75px", expected: "2px" },
35+
{ input: "2.999px", expected: "2px" },
36+
];
37+
38+
for (const value of values) {
39+
const div = document.createElement("div");
40+
div.style = `border: solid ${value.input} blue; margin-bottom: 20px;`;
41+
document.body.appendChild(div);
42+
}
43+
44+
test(function() {
45+
var targets = document.querySelectorAll("div");
46+
47+
for (var i=0; i < targets.length; ++i) {
48+
assert_equals(getComputedStyle(targets[i]).borderWidth, values[i].expected);
49+
}
50+
}, "Test that border widths are rounded up when they are greater than 0px but less than 1px, and rounded down when they are greater than 1px.");
51+
script>
52+
body>
53+
html>

‎css/css-borders/reference/subpixel-border-width-ref.tentative.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
>
2+
<html>
3+
<head>
4+
<title>
5+
CSS Border: width computed value
6+
title>
7+
8+
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
9+
10+
<style>
11+
.square {
12+
height: 20px;
13+
width: 20px;
14+
border: 1px solid gray;
15+
}
16+
style>
17+
head>
18+
19+
<body>
20+
<h1>
21+
Test passes if border widths are rounded up
22+
when they are greater than 0 and less than 1,
23+
and rounded down when they are greater than 1.
24+
h1>
25+
26+
<div class="square">div>
27+
<br>
28+
<div class="square">div>
29+
<br>
30+
<div class="square">div>
31+
<br>
32+
<div class="square">div>
33+
<br>
34+
<div class="square">div>
35+
<br>
36+
<div class="square">div>
37+
<br>
38+
<div class="square" style="border-width: 3px;">div>
39+
<br>
40+
<div class="square" style="border-width: 3px;">div>
41+
<br>
42+
<div class="square" style="border-width: 3px;">div>
43+
body>
44+
html>

‎css/css-borders/subpixel-border-width.tentative.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
>
2+
<html>
3+
<head>
4+
<title>
5+
CSS Border: width computed value
6+
title>
7+
8+
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
9+
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-width">
10+
<link rel="match" href="reference/subpixel-border-width-ref.tentative.html">
11+
12+
<meta name="assert" content="border-width computed value after rounding.">
13+
14+
<style>
15+
.square {
16+
height: 20px;
17+
width: 20px;
18+
border: solid gray;
19+
}
20+
style>
21+
head>
22+
23+
<body>
24+
<h1>
25+
Test passes if border widths are rounded up
26+
when they are greater than 0 and less than 1,
27+
and rounded down when they are greater than 1.
28+
h1>
29+
30+
<div class="square" style="border-width: 0.3px;">div>
31+
<br>
32+
<div class="square" style="border-width: 0.5px;">div>
33+
<br>
34+
<div class="square" style="border-width: 0.9px;">div>
35+
<br>
36+
<div class="square" style="border-width: 1.3px;">div>
37+
<br>
38+
<div class="square" style="border-width: 1.5px;">div>
39+
<br>
40+
<div class="square" style="border-width: 1.9px;">div>
41+
<br>
42+
<div class="square" style="border-width: 3.3px;">div>
43+
<br>
44+
<div class="square" style="border-width: 3.5px;">div>
45+
<br>
46+
<div class="square" style="border-width: 3.9px;">div>
47+
body>
48+
html>

‎css/css-multicol/reference/subpixel-column-rule-width-ref.tentative.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
>
2+
<html>
3+
4+
<head>
5+
<title>
6+
CSS Column-Rule: width computed value
7+
title>
8+
9+
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
10+
11+
<style>
12+
.columns {
13+
column-count: 2;
14+
column-rule: 1px solid gray;
15+
width: 420px;
16+
height: 50px;
17+
}
18+
style>
19+
head>
20+
21+
<body>
22+
<h1>
23+
Test passes if column rule widths are rounded up
24+
when they are greater than 0 and less than 1,
25+
and rounded down when they are greater than 1.
26+
h1>
27+
28+
<div class="columns">
29+
Lorem ipsum dolor sit amet,
30+
consectetur adipisicing elit,
31+
sed do eiusmod tempor incididunt
32+
ut labore et dolore magna aliqua.
33+
div>
34+
35+
<div class="columns">
36+
Lorem ipsum dolor sit amet,
37+
consectetur adipisicing elit,
38+
sed do eiusmod tempor incididunt
39+
ut labore et dolore magna aliqua.
40+
div>
41+
42+
<div class="columns">
43+
Lorem ipsum dolor sit amet,
44+
consectetur adipisicing elit,
45+
sed do eiusmod tempor incididunt
46+
ut labore et dolore magna aliqua.
47+
div>
48+
49+
<div class="columns">
50+
Lorem ipsum dolor sit amet,
51+
consectetur adipisicing elit,
52+
sed do eiusmod tempor incididunt
53+
ut labore et dolore magna aliqua.
54+
div>
55+
56+
<div class="columns">
57+
Lorem ipsum dolor sit amet,
58+
consectetur adipisicing elit,
59+
sed do eiusmod tempor incididunt
60+
ut labore et dolore magna aliqua.
61+
div>
62+
63+
<div class="columns">
64+
Lorem ipsum dolor sit amet,
65+
consectetur adipisicing elit,
66+
sed do eiusmod tempor incididunt
67+
ut labore et dolore magna aliqua.
68+
div>
69+
70+
<div class="columns" style="column-rule-width: 3px;">
71+
Lorem ipsum dolor sit amet,
72+
consectetur adipisicing elit,
73+
sed do eiusmod tempor incididunt
74+
ut labore et dolore magna aliqua.
75+
div>
76+
77+
<div class="columns" style="column-rule-width: 3px;">
78+
Lorem ipsum dolor sit amet,
79+
consectetur adipisicing elit,
80+
sed do eiusmod tempor incididunt
81+
ut labore et dolore magna aliqua.
82+
div>
83+
84+
<div class="columns" style="column-rule-width: 3px;">
85+
Lorem ipsum dolor sit amet,
86+
consectetur adipisicing elit,
87+
sed do eiusmod tempor incididunt
88+
ut labore et dolore magna aliqua.
89+
div>
90+
body>
91+
92+
html>

‎css/css-multicol/subpixel-column-rule-width.tentative.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
>
2+
<html>
3+
<head>
4+
<title>
5+
CSS Column-Rule: width computed value
6+
title>
7+
8+
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
9+
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#crw">
10+
<link rel="match" href="reference/subpixel-column-rule-width-ref.tentative.html">
11+
12+
<meta name="assert" content="column-rule-width computed value after rounding.">
13+
14+
<style>
15+
.columns {
16+
column-count: 2;
17+
column-rule: solid gray;
18+
width: 420px;
19+
height: 50px;
20+
}
21+
style>
22+
head>
23+
24+
<body>
25+
<h1>
26+
Test passes if column rule widths are rounded up
27+
when they are greater than 0 and less than 1,
28+
and rounded down when they are greater than 1.
29+
h1>
30+
31+
<div class="columns" style="column-rule-width: 0.3px;">
32+
Lorem ipsum dolor sit amet,
33+
consectetur adipisicing elit,
34+
sed do eiusmod tempor incididunt
35+
ut labore et dolore magna aliqua.
36+
div>
37+
38+
<div class="columns" style="column-rule-width: 0.5px;">
39+
Lorem ipsum dolor sit amet,
40+
consectetur adipisicing elit,
41+
sed do eiusmod tempor incididunt
42+
ut labore et dolore magna aliqua.
43+
div>
44+
45+
<div class="columns" style="column-rule-width: 0.9px;">
46+
Lorem ipsum dolor sit amet,
47+
consectetur adipisicing elit,
48+
sed do eiusmod tempor incididunt
49+
ut labore et dolore magna aliqua.
50+
div>
51+
52+
<div class="columns" style="column-rule-width: 1.3px;">
53+
Lorem ipsum dolor sit amet,
54+
consectetur adipisicing elit,
55+
sed do eiusmod tempor incididunt
56+
ut labore et dolore magna aliqua.
57+
div>
58+
59+
<div class="columns" style="column-rule-width: 1.5px;">
60+
Lorem ipsum dolor sit amet,
61+
consectetur adipisicing elit,
62+
sed do eiusmod tempor incididunt
63+
ut labore et dolore magna aliqua.
64+
div>
65+
66+
<div class="columns" style="column-rule-width: 1.9px;">
67+
Lorem ipsum dolor sit amet,
68+
consectetur adipisicing elit,
69+
sed do eiusmod tempor incididunt
70+
ut labore et dolore magna aliqua.
71+
div>
72+
73+
<div class="columns" style="column-rule-width: 3.3px;">
74+
Lorem ipsum dolor sit amet,
75+
consectetur adipisicing elit,
76+
sed do eiusmod tempor incididunt
77+
ut labore et dolore magna aliqua.
78+
div>
79+
80+
<div class="columns" style="column-rule-width: 3.5px;">
81+
Lorem ipsum dolor sit amet,
82+
consectetur adipisicing elit,
83+
sed do eiusmod tempor incididunt
84+
ut labore et dolore magna aliqua.
85+
div>
86+
87+
<div class="columns" style="column-rule-width: 3.9px;">
88+
Lorem ipsum dolor sit amet,
89+
consectetur adipisicing elit,
90+
sed do eiusmod tempor incididunt
91+
ut labore et dolore magna aliqua.
92+
div>
93+
body>
94+
html>

‎css/css-outline/outline-width-rounding.tentative.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
>
2+
<html>
3+
<head>
4+
<title>
5+
CSS Outline: width rounding
6+
title>
7+
8+
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
9+
<link rel="help" href="https://www.w3.org/TR/css-ui-4/#outline-width">
10+
11+
<meta name="assert" content="outline-width computed value after rounding.">
12+
13+
<script src="/resources/testharness.js">script>
14+
<script src="/resources/testharnessreport.js">script>
15+
head>
16+
<body>
17+
<h1>
18+
Test passes if outline widths are rounded up
19+
when they are greater than 0 and less than 1,
20+
and rounded down when they are greater than 1.
21+
h1>
22+
23+
<script>
24+
const values = [
25+
{ input: "0px", expected: "0px" },
26+
{ input: "0.1px", expected: "1px" },
27+
{ input: "0.25px", expected: "1px" },
28+
{ input: "0.5px", expected: "1px" },
29+
{ input: "0.9px", expected: "1px" },
30+
{ input: "1px", expected: "1px" },
31+
{ input: "1.25px", expected: "1px" },
32+
{ input: "1.5px", expected: "1px" },
33+
{ input: "2px", expected: "2px" },
34+
{ input: "2.75px", expected: "2px" },
35+
{ input: "2.999px", expected: "2px" },
36+
];
37+
38+
for (const value of values) {
39+
const div = document.createElement("div");
40+
div.style = `outline: solid ${value.input} green; margin-bottom: 20px;`;
41+
document.body.appendChild(div);
42+
}
43+
44+
test(function() {
45+
var targets = document.querySelectorAll("div");
46+
47+
for (var i=0; i < targets.length; ++i) {
48+
assert_equals(getComputedStyle(targets[i]).outlineWidth, values[i].expected);
49+
}
50+
}, "Test that outline widths are rounded up when they are greater than 0px but less than 1px, and rounded down when they are greater than 1px.");
51+
script>
52+
body>
53+
html>

0 commit comments

Comments
 (0)