Skip to content

Commit fad2785

Browse files
progerschromium-wpt-export-bot
progers
authored and
chromium-wpt-export-bot
committed
Do not round the clipping region with mixed overflow clip
The CSSWG resolved [1] to not apply rounded border clipping when one of overflow-x or overflow-y computes to clip and the other computes to visible (https://drafts.csswg.org/css-overflow/#corner-clipping). This patch updates our implementation to not create the inner border radius clip in this mixed clip/visible scenario. [1] w3c/csswg-drafts#7434 Bug: 1416649 Change-Id: I4d24ac82ecdafba5fa691efb1ce85892c734c717
1 parent cbc4429 commit fad2785

File tree

4 files changed

+113
-0
lines changed

4 files changed

+113
-0
lines changed

‎css/css-overflow/rounded-overflow-clip-visible-ref.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
>
2+
<style>
3+
.box {
4+
width: 100px;
5+
height: 100px;
6+
background: green;
7+
display: inline-block;
8+
}
9+
style>
10+
11+
There should be 4 100x100 green squares (no rounded corners) below.<br>
12+
<div class="box">div>
13+
<div class="box">div>
14+
<div class="box">div>
15+
<div class="box">div>

‎css/css-overflow/rounded-overflow-clip-visible.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
>
2+
<title>Border radius should not round the clipping region when mixing overflow: visible and cliptitle>
3+
<link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434">
5+
<link rel="match" href="rounded-overflow-clip-visible-ref.html">
6+
<style>
7+
.container {
8+
width: 100px;
9+
height: 50px;
10+
overflow: clip visible;
11+
background: red;
12+
display: inline-block;
13+
}
14+
.border-radius {
15+
border-radius: 25px;
16+
}
17+
.child {
18+
width: 200px;
19+
height: 100px;
20+
background: green;
21+
fill: green;
22+
}
23+
style>
24+
25+
There should be 4 100x100 green squares (no rounded corners) below.<br>
26+
<div class="container border-radius">
27+
<div class="child">div>
28+
div>
29+
30+
<div class="container">
31+
<div class="child">div>
32+
div>
33+
34+
<svg class="container border-radius">
35+
<rect class="child">rect>
36+
svg>
37+
38+
<svg class="container">
39+
<rect class="child">rect>
40+
svg>

‎css/css-overflow/rounded-overflow-visible-clip-ref.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<style>
3+
.box {
4+
width: 100px;
5+
height: 100px;
6+
background: green;
7+
display: inline-block;
8+
}
9+
style>
10+
11+
There should be 4 100x100 green squares (no rounded corners) below.<br>
12+
<div class="box">div>
13+
<br>
14+
<div class="box">div>
15+
<br>
16+
<div class="box">div>
17+
<br>
18+
<div class="box">div>

‎css/css-overflow/rounded-overflow-visible-clip.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
>
2+
<title>Border radius should not round the clipping region when mixing overflow: visible and cliptitle>
3+
<link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434">
5+
<link rel="match" href="rounded-overflow-visible-clip-ref.html">
6+
<style>
7+
.container {
8+
width: 50px;
9+
height: 100px;
10+
overflow: visible clip;
11+
background: red;
12+
display: inline-block;
13+
}
14+
.border-radius {
15+
border-radius: 25px;
16+
}
17+
.child {
18+
width: 100px;
19+
height: 200px;
20+
background: green;
21+
fill: green;
22+
}
23+
style>
24+
25+
There should be 4 100x100 green squares (no rounded corners) below.<br>
26+
<div class="container border-radius">
27+
<div class="child">div>
28+
div>
29+
<br>
30+
<div class="container">
31+
<div class="child">div>
32+
div>
33+
<br>
34+
<svg class="container border-radius">
35+
<rect class="child">rect>
36+
svg>
37+
<br>
38+
<svg class="container">
39+
<rect class="child">rect>
40+
svg>

0 commit comments

Comments
 (0)