Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-07-23 23:33:43 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make border radii clip their contents.

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

8
components/gfx/display_list/mod.rs
View file

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

8
components/layout/display_list_builder.rs
View file

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

24
tests/wpt/mozilla/meta/MANIFEST.json
View file

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

21
tests/wpt/mozilla/tests/css/border_radius_clipping_contents_a.html Normal file
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>

16
tests/wpt/mozilla/tests/css/border_radius_clipping_contents_ref.html Normal file
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>