Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Commit d2e7b8b

Browse files
mstenshomoz-wptsync-bot
mstensho
authored and
moz-wptsync-bot
committed
Bug 1828409 [wpt PR 39569] - Clip against rounded borders correctly when a box is fragmented., a=testonly
Automatic update from web-platform-tests Clip against rounded borders correctly when a box is fragmented. Bug: 1433413 Change-Id: I371a324568e4f126bacb38fa957f4245bf15ecb5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4427825 Reviewed-by: Xianzhu Wang <[email protected]> Commit-Queue: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#1131429} -- wpt-commits: 864c743903381bf44e6563e31e4b2237ecd6091f wpt-pr: 39569
1 parent da20961 commit d2e7b8b

File tree

2 files changed

+184
-0
lines changed

2 files changed

+184
-0
lines changed

‎testing/web-platform/tests/css/css-break/rounded-clipped-border-ref.html

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
4+
<style>
5+
.container {
6+
float: left;
7+
margin: 10px;
8+
text-align: center;
9+
inline-size: fit-content;
10+
}
11+
.multicol {
12+
inline-size: 320px;
13+
block-size: 120px;
14+
border: solid;
15+
background: lightgray;
16+
}
17+
.column {
18+
float: left;
19+
inline-size: 100px;
20+
margin-inline-start: 10px;
21+
}
22+
.column:first-child {
23+
margin-inline-start:0;
24+
}
25+
.clipper {
26+
position: relative;
27+
border-radius: 50px;
28+
border: 20px solid blue;
29+
overflow: clip;
30+
background: red;
31+
}
32+
.clipper.part1 {
33+
block-size: 100px;
34+
border-block-end: none;
35+
border-end-start-radius: 0;
36+
border-end-end-radius: 0;
37+
}
38+
.clipper.part2 {
39+
block-size: 120px;
40+
border-block-start: none;
41+
border-block-end: none;
42+
border-radius: 0;
43+
}
44+
.clipper.part3 {
45+
block-size: 80px;
46+
border-block-start: none;
47+
border-start-start-radius: 0;
48+
border-start-end-radius: 0;
49+
}
50+
.child {
51+
block-size: 300px;
52+
background: yellow;
53+
}
54+
</style>
55+
56+
<p>In each figure there should be a yellow box with a rounded blue border around
57+
it, split into three columns. There should be no red.</p>
58+
59+
<div class="container">
60+
horizontal-tb:
61+
<div class="multicol">
62+
<div class="column">
63+
<div class="clipper part1">
64+
<div class="child"></div>
65+
</div>
66+
</div>
67+
<div class="column">
68+
<div class="clipper part2">
69+
<div class="child"></div>
70+
</div>
71+
</div>
72+
<div class="column">
73+
<div class="clipper part3">
74+
<div class="child"></div>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<div class="container">
81+
vertical-rl:
82+
<div class="multicol" style="writing-mode:vertical-rl;">
83+
<div class="column">
84+
<div class="clipper part1">
85+
<div class="child"></div>
86+
</div>
87+
</div>
88+
<div class="column">
89+
<div class="clipper part2">
90+
<div class="child"></div>
91+
</div>
92+
</div>
93+
<div class="column">
94+
<div class="clipper part3">
95+
<div class="child"></div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
101+
<div class="container">
102+
vertical-lr:
103+
<div class="multicol" style="writing-mode:vertical-lr;">
104+
<div class="column">
105+
<div class="clipper part1">
106+
<div class="child"></div>
107+
</div>
108+
</div>
109+
<div class="column">
110+
<div class="clipper part2">
111+
<div class="child"></div>
112+
</div>
113+
</div>
114+
<div class="column">
115+
<div class="clipper part3">
116+
<div class="child"></div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>

‎testing/web-platform/tests/css/css-break/rounded-clipped-border.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1433413">
4+
<link rel="match" href="rounded-clipped-border-ref.html">
5+
<meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-900">
6+
7+
<style>
8+
.container {
9+
float: left;
10+
margin: 10px;
11+
text-align: center;
12+
inline-size: fit-content;
13+
}
14+
.multicol {
15+
columns: 3;
16+
column-fill: auto;
17+
gap: 10px;
18+
inline-size: 320px;
19+
block-size: 120px;
20+
border: solid;
21+
background: lightgray;
22+
}
23+
.clipper {
24+
block-size: 300px;
25+
border-radius: 50px;
26+
border: 20px solid blue;
27+
overflow: clip;
28+
background: red;
29+
}
30+
.child {
31+
block-size: 300px;
32+
background: yellow;
33+
}
34+
</style>
35+
36+
<p>In each figure there should be a yellow box with a rounded blue border around
37+
it, split into three columns. There should be no red.</p>
38+
39+
<div class="container">
40+
horizontal-tb:
41+
<div class="multicol">
42+
<div class="clipper">
43+
<div class="child"></div>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div class="container">
49+
vertical-rl:
50+
<div class="multicol" style="writing-mode:vertical-rl;">
51+
<div class="clipper">
52+
<div class="child"></div>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="container">
58+
vertical-lr:
59+
<div class="multicol" style="writing-mode:vertical-lr;">
60+
<div class="clipper">
61+
<div class="child"></div>
62+
</div>
63+
</div>
64+
</div>

0 commit comments

Comments
 (0)