Make border radii clip their contents.

Needed for browser.html rounded corners.
servo · bors-servo · Mar 15, 2016 · Feb 29, 2016 · Mar 15, 2016 · 28a71c48202bcd9c719751b623fcf3333a27c7ca
commit 28a71c48202bcd9c719751b623fcf3333a27c7ca
diff --git a/components/gfx/display_list/mod.rs b/components/gfx/display_list/mod.rs
@@ -762,9 +762,7 @@ pub struct BaseDisplayItem {
 
 impl BaseDisplayItem {
     #[inline(always)]
-    pub fn new(bounds: &Rect<Au>,
-               metadata: DisplayItemMetadata,
-               clip: &ClippingRegion)
+    pub fn new(bounds: &Rect<Au>, metadata: DisplayItemMetadata, clip: &ClippingRegion)
                -> BaseDisplayItem {
         // Detect useless clipping regions here and optimize them to `ClippingRegion::max()`.
         // The painting backend may want to optimize out clipping regions and this makes it easier
@@ -887,13 +885,11 @@ impl ClippingRegion {
 
     /// Intersects this clipping region with the given rounded rectangle.
     #[inline]
-    pub fn intersect_with_rounded_rect(mut self, rect: &Rect<Au>, radii: &BorderRadii<Au>)
-                                       -> ClippingRegion {
+    pub fn intersect_with_rounded_rect(&mut self, rect: &Rect<Au>, radii: &BorderRadii<Au>) {
         self.complex.push(ComplexClippingRegion {
             rect: *rect,
             radii: *radii,
         });
-        self
     }
 
     /// Translates this clipping region by the given vector.

diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
@@ -335,7 +335,7 @@ impl FragmentDisplayListBuilding for Fragment {
         let border_radii = build_border_radius(absolute_bounds, style.get_border());
         let mut clip = (*clip).clone();
         if !border_radii.is_square() {
-            clip = clip.intersect_with_rounded_rect(absolute_bounds, &border_radii)
+            clip.intersect_with_rounded_rect(absolute_bounds, &border_radii)
         }
 
         // FIXME: This causes a lot of background colors to be displayed when they are clearly not
@@ -1473,6 +1473,12 @@ impl FragmentDisplayListBuilding for Fragment {
             }
             _ => {}
         }
+
+        let border_radii = build_border_radius(stacking_relative_border_box,
+                                               self.style.get_border());
+        if !border_radii.is_square() {
+            current_clip.intersect_with_rounded_rect(stacking_relative_border_box, &border_radii)
+        }
     }
 
     fn build_display_list_for_text_fragment(&self,

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -788,6 +788,18 @@
             "url": "/_mozilla/css/border_radius_clip_a.html"
           }
         ],
+        "css/border_radius_clipping_contents_a.html": [
+          {
+            "path": "css/border_radius_clipping_contents_a.html",
+            "references": [
+              [
+                "/_mozilla/css/border_radius_clipping_contents_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/border_radius_clipping_contents_a.html"
+          }
+        ],
         "css/border_radius_dashed_a.html": [
           {
             "path": "css/border_radius_dashed_a.html",
@@ -6988,6 +7000,18 @@
           "url": "/_mozilla/css/border_radius_clip_a.html"
         }
       ],
+      "css/border_radius_clipping_contents_a.html": [
+        {
+          "path": "css/border_radius_clipping_contents_a.html",
+          "references": [
+            [
+              "/_mozilla/css/border_radius_clipping_contents_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/border_radius_clipping_contents_a.html"
+        }
+      ],
       "css/border_radius_dashed_a.html": [
         {
           "path": "css/border_radius_dashed_a.html",

diff --git a/tests/wpt/mozilla/tests/css/border_radius_clipping_contents_a.html b/tests/wpt/mozilla/tests/css/border_radius_clipping_contents_a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="border_radius_clipping_contents_ref.html">
+<style>
+section, div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 128px;
+    height: 128px;
+}
+section {
+    border-radius: 24px;
+    overflow: hidden;
+}
+div {
+    background: gold;
+}
+</style>
+<section><div></div></section>
+
diff --git a/tests/wpt/mozilla/tests/css/border_radius_clipping_contents_ref.html b/tests/wpt/mozilla/tests/css/border_radius_clipping_contents_ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+section, div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 128px;
+    height: 128px;
+}
+section {
+    border-radius: 24px;
+    background: gold;
+}
+</style>
+<section></section>
+