Skip to content

Commit c37199c

Browse files
noamrchromium-wpt-export-bot
noamr
authored and
chromium-wpt-export-bot
committed
Fix corner-shape shadow & outline rendering
As per resolution in w3c/csswg-drafts#13037 (comment) Shadows should be border-aligned, like border inset, with external "miters" that are clipped to the outer edge. The miter is computed by extending the start and end tangents of the curve until they reach the outer edge. The tangent is the line between the start point, and the "control point": a point that would be the quadratic control point if this was a normal quadratic curve with the same half-corner. As part of this work, refactoring the rendering tests to be both more precise and closer to something that can be reasoned about being close to the spec. See spec PR: w3c/csswg-drafts#13173 The PR and the WPT rendering code were developed side by side to ensure that the tests assert the spec. Since the spec defines that curves are approximate, and ref tests can fail on antialiasing and curve inaccuracies, the corners are also stroked with a blue 3px line on both the actual and ref versions, to avoid test failures in these occasions. (This change is guarded by the BorderRadiusCorrectionCoverageFactor, as without it shadow rects wouldn't have an origin rect, so the changed code paths is never reached). Bug: 463996869 Change-Id: I7f586440f47757416b8eb9a2002629cd29e0174a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7215437 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Noam Rosenthal <nrosenthal@google.com> Cr-Commit-Position: refs/heads/main@{#1554276}
1 parent 674a55c commit c37199c

File tree

8 files changed

+713
-302
lines changed

8 files changed

+713
-302
lines changed

‎css/css-borders/corner-shape/corner-shape-any-ref.html‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎css/css-borders/corner-shape/corner-shape-gallery.manual.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020

2121
iframe {
2222
overflow: clip;
23-
width: 250px;
24-
height: 150px;
23+
width: 500px;
24+
height: 300px;
2525
border: none;
2626
}
2727

