mirror of
https://github.com/servo/servo.git
synced 2025-07-25 08:10:21 +01:00
Make border radii clip their contents.
Needed for browser.html rounded corners.
This commit is contained in:
parent
aea8d8959d
commit
28a71c4820
5 changed files with 70 additions and 7 deletions
|
@ -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.
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue