diff --git a/components/layout_2020/display_list/mod.rs b/components/layout_2020/display_list/mod.rs
index 0936e463df8..c4a6dda0cbf 100644
--- a/components/layout_2020/display_list/mod.rs
+++ b/components/layout_2020/display_list/mod.rs
@@ -322,12 +322,30 @@ impl<'a> BuilderForBoxFragment<'a> {
)
};
let b = fragment.style.get_border();
- wr::BorderRadius {
+ let mut radius = wr::BorderRadius {
top_left: corner(&b.border_top_left_radius),
top_right: corner(&b.border_top_right_radius),
bottom_right: corner(&b.border_bottom_right_radius),
bottom_left: corner(&b.border_bottom_left_radius),
+ };
+ // Normalize radii that add up to > 100%.
+ // https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
+ // > Let f = min(L_i/S_i), where i ∈ {top, right, bottom, left},
+ // > S_i is the sum of the two corresponding radii of the corners on side i,
+ // > and L_top = L_bottom = the width of the box,
+ // > and L_left = L_right = the height of the box.
+ // > If f < 1, then all corner radii are reduced by multiplying them by f.
+ let f = (border_rect.width() / (radius.top_left.width + radius.top_right.width))
+ .min(border_rect.width() / (radius.bottom_left.width + radius.bottom_right.width))
+ .min(border_rect.height() / (radius.top_left.height + radius.bottom_left.height))
+ .min(border_rect.height() / (radius.top_right.height + radius.bottom_right.height));
+ if f < 1.0 {
+ radius.top_left *= f;
+ radius.top_right *= f;
+ radius.bottom_right *= f;
+ radius.bottom_left *= f;
}
+ radius
};
Self {
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 919fb878d55..7e9a60105af 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -131138,7 +131138,7 @@
}
]
],
- "background-rounded-image-clip.html": [
+ "background-rounded-image-clip-001.html": [
"e6222190c192c0fa3db307e2c0cecf6d9a99a13c",
[
null,
@@ -131167,6 +131167,35 @@
}
]
],
+ "background-rounded-image-clip-002.html": [
+ "4af7702602027ae39c26befcd1f04d2e323e4642",
+ [
+ null,
+ [
+ [
+ "/css/reference/ref-filled-green-200px-square.html",
+ "=="
+ ]
+ ],
+ {
+ "fuzzy": [
+ [
+ null,
+ [
+ [
+ 0,
+ 5
+ ],
+ [
+ 0,
+ 100
+ ]
+ ]
+ ]
+ ]
+ }
+ ]
+ ],
"background-size": {
"background-size-contain.xht": [
"7309905bbac46d67f16907d799fb3ba7716bb31a",
diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip.html b/tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip-001.html
similarity index 100%
rename from tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip.html
rename to tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip-001.html
diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip-002.html b/tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip-002.html
new file mode 100644
index 00000000000..4af77026020
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip-002.html
@@ -0,0 +1,35 @@
+
+
+Background Clip Follows Rounded Corner
+
+
+
+
+
+
+Test passes if there is a filled green square and no red.
+