@@ -41,7 +41,7 @@
4141
</template>
4242
<script>
4343
addEventListener("DOMContentLoaded", async () => {
44-
const test_files = ["corner-shape-render-precise.html", "corner-shape-render-fuzzy.html"]
44+
const test_files = ["render-corner-shape.html"]
4545
const dom_parser = new DOMParser();
4646
for (const test_file of test_files) {
4747
const test_html = await (await fetch(test_file)).text();
@@ -51,7 +51,7 @@
5151
const scenario = document.getElementById("scenario").content.cloneNode(true);
5252
scenario.querySelector(".variant").innerText = variant;
5353
scenario.querySelector(".test").src = `${test_file}${variant}`;
54-
scenario.querySelector(".ref").src = `corner-shape-any-ref.html${variant}`;
54+
scenario.querySelector(".ref").src = `render-corner-shape-ref.html${variant}`;
5555
document.querySelector("main").append(scenario);
5656
}
5757
}

‎css/css-borders/corner-shape/corner-shape-render-fuzzy.html‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎css/css-borders/corner-shape/corner-shape-render-precise.html‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎css/css-borders/corner-shape/render-corner-shape-ref.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Render corner shape</title>
5+
<script src="./resources/render-corner-shape.js"></script>
6+
</head>
7+
<body>
8+
<script>
9+
const element = create_element_with_corner_shape(
10+
new URLSearchParams(location.search),
11+
"ref"
12+
);
13+
document.body.appendChild(element);
14+
</script>
15+
</body>
16+
</html>

‎css/css-borders/corner-shape/render-corner-shape.html‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Render corner shape</title>
5+
<link rel="match" href="render-corner-shape-ref.html" >
6+
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shape-rendering">
7+
<meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-128">
8+
<meta
9+
name="variant"
10+
content="?border-top-right-radius=100&corner-top-right-shape=0&shadow-spread=30"
11+
>
12+
<meta
13+
name="variant"
14+
content="?border-radius=40&corner-shape=3&shadow-spread=10"
15+
>
16+
<meta
17+
name="variant"
18+
content="?border-radius=40&corner-shape=-1.5&shadow-spread=10"
19+
>
20+
<meta
21+
name="variant"
22+
content="?border-radius=40&corner-shape=-infinity&shadow-spread=10"
23+
>
24+
<meta
25+
name="variant"
26+
content="?border-radius=50&corner-shape=0&shadow-spread=10"
27+
>
28+
<meta
29+
name="variant"
30+
content="?border-radius=25&corner-shape=2&shadow-spread=10"
31+
>
32+
<meta
33+
name="variant"
34+
content="?border-radius=5&corner-top-left-shape=0.5&corner-bottom-right-shape=-0.5&shadow-spread=10"
35+
>
36+
<meta
37+
name="variant"
38+
content="?corner-top-left-shape=0&corner-top-right-shape=notch&corner-bottom-right-shape=2&corner-bottom-left-shape=-1&border-width=20&shadow-spread=20&border-radius=50"
39+
>
40+
<meta
41+
name="variant"
42+
content="?corner-shape=scoop&border-radius=20%&border-width=20"
43+
>
44+
<meta
45+
name="variant"
46+
content="?corner-shape=-2&border-radius=20%&border-width=20"
47+
>
48+
<meta
49+
name="variant"
50+
content="?corner-top-left-shape=bevel&border-radius=40&border-width=10"
51+
>
52+
<meta
53+
name="variant"
54+
content="?corner-top-left-shape=scoop&corner-top-right-shape=scoop&border-radius=50%"
55+
>
56+
<meta
57+
name="variant"
58+
content="?corner-shape=squircle&border-radius=25%&border-width=20"
59+
>
60+
<meta name="variant" content="?corner-shape=squircle&border-radius=50%" >
61+
<meta
62+
name="variant"
63+
content="?corner-shape=-7&border-radius=20%&border-width=20"
64+
>
65+
<meta
66+
name="variant"
67+
content="?corner-shape=5&border-radius=20%&border-width=20"
68+
>
69+
<meta
70+
name="variant"
71+
content="?corner-top-left-shape=bevel&corner-bottom-right-shape=bevel&border-radius=40&border-width=10"
72+
>
73+
<meta
74+
name="variant"
75+
content="?corner-top-left-shape=-4&border-radius=40%"
76+
>
77+
<meta
78+
name="variant"
79+
content="?corner-top-left-shape=2.5&border-radius=20%&border-width=10"
80+
>
81+
<meta
82+
name="variant"
83+
content="?corner-top-right-shape=scoop&border-radius=20%&border-width=10"
84+
>
85+
<meta
86+
name="variant"
87+
content="?corner-shape=0.8&border-radius=40&border-width=10"
88+
>
89+
<meta
90+
name="variant"
91+
content="?border-radius=50%&corner-top-left-shape=scoop&corner-bottom-right-shape=scoop&corner-top-right-shape=notch&corner-bottom-left-shape=notch&border-width=10"
92+
>
93+
<meta
94+
name="variant"
95+
content="?border-radius=50%&corner-top-right-shape=scoop&corner-bottom-left-shape=scoop&corner-top-left-shape=notch&corner-bottom-right-shape=notch&border-width=10"
96+
>
97+
<meta
98+
name="variant"
99+
content="?corner-shape=squircle&border-top-left-radius=30%"
100+
>
101+
<meta
102+
name="variant"
103+
content="?corner-shape=-2&border-top-left-radius=40%&border-width=20"
104+
>
105+
<meta
106+
name="variant"
107+
content="?corner-shape=squircle&border-top-right-radius=30"
108+
>
109+
<meta
110+
name="variant"
111+
content="?corner-shape=square&border-bottom-left-radius=5"
112+
>
113+
<meta name="variant" content="?corner-shape=2.3&border-radius=40%" >
114+
<meta name="variant" content="?corner-shape=3&border-top-right-radius=33" >
115+
<meta
116+
name="variant"
117+
content="?corner-top-right-shape=-4&border-top-right-radius=50"
118+
>
119+
<meta
120+
name="variant"
121+
content="?corner-bottom-right-shape=0.8&border-bottom-right-radius=50%"
122+
>
123+
<meta
124+
name="variant"
125+
content="?corner-top-left-shape=bevel&border-radius=40"
126+
>
127+
<meta
128+
name="variant"
129+
content="?corner-top-left-shape=scoop&border-radius=40"
130+
>
131+
<meta name="variant" content="?corner-top-left-shape=-4&border-radius=40" >
132+
<meta
133+
name="variant"
134+
content="?corner-top-left-shape=0.5&border-radius=40"
135+
>
136+
<meta
137+
name="variant"
138+
content="?corner-top-left-shape=-0.5&border-radius=40"
139+
>
140+
<meta
141+
name="variant"
142+
content="?corner-shape=squircle&border-top-left-radius=25%&border-width=10"
143+
>
144+
<meta
145+
name="variant"
146+
content="?corner-bottom-left-shape=bevel&border-bottom-left-radius=30"
147+
>
148+
<meta
149+
name="variant"
150+
content="?corner-top-left-shape=bevel&border-width=10"
151+
>
152+
<meta
153+
name="variant"
154+
content="?corner-top-right-shape=bevel&border-width=10"
155+
>
156+
<meta
157+
name="variant"
158+
content="?corner-bottom-left-shape=bevel&border-width=10&border-radius=20"
159+
>
160+
<meta
161+
name="variant"
162+
content="?corner-bottom-right-shape=bevel&border-width=10&border-radius=20"
163+
>
164+
<meta
165+
name="variant"
166+
content="?corner-bottom-right-shape=bevel&corner-bottom-left-shape=bevel"
167+
>
168+
<meta
169+
name="variant"
170+
content="?border-top-left-radius=50%&corner-shape=0.7&border-left-width=30&border-top-width=30"
171+
>
172+
<meta
173+
name="variant"
174+
content="?corner-shape=notch&border-radius=30&border-width=30"
175+
>
176+
177+
<script src="./resources/render-corner-shape.js"></script>
178+
</head>
179+
<body>
180+
<script>
181+
const element = create_element_with_corner_shape(
182+
new URLSearchParams(location.search),
183+
"actual"
184+
);
185+
document.body.appendChild(element);
186+
</script>
187+
</body>
188+
</html>

0 commit comments

Comments
 (0)