Make border radii clip their contents.

Needed for browser.html rounded corners.
This commit is contained in:
Patrick Walton 2016-02-29 14:31:08 -08:00
parent aea8d8959d
commit 28a71c4820
5 changed files with 70 additions and 7 deletions

View file

@ -762,9 +762,7 @@ pub struct BaseDisplayItem {
impl BaseDisplayItem { impl BaseDisplayItem {
#[inline(always)] #[inline(always)]
pub fn new(bounds: &Rect<Au>, pub fn new(bounds: &Rect<Au>, metadata: DisplayItemMetadata, clip: &ClippingRegion)
metadata: DisplayItemMetadata,
clip: &ClippingRegion)
-> BaseDisplayItem { -> BaseDisplayItem {
// Detect useless clipping regions here and optimize them to `ClippingRegion::max()`. // 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 // 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. /// Intersects this clipping region with the given rounded rectangle.
#[inline] #[inline]
pub fn intersect_with_rounded_rect(mut self, rect: &Rect<Au>, radii: &BorderRadii<Au>) pub fn intersect_with_rounded_rect(&mut self, rect: &Rect<Au>, radii: &BorderRadii<Au>) {
-> ClippingRegion {
self.complex.push(ComplexClippingRegion { self.complex.push(ComplexClippingRegion {
rect: *rect, rect: *rect,
radii: *radii, radii: *radii,
}); });
self
} }
/// Translates this clipping region by the given vector. /// Translates this clipping region by the given vector.

View file

@ -335,7 +335,7 @@ impl FragmentDisplayListBuilding for Fragment {
let border_radii = build_border_radius(absolute_bounds, style.get_border()); let border_radii = build_border_radius(absolute_bounds, style.get_border());
let mut clip = (*clip).clone(); let mut clip = (*clip).clone();
if !border_radii.is_square() { 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 // 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, fn build_display_list_for_text_fragment(&self,

View file

@ -788,6 +788,18 @@
"url": "/_mozilla/css/border_radius_clip_a.html" "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": [ "css/border_radius_dashed_a.html": [
{ {
"path": "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" "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": [ "css/border_radius_dashed_a.html": [
{ {
"path": "css/border_radius_dashed_a.html", "path": "css/border_radius_dashed_a.html",

View file

@ -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>

View file

@ -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>