From 232df236a7b95b2d8ae7d7d271fab2c45b4c7ae4 Mon Sep 17 00:00:00 2001
From: Daniel Alley <dalley@redhat.com>
Date: Fri, 17 Apr 2020 15:05:52 -0400
Subject: [PATCH 1/2] Fix combination of border and border-radius being drawn
 incorrectly

fixes #20922
---
 components/layout/display_list/builder.rs | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/layout/display_list/builder.rs b/components/layout/display_list/builder.rs
index 2c0f6d612e1..e4d20d48de7 100644
--- a/components/layout/display_list/builder.rs
+++ b/components/layout/display_list/builder.rs
@@ -1733,8 +1733,18 @@ impl Fragment {
                 build_border_radius_for_inner_rect(stacking_relative_border_box, &self.style);
 
             if !radii.is_zero() {
-                let clip_id =
-                    state.add_late_clip_node(stacking_relative_border_box.to_layout(), radii);
+                // This is already calculated inside of build_border_radius_for_inner_rect(), it would be
+                // nice if it were only calculated once.
+                let border_widths = self
+                    .style
+                    .logical_border_width()
+                    .to_physical(self.style.writing_mode);
+                let clip_id = state.add_late_clip_node(
+                    stacking_relative_border_box
+                        .inner_rect(border_widths)
+                        .to_layout(),
+                    radii,
+                );
                 state.current_clipping_and_scrolling = ClippingAndScrolling::simple(clip_id);
             }
 

From 1d9d55ce27a25a9fd24f7c9fcdcc8c2ce8a2639b Mon Sep 17 00:00:00 2001
From: Josh Matthews <josh@joshmatthews.net>
Date: Thu, 30 Apr 2020 18:39:25 -0400
Subject: [PATCH 2/2] Add automated test.

---
 .../css/border-radius-image.html.ini            |  2 ++
 tests/wpt/mozilla/meta/MANIFEST.json            | 17 +++++++++++++++++
 .../meta/css/border-radius-image.html.ini       |  2 ++
 .../tests/css/border-radius-image-ref.html      | 10 ++++++++++
 .../mozilla/tests/css/border-radius-image.html  |  9 +++++++++
 5 files changed, 40 insertions(+)
 create mode 100644 tests/wpt/mozilla/meta-layout-2020/css/border-radius-image.html.ini
 create mode 100644 tests/wpt/mozilla/meta/css/border-radius-image.html.ini
 create mode 100644 tests/wpt/mozilla/tests/css/border-radius-image-ref.html
 create mode 100644 tests/wpt/mozilla/tests/css/border-radius-image.html

diff --git a/tests/wpt/mozilla/meta-layout-2020/css/border-radius-image.html.ini b/tests/wpt/mozilla/meta-layout-2020/css/border-radius-image.html.ini
new file mode 100644
index 00000000000..6b72cd5834f
--- /dev/null
+++ b/tests/wpt/mozilla/meta-layout-2020/css/border-radius-image.html.ini
@@ -0,0 +1,2 @@
+[border-radius-image.html]
+  expected: FAIL
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 43a57321277..b41cff5f3a8 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -896,6 +896,19 @@
       {}
      ]
     ],
+    "border-radius-image.html": [
+     "2e30ba4bcb40b0fd50ae2c35992e06423720b26e",
+     [
+      null,
+      [
+       [
+        "/_mozilla/css/border-radius-image-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ],
     "border_black_groove.html": [
      "49e1647a6f71e320770225ad537b4fd4020bd700",
      [
@@ -8670,6 +8683,10 @@
      "0dddcf89d26d6ac1efe7b0d65e5607a3ed771b46",
      []
     ],
+    "border-radius-image-ref.html": [
+     "3aa9bea5a48a4d809fabf1108049a24365edb07f",
+     []
+    ],
     "border_black_solid.html": [
      "63ef95bef813b5c3a75c0da4cd7773f35db3c5ff",
      []
diff --git a/tests/wpt/mozilla/meta/css/border-radius-image.html.ini b/tests/wpt/mozilla/meta/css/border-radius-image.html.ini
new file mode 100644
index 00000000000..a47e51b37c9
--- /dev/null
+++ b/tests/wpt/mozilla/meta/css/border-radius-image.html.ini
@@ -0,0 +1,2 @@
+[border-radius-image.html]
+  fuzzy: /_mozilla/css/border-radius-image-ref.html:63;696
diff --git a/tests/wpt/mozilla/tests/css/border-radius-image-ref.html b/tests/wpt/mozilla/tests/css/border-radius-image-ref.html
new file mode 100644
index 00000000000..3aa9bea5a48
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/border-radius-image-ref.html
@@ -0,0 +1,10 @@
+<style>
+#ref {
+    width: 100px;
+    height: 100px;
+    border: 10px solid black;
+    border-radius: 60px;
+    background-color: #00ff00;
+}
+</style>
+<div id="ref"></div>
diff --git a/tests/wpt/mozilla/tests/css/border-radius-image.html b/tests/wpt/mozilla/tests/css/border-radius-image.html
new file mode 100644
index 00000000000..2e30ba4bcb4
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/border-radius-image.html
@@ -0,0 +1,9 @@
+<link rel="match" href="border-radius-image-ref.html">
+<!-- Border-radius should apply to the actual image as well as the border -->
+<style>
+img {
+    border: 10px solid black;
+    border-radius: 60px;
+}
+</style>
+<img src="/images/green-1x1.png" width=100 height=100>