diff --git a/css/css-overflow/rounded-overflow-clip-visible-ref.html b/css/css-overflow/rounded-overflow-clip-visible-ref.html
new file mode 100644
index 00000000000000..3a25b794d8d413
--- /dev/null
+++ b/css/css-overflow/rounded-overflow-clip-visible-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+.box {
+ width: 100px;
+ height: 100px;
+ background: green;
+ display: inline-block;
+}
+</style>
+
+There should be 4 100x100 green squares (no rounded corners) below.<br>
+<div class="box"></div>
+<div class="box"></div>
+<div class="box"></div>
+<div class="box"></div>
diff --git a/css/css-overflow/rounded-overflow-clip-visible.html b/css/css-overflow/rounded-overflow-clip-visible.html
new file mode 100644
index 00000000000000..65e7f055a3907d
--- /dev/null
+++ b/css/css-overflow/rounded-overflow-clip-visible.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Border radius should not round the clipping region when mixing overflow: visible and clip</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434">
+<link rel="match" href="rounded-overflow-clip-visible-ref.html">
+<style>
+.container {
+ width: 100px;
+ height: 50px;
+ overflow: clip visible;
+ background: red;
+ display: inline-block;
+}
+.border-radius {
+ border-radius: 25px;
+}
+.child {
+ width: 200px;
+ height: 100px;
+ background: green;
+ fill: green;
+}
+</style>
+
+There should be 4 100x100 green squares (no rounded corners) below.<br>
+<div class="container border-radius">
+ <div class="child"></div>
+</div>
+
+<div class="container">
+ <div class="child"></div>
+</div>
+
+<svg class="container border-radius">
+ <rect class="child"></rect>
+</svg>
+
+<svg class="container">
+ <rect class="child"></rect>
+</svg>
diff --git a/css/css-overflow/rounded-overflow-visible-clip-ref.html b/css/css-overflow/rounded-overflow-visible-clip-ref.html
new file mode 100644
index 00000000000000..a97633ed3bd7c0
--- /dev/null
+++ b/css/css-overflow/rounded-overflow-visible-clip-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+.box {
+ width: 100px;
+ height: 100px;
+ background: green;
+ display: inline-block;
+}
+</style>
+
+There should be 4 100x100 green squares (no rounded corners) below.<br>
+<div class="box"></div>
+<br>
+<div class="box"></div>
+<br>
+<div class="box"></div>
+<br>
+<div class="box"></div>
diff --git a/css/css-overflow/rounded-overflow-visible-clip.html b/css/css-overflow/rounded-overflow-visible-clip.html
new file mode 100644
index 00000000000000..8bd727e1cfd6fd
--- /dev/null
+++ b/css/css-overflow/rounded-overflow-visible-clip.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Border radius should not round the clipping region when mixing overflow: visible and clip</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434">
+<link rel="match" href="rounded-overflow-visible-clip-ref.html">
+<style>
+.container {
+ width: 50px;
+ height: 100px;
+ overflow: visible clip;
+ background: red;
+ display: inline-block;
+}
+.border-radius {
+ border-radius: 25px;
+}
+.child {
+ width: 100px;
+ height: 200px;
+ background: green;
+ fill: green;
+}
+</style>
+
+There should be 4 100x100 green squares (no rounded corners) below.<br>
+<div class="container border-radius">
+ <div class="child"></div>
+</div>
+<br>
+<div class="container">
+ <div class="child"></div>
+</div>
+<br>
+<svg class="container border-radius">
+ <rect class="child"></rect>
+</svg>
+<br>
+<svg class="container">
+ <rect class="child"></rect>
+</svg>