Auto merge of #26215 - dralley:fix-image-border, r=jdm

Fix combination of border and border-radius being drawn incorrectly

fixes #20922

Manual testcase in the attached issue

- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #20922

<!-- Either: -->
- [x] There are tests for these changes OR
- [ ] These changes do not require tests because ___

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);
             }
 

tests/wpt/mozilla/meta-layout-2020/css/border-radius-image.html.ini

@@ -0,0 +1,2 @@
+[border-radius-image.html]
+  expected: FAIL

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",
      []

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

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>

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>