Skip to content

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=319426 #61426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cupidsity wants to merge 2 commits into
base: master
Choose a base branch
from
Open

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=319426 #61426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e4379d
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=319426
cupidsity Jul 20, 2026
50ae4d5
Update fuzzy value for corner-shape superellipse concave test
cupidsity Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions css/css-borders/corner-shape/corner-shape-superellipse-concave-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: per-corner concave 'corner-shape' superellipse values — reference</title>
<style>
.target { position: relative; background: red; width: 100px; height: 100px; box-sizing: border-box;
clip-path: path("M 75.000 0.000 C 75.000 7.326 75.379 14.511 80.434 19.566 C 85.489 24.621 92.674 25.000 100.000 25.000 L 100.000 75.000 C 83.369 75.000 79.456 74.694 77.075 77.075 C 74.694 79.456 75.000 83.369 75.000 100.000 L 25.000 100.000 C 25.000 75.747 25.081 75.620 24.731 75.269 C 24.380 74.919 24.253 75.000 0.000 75.000 L 0.000 25.000 C 1.535 25.000 7.947 22.680 15.314 15.314 C 22.680 7.947 25.000 1.535 25.000 0.000 Z"); }
.clip { position: absolute; inset: 5px; overflow: hidden; }
.shape { position: absolute; inset: -5px; background: green; clip-path: path("M 70.000 0.000 C 70.000 8.791 70.454 17.414 76.520 23.480 C 82.586 29.546 91.209 30.000 100.000 30.000 L 100.000 70.000 C 80.043 70.000 75.347 69.633 72.490 72.490 C 69.633 75.347 70.000 80.043 70.000 100.000 L 30.000 100.000 C 30.000 70.896 30.097 70.744 29.677 70.323 C 29.256 69.903 29.104 70.000 0.000 70.000 L 1.584 29.742 C 3.314 29.742 10.536 27.129 18.832 18.832 C 27.129 10.536 29.742 3.314 29.742 1.584 Z"); }
</style>
</head>
<div class=target><div class=clip><div class=shape></div></div></div>
19 changes: 19 additions & 0 deletions css/css-borders/corner-shape/corner-shape-superellipse-concave.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: per-corner concave 'corner-shape' superellipse values</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
<link rel="match" href="corner-shape-superellipse-concave-ref.html">
<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-347"/>
<style>
.target {
background: green;
width: 100px;
height: 100px;
border-radius: 25px;
box-sizing: border-box;
border: 5px solid red;
corner-shape: superellipse(-0.5) superellipse(-1.5) superellipse(-3) superellipse(-6);
}
</style>
</head>
<div class=target></div>
11 changes: 11 additions & 0 deletions css/css-borders/corner-shape/corner-shape-superellipse-convex-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: per-corner convex 'corner-shape' superellipse values — reference</title>
<style>
.target { position: relative; background: red; width: 100px; height: 100px; box-sizing: border-box;
clip-path: path("M 75.000 0.000 C 82.326 0.000 89.511 0.379 94.566 5.434 C 99.621 10.489 100.000 17.674 100.000 25.000 L 100.000 75.000 C 100.000 91.631 100.306 95.544 97.925 97.925 C 95.544 100.306 91.631 100.000 75.000 100.000 L 25.000 100.000 C 0.747 100.000 0.620 100.081 0.269 99.731 C -0.081 99.380 0.000 99.253 0.000 75.000 L 0.000 25.000 C 0.000 23.465 2.320 17.053 9.686 9.686 C 17.053 2.320 23.465 0.000 25.000 0.000 Z"); }
.clip { position: absolute; inset: 5px; overflow: hidden; }
.shape { position: absolute; inset: -5px; background: green; clip-path: path("M 74.533 4.978 C 80.537 4.978 86.426 5.288 90.569 9.431 C 94.712 13.574 95.022 19.463 95.022 25.467 L 95.022 74.533 C 95.022 88.163 95.273 91.370 93.321 93.321 C 91.370 95.273 88.163 95.022 74.533 95.022 L 25.467 95.022 C 5.590 95.022 5.486 95.088 5.199 94.801 C 4.912 94.514 4.978 94.410 4.978 74.533 L 4.675 26.773 C 4.675 25.416 6.726 19.748 13.237 13.237 C 19.748 6.726 25.416 4.675 26.773 4.675 Z"); }
</style>
</head>
<div class=target><div class=clip><div class=shape></div></div></div>
19 changes: 19 additions & 0 deletions css/css-borders/corner-shape/corner-shape-superellipse-convex.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: per-corner convex 'corner-shape' superellipse values</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
<link rel="match" href="corner-shape-superellipse-convex-ref.html">
<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-271"/>
<style>
.target {
background: green;
width: 100px;
height: 100px;
border-radius: 25px;
box-sizing: border-box;
border: 5px solid red;
corner-shape: superellipse(0.5) superellipse(1.5) superellipse(3) superellipse(6);
}
</style>
</head>
<div class=target></div>
Loading