Skip to content

Commit 8419bf8

Browse files
danielsakhapovchromium-wpt-export-bot
danielsakhapov
authored and
chromium-wpt-export-bot
committed
[border-shape] Fix outline offset calculation for border-shape
The outline offset calculation for border-shape incorrectly added border_stroke_offset (half of the border width) to the center_offset, pushing the outline outwards and creating a gap. However, OuterPathWithOffset already expands the path starting from the outer boundary of the border (which includes the border width). Fixed: 500069761 Change-Id: I9a81c503074212f7ed7766f603299f524ef6fb6f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7734969 Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Noam Rosenthal <nrosenthal@google.com> Cr-Commit-Position: refs/heads/main@{#1614384}
1 parent 450c22f commit 8419bf8

4 files changed

Lines changed: 78 additions & 0 deletions

File tree

‎css/css-borders/border-shape/border-shape-outline-double-shape-ref.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<title>CSS Borders Reference: outline follows border-shape with double shape</title>
3+
<style>
4+
body { margin: 0; }
5+
.container { padding: 40px; }
6+
.target {
7+
width: 100px;
8+
height: 100px;
9+
background: lightblue;
10+
border-radius: 50%;
11+
border: 10px solid green;
12+
outline: 4px solid red;
13+
}
14+
</style>
15+
<div class="container">
16+
<div class="target"></div>
17+
</div>

‎css/css-borders/border-shape/border-shape-outline-double-shape.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<title>CSS Borders Test: outline follows border-shape with double shape</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
4+
<link rel="help" href="https://drafts.csswg.org/css-ui/#outline">
5+
<link rel="match" href="border-shape-outline-double-shape-ref.html">
6+
<meta name="fuzzy" content="maxDifference=0-150;totalPixels=0-2000">
7+
<style>
8+
body { margin: 0; }
9+
.container { padding: 40px; }
10+
.target {
11+
width: 100px;
12+
height: 100px;
13+
background: lightblue;
14+
/* Equivalent to border-radius: 50%. The outer edge is the border-box (120x120),
15+
inner edge is padding-box (100x100) */
16+
border-shape: circle(50% at 50% 50%) border-box circle(50% at 50% 50%) padding-box;
17+
border: 10px solid green;
18+
outline: 4px solid red;
19+
}
20+
</style>
21+
<div class="container">
22+
<div class="target"></div>
23+
</div>

‎css/css-borders/border-shape/border-shape-outline-with-border-ref.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<title>CSS Borders Reference: outline follows border-shape with border</title>
3+
<style>
4+
body { margin: 0; }
5+
.container { padding: 40px; }
6+
.target {
7+
width: 100px;
8+
height: 100px;
9+
background: lightblue;
10+
border-radius: 50%;
11+
border: 10px solid green;
12+
outline: 4px solid red;
13+
}
14+
</style>
15+
<div class="container">
16+
<div class="target"></div>
17+
</div>

‎css/css-borders/border-shape/border-shape-outline-with-border.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<title>CSS Borders Test: outline follows border-shape with border</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
4+
<link rel="help" href="https://drafts.csswg.org/css-ui/#outline">
5+
<link rel="match" href="border-shape-outline-with-border-ref.html">
6+
<meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-400">
7+
<style>
8+
body { margin: 0; }
9+
.container { padding: 40px; }
10+
.target {
11+
width: 100px;
12+
height: 100px;
13+
background: lightblue;
14+
border-shape: circle(50% at 50% 50%);
15+
border: 10px solid green;
16+
outline: 4px solid red;
17+
}
18+
</style>
19+
<div class="container">
20+
<div class="target"></div>
21+
</div>

0 commit comments

Comments
 (0)