diff --git a/components/layout/display_list/mod.rs b/components/layout/display_list/mod.rs
index 395b9f0e840..87eeeefd202 100644
--- a/components/layout/display_list/mod.rs
+++ b/components/layout/display_list/mod.rs
@@ -1601,20 +1601,20 @@ fn glyphs_advance_by_index(
 /// Radii for the padding edge or content edge
 fn inner_radii(mut radii: wr::BorderRadius, insets: units::LayoutSideOffsets) -> wr::BorderRadius {
     assert!(insets.left >= 0.0, "left inset must not be negative");
-    radii.top_left.width -= insets.left;
-    radii.bottom_left.width -= insets.left;
+    radii.top_left.width = (radii.top_left.width - insets.left).max(0.0);
+    radii.bottom_left.width = (radii.bottom_left.width - insets.left).max(0.0);
 
     assert!(insets.right >= 0.0, "left inset must not be negative");
-    radii.top_right.width -= insets.right;
-    radii.bottom_right.width -= insets.right;
+    radii.top_right.width = (radii.top_right.width - insets.right).max(0.0);
+    radii.bottom_right.width = (radii.bottom_right.width - insets.right).max(0.0);
 
     assert!(insets.top >= 0.0, "top inset must not be negative");
-    radii.top_left.height -= insets.top;
-    radii.top_right.height -= insets.top;
+    radii.top_left.height = (radii.top_left.height - insets.top).max(0.0);
+    radii.top_right.height = (radii.top_right.height - insets.top).max(0.0);
 
     assert!(insets.bottom >= 0.0, "bottom inset must not be negative");
-    radii.bottom_left.height -= insets.bottom;
-    radii.bottom_right.height -= insets.bottom;
+    radii.bottom_left.height = (radii.bottom_left.height - insets.bottom).max(0.0);
+    radii.bottom_right.height = (radii.bottom_right.height - insets.bottom).max(0.0);
     radii
 }
 
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index fdaeacb08a2..9567c9094e7 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -130383,6 +130383,64 @@
        {}
       ]
      ],
+     "background-clip-content-box-with-border-radius-002.html": [
+      "e2600c6b7b2b7c6805f17981514bf9aff48f0cab",
+      [
+       null,
+       [
+        [
+         "/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-002-ref.html",
+         "=="
+        ]
+       ],
+       {
+        "fuzzy": [
+         [
+          null,
+          [
+           [
+            0,
+            96
+           ],
+           [
+            0,
+            400
+           ]
+          ]
+         ]
+        ]
+       }
+      ]
+     ],
+     "background-clip-content-box-with-border-radius-003.html": [
+      "f2f256589580be4e3668b5c96cbe4a7299628ba1",
+      [
+       null,
+       [
+        [
+         "/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-003-ref.html",
+         "=="
+        ]
+       ],
+       {
+        "fuzzy": [
+         [
+          null,
+          [
+           [
+            0,
+            96
+           ],
+           [
+            0,
+            400
+           ]
+          ]
+         ]
+        ]
+       }
+      ]
+     ],
      "background-clip-padding-box-001.html": [
       "ed2b21b14837553598fc940d6db4e939fd278e2c",
       [
@@ -130396,6 +130454,64 @@
        {}
       ]
      ],
+     "background-clip-padding-box-with-border-radius-002.html": [
+      "88b304aee00ced3878af401f762065eb1c945232",
+      [
+       null,
+       [
+        [
+         "/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-002-ref.html",
+         "=="
+        ]
+       ],
+       {
+        "fuzzy": [
+         [
+          null,
+          [
+           [
+            0,
+            96
+           ],
+           [
+            0,
+            400
+           ]
+          ]
+         ]
+        ]
+       }
+      ]
+     ],
+     "background-clip-padding-box-with-border-radius-003.html": [
+      "a9c5c6f7e68de1eae3b15c22e23a1d0e56b018da",
+      [
+       null,
+       [
+        [
+         "/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-003-ref.html",
+         "=="
+        ]
+       ],
+       {
+        "fuzzy": [
+         [
+          null,
+          [
+           [
+            0,
+            96
+           ],
+           [
+            0,
+            400
+           ]
+          ]
+         ]
+        ]
+       }
+      ]
+     ],
      "background-clip-padding-box-with-border-radius.html": [
       "22d7bd9d297d25206834f93c78b27d9bc3b28039",
       [
@@ -429349,6 +429465,22 @@
        "dc6d9a00d53495e17f21adc8915176dd8c681e1e",
        []
       ],
+      "background-clip-content-box-with-border-radius-002-ref.html": [
+       "6780f8c8d57e9a0b2978c287d1afe43bb82cba9b",
+       []
+      ],
+      "background-clip-content-box-with-border-radius-003-ref.html": [
+       "3ba6af62d30a4bb75458e2f0ccc554fd200c8464",
+       []
+      ],
+      "background-clip-padding-box-with-border-radius-002-ref.html": [
+       "6780f8c8d57e9a0b2978c287d1afe43bb82cba9b",
+       []
+      ],
+      "background-clip-padding-box-with-border-radius-003-ref.html": [
+       "a3d03d4f5ee3f92938b94056fa2c7b58e3da214a",
+       []
+      ],
       "background-clip-padding-box-with-border-radius-ref.html": [
        "545b80d35163b43e136d21f7584082b3b9401b38",
        []
diff --git a/tests/wpt/meta/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html.ini b/tests/wpt/meta/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html.ini
new file mode 100644
index 00000000000..d4f23ae0b0c
--- /dev/null
+++ b/tests/wpt/meta/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html.ini
@@ -0,0 +1,2 @@
+[background-clip-content-box-with-border-radius-003.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html.ini b/tests/wpt/meta/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html.ini
new file mode 100644
index 00000000000..501008ce2a9
--- /dev/null
+++ b/tests/wpt/meta/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html.ini
@@ -0,0 +1,2 @@
+[background-clip-padding-box-with-border-radius-003.html]
+  expected: FAIL
diff --git a/tests/wpt/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-002.html b/tests/wpt/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-002.html
new file mode 100644
index 00000000000..e2600c6b7b2
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Test: background-clip: content-box with border-radius</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping">
+<link rel="help" href="https://github.com/servo/servo/issues/39540">
+<link rel="match" href="reference/background-clip-content-box-with-border-radius-002-ref.html">
+<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400">
+<meta name="assert" content="Backgrounds clipped to the content box should follow the content box curve, which should be equal to the outer border radius minus the corresponding border+padding thickness.">
+
+<div style="
+  width: 50px;
+  height: 50px;
+  border: 25px solid black;
+  border-radius: 100% 0 0 0;
+  background-color: black;
+  background-clip: content-box;
+"></div>
diff --git a/tests/wpt/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html b/tests/wpt/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html
new file mode 100644
index 00000000000..f2f25658958
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/background-clip-content-box-with-border-radius-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Test: background-clip: content-box with border-radius</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping">
+<link rel="help" href="https://github.com/servo/servo/issues/39540">
+<link rel="match" href="reference/background-clip-content-box-with-border-radius-003-ref.html">
+<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400">
+<meta name="assert" content="Backgrounds clipped to the content box should follow the content box curve, which should be equal to the outer border radius minus the corresponding border+padding thickness.">
+
+<div style="
+  width: 100px;
+  height: 100px;
+  padding: 25px;
+  border: 25px solid transparent;
+  border-radius: 100% 0 0 0;
+  background-color: black;
+  background-clip: content-box;
+"></div>
diff --git a/tests/wpt/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-002.html b/tests/wpt/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-002.html
new file mode 100644
index 00000000000..88b304aee00
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping">
+<link rel="help" href="https://github.com/servo/servo/issues/39540">
+<link rel="match" href="reference/background-clip-padding-box-with-border-radius-002-ref.html">
+<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400">
+<meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness.">
+
+<div style="
+  width: 20px;
+  height: 20px;
+  padding: 20px;
+  border: 20px solid black;
+  border-radius: 100% 0 0 0;
+  background-color: black;
+  background-clip: padding-box;
+"></div>
diff --git a/tests/wpt/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html b/tests/wpt/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html
new file mode 100644
index 00000000000..a9c5c6f7e68
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/background-clip-padding-box-with-border-radius-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip">
+<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-shaping">
+<link rel="help" href="https://github.com/servo/servo/issues/39540">
+<link rel="match" href="reference/background-clip-padding-box-with-border-radius-003-ref.html">
+<meta name="fuzzy" content="maxDifference=0-96; totalPixels=0-400">
+<meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness.">
+
+<div style="
+  width: 50px;
+  height: 50px;
+  padding: 25px;
+  border: 25px solid transparent;
+  border-radius: 100% 0 0 0;
+  background-color: black;
+  background-clip: padding-box;
+"></div>
diff --git a/tests/wpt/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-002-ref.html b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-002-ref.html
new file mode 100644
index 00000000000..6780f8c8d57
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+
+<div style="width: 100px; height: 100px; overflow: hidden">
+  <div style="width: 200px; height: 200px; border-radius: 100px; background-color: black;"></div>
+</div>
diff --git a/tests/wpt/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-003-ref.html b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-003-ref.html
new file mode 100644
index 00000000000..3ba6af62d30
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-content-box-with-border-radius-003-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+
+<div style="
+  width: 100px;
+  height: 100px;
+  border: 50px solid white;
+  border-top-left-radius: 100%;
+  background-color: black;
+"></div>
diff --git a/tests/wpt/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-002-ref.html b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-002-ref.html
new file mode 100644
index 00000000000..6780f8c8d57
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+
+<div style="width: 100px; height: 100px; overflow: hidden">
+  <div style="width: 200px; height: 200px; border-radius: 100px; background-color: black;"></div>
+</div>
diff --git a/tests/wpt/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-003-ref.html b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-003-ref.html
new file mode 100644
index 00000000000..a3d03d4f5ee
--- /dev/null
+++ b/tests/wpt/tests/css/css-backgrounds/reference/background-clip-padding-box-with-border-radius-003-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+
+<div style="
+  width: 50px;
+  height: 50px;
+  padding: 25px;
+  border: 25px solid white;
+  border-top-left-radius: 100%;
+  background-color: black;
+"></div>