gfx: Clip the background properly when border-radius is used.

Improves Reddit, GitHub, etc.
This commit is contained in:
Patrick Walton 2014-12-22 11:36:43 -08:00
parent b22b29533a
commit cc7cacfd5f
12 changed files with 356 additions and 119 deletions

View file

@ -23,7 +23,7 @@ use geom::approxeq::ApproxEq;
use geom::{Point2D, Rect, Size2D, SideOffsets2D};
use gfx::color;
use gfx::display_list::{BOX_SHADOW_INFLATION_FACTOR, BaseDisplayItem, BorderDisplayItem};
use gfx::display_list::{BorderRadii, BoxShadowDisplayItem};
use gfx::display_list::{BorderRadii, BoxShadowDisplayItem, ClippingRegion};
use gfx::display_list::{DisplayItem, DisplayList, DisplayItemMetadata};
use gfx::display_list::{GradientDisplayItem};
use gfx::display_list::{GradientStop, ImageDisplayItem, LineDisplayItem};
@ -35,7 +35,7 @@ use servo_msg::compositor_msg::{FixedPosition, Scrollable};
use servo_msg::constellation_msg::{ConstellationChan, FrameRectMsg};
use servo_net::image::holder::ImageHolder;
use servo_util::cursor::{DefaultCursor, TextCursor, VerticalTextCursor};
use servo_util::geometry::{mod, Au, ZERO_POINT, ZERO_RECT};
use servo_util::geometry::{mod, Au, ZERO_POINT};
use servo_util::logical_geometry::{LogicalRect, WritingMode};
use servo_util::opts;
use std::default::Default;
@ -82,7 +82,7 @@ pub trait FragmentDisplayListBuilding {
layout_context: &LayoutContext,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
/// Adds the display items necessary to paint the background image of this fragment to the
/// display list at the appropriate stacking level.
@ -92,7 +92,7 @@ pub trait FragmentDisplayListBuilding {
layout_context: &LayoutContext,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>,
clip: &ClippingRegion,
image_url: &Url);
/// Adds the display items necessary to paint the background linear gradient of this fragment
@ -101,7 +101,7 @@ pub trait FragmentDisplayListBuilding {
display_list: &mut DisplayList,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>,
clip: &ClippingRegion,
gradient: &LinearGradient,
style: &ComputedValues);
@ -112,7 +112,7 @@ pub trait FragmentDisplayListBuilding {
display_list: &mut DisplayList,
abs_bounds: &Rect<Au>,
level: StackingLevel,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
/// Adds the display items necessary to paint the outline of this fragment to the display list
/// if necessary.
@ -120,7 +120,7 @@ pub trait FragmentDisplayListBuilding {
style: &ComputedValues,
display_list: &mut DisplayList,
bounds: &Rect<Au>,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
/// Adds the display items necessary to paint the box shadow of this fragment to the display
/// list if necessary.
@ -130,19 +130,19 @@ pub trait FragmentDisplayListBuilding {
layout_context: &LayoutContext,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
fn build_debug_borders_around_text_fragments(&self,
style: &ComputedValues,
display_list: &mut DisplayList,
flow_origin: Point2D<Au>,
text_fragment: &ScannedTextFragmentInfo,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
fn build_debug_borders_around_fragment(&self,
display_list: &mut DisplayList,
flow_origin: Point2D<Au>,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
/// Adds the display items for this fragment to the given display list.
///
@ -152,13 +152,13 @@ pub trait FragmentDisplayListBuilding {
/// * `layout_context`: The layout context.
/// * `dirty`: The dirty rectangle in the coordinate system of the owning flow.
/// * `flow_origin`: Position of the origin of the owning flow wrt the display list root flow.
/// * `clip_rect`: The rectangle to clip the display items to.
/// * `clip`: The region to clip the display items to.
fn build_display_list(&mut self,
display_list: &mut DisplayList,
layout_context: &LayoutContext,
flow_origin: Point2D<Au>,
background_and_border_level: BackgroundAndBorderLevel,
clip_rect: &Rect<Au>);
clip: &ClippingRegion);
/// Sends the size and position of this iframe fragment to the constellation. This is out of
/// line to guide inlining.
@ -167,13 +167,13 @@ pub trait FragmentDisplayListBuilding {
offset: Point2D<Au>,
layout_context: &LayoutContext);
fn clipping_region_for_children(&self, current_clip: ClippingRegion, flow_origin: Point2D<Au>)
fn clipping_region_for_children(&self, current_clip: &ClippingRegion, flow_origin: &Point2D<Au>)
-> ClippingRegion;
/// Calculates the clipping rectangle for a fragment, taking the `clip` property into account
/// per CSS 2.1 § 11.1.2.
fn calculate_style_specified_clip(&self, parent_clip_rect: &Rect<Au>, origin: &Point2D<Au>)
-> Rect<Au>;
fn calculate_style_specified_clip(&self, parent_clip: &ClippingRegion, origin: &Point2D<Au>)
-> ClippingRegion;
/// Creates the text display item for one text fragment.
fn build_display_list_for_text_fragment(&self,
@ -224,7 +224,14 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context: &LayoutContext,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
// Adjust the clipping region as necessary to account for `border-radius`.
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)
}
// FIXME: This causes a lot of background colors to be displayed when they are clearly not
// needed. We could use display list optimization to clean this up, but it still seems
// inefficient. What we really want is something like "nearest ancestor element that
@ -236,7 +243,7 @@ impl FragmentDisplayListBuilding for Fragment {
DisplayItemMetadata::new(self.node,
style,
DefaultCursor),
*clip_rect),
clip.clone()),
color: background_color.to_gfx_color(),
}), level);
}
@ -251,7 +258,7 @@ impl FragmentDisplayListBuilding for Fragment {
self.build_display_list_for_background_linear_gradient(display_list,
level,
absolute_bounds,
clip_rect,
&clip,
gradient,
style)
}
@ -261,7 +268,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context,
level,
absolute_bounds,
clip_rect,
&clip,
image_url)
}
}
@ -273,7 +280,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context: &LayoutContext,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>,
clip: &ClippingRegion,
image_url: &Url) {
let background = style.get_background();
let mut holder = ImageHolder::new(image_url.clone(),
@ -297,7 +304,7 @@ impl FragmentDisplayListBuilding for Fragment {
// Clip.
//
// TODO: Check the bounds to see if a clip item is actually required.
let clip_rect = clip_rect.intersection(&bounds).unwrap_or(ZERO_RECT);
let clip = clip.clone().intersect_rect(&bounds);
// Use background-attachment to get the initial virtual origin
let (virtual_origin_x, virtual_origin_y) = match background.background_attachment {
@ -350,7 +357,7 @@ impl FragmentDisplayListBuilding for Fragment {
display_list.push(DisplayItem::ImageClass(box ImageDisplayItem {
base: BaseDisplayItem::new(bounds,
DisplayItemMetadata::new(self.node, style, DefaultCursor),
clip_rect),
clip),
image: image.clone(),
stretch_size: Size2D(Au::from_px(image.width as int),
Au::from_px(image.height as int)),
@ -361,10 +368,10 @@ impl FragmentDisplayListBuilding for Fragment {
display_list: &mut DisplayList,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>,
clip: &ClippingRegion,
gradient: &LinearGradient,
style: &ComputedValues) {
let clip_rect = clip_rect.intersection(absolute_bounds).unwrap_or(ZERO_RECT);
let clip = clip.clone().intersect_rect(absolute_bounds);
// This is the distance between the center and the ending point; i.e. half of the distance
// between the starting point and the ending point.
@ -460,7 +467,7 @@ impl FragmentDisplayListBuilding for Fragment {
let gradient_display_item = DisplayItem::GradientClass(box GradientDisplayItem {
base: BaseDisplayItem::new(*absolute_bounds,
DisplayItemMetadata::new(self.node, style, DefaultCursor),
clip_rect),
clip),
start_point: center - delta,
end_point: center + delta,
stops: stops,
@ -475,7 +482,7 @@ impl FragmentDisplayListBuilding for Fragment {
_layout_context: &LayoutContext,
level: StackingLevel,
absolute_bounds: &Rect<Au>,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
// NB: According to CSS-BACKGROUNDS, box shadows render in *reverse* order (front to back).
for box_shadow in style.get_effects().box_shadow.iter().rev() {
let inflation = box_shadow.spread_radius + box_shadow.blur_radius *
@ -488,7 +495,7 @@ impl FragmentDisplayListBuilding for Fragment {
DisplayItemMetadata::new(self.node,
style,
DefaultCursor),
*clip_rect),
(*clip).clone()),
box_bounds: *absolute_bounds,
color: style.resolve_color(box_shadow.color).to_gfx_color(),
offset: Point2D(box_shadow.offset_x, box_shadow.offset_y),
@ -504,7 +511,7 @@ impl FragmentDisplayListBuilding for Fragment {
display_list: &mut DisplayList,
abs_bounds: &Rect<Au>,
level: StackingLevel,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
let border = style.logical_border_width();
if border.is_zero() {
return
@ -519,7 +526,7 @@ impl FragmentDisplayListBuilding for Fragment {
display_list.push(DisplayItem::BorderClass(box BorderDisplayItem {
base: BaseDisplayItem::new(*abs_bounds,
DisplayItemMetadata::new(self.node, style, DefaultCursor),
*clip_rect),
(*clip).clone()),
border_widths: border.to_physical(style.writing_mode),
color: SideOffsets2D::new(top_color.to_gfx_color(),
right_color.to_gfx_color(),
@ -537,7 +544,7 @@ impl FragmentDisplayListBuilding for Fragment {
style: &ComputedValues,
display_list: &mut DisplayList,
bounds: &Rect<Au>,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
let width = style.get_outline().outline_width;
if width == Au(0) {
return
@ -561,7 +568,7 @@ impl FragmentDisplayListBuilding for Fragment {
display_list.outlines.push_back(DisplayItem::BorderClass(box BorderDisplayItem {
base: BaseDisplayItem::new(bounds,
DisplayItemMetadata::new(self.node, style, DefaultCursor),
*clip_rect),
(*clip).clone()),
border_widths: SideOffsets2D::new_all_same(width),
color: SideOffsets2D::new_all_same(color),
style: SideOffsets2D::new_all_same(outline_style),
@ -574,7 +581,7 @@ impl FragmentDisplayListBuilding for Fragment {
display_list: &mut DisplayList,
flow_origin: Point2D<Au>,
text_fragment: &ScannedTextFragmentInfo,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
// FIXME(#2795): Get the real container size
let container_size = Size2D::zero();
// Fragment position wrt to the owning flow.
@ -587,7 +594,7 @@ impl FragmentDisplayListBuilding for Fragment {
display_list.content.push_back(DisplayItem::BorderClass(box BorderDisplayItem {
base: BaseDisplayItem::new(absolute_fragment_bounds,
DisplayItemMetadata::new(self.node, style, DefaultCursor),
*clip_rect),
(*clip).clone()),
border_widths: SideOffsets2D::new_all_same(Au::from_px(1)),
color: SideOffsets2D::new_all_same(color::rgb(0, 0, 200)),
style: SideOffsets2D::new_all_same(border_style::solid),
@ -605,7 +612,7 @@ impl FragmentDisplayListBuilding for Fragment {
let line_display_item = box LineDisplayItem {
base: BaseDisplayItem::new(baseline,
DisplayItemMetadata::new(self.node, style, DefaultCursor),
*clip_rect),
(*clip).clone()),
color: color::rgb(0, 200, 0),
style: border_style::dashed,
};
@ -615,7 +622,7 @@ impl FragmentDisplayListBuilding for Fragment {
fn build_debug_borders_around_fragment(&self,
display_list: &mut DisplayList,
flow_origin: Point2D<Au>,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
// FIXME(#2795): Get the real container size
let container_size = Size2D::zero();
// Fragment position wrt to the owning flow.
@ -630,7 +637,7 @@ impl FragmentDisplayListBuilding for Fragment {
DisplayItemMetadata::new(self.node,
&*self.style,
DefaultCursor),
*clip_rect),
(*clip).clone()),
border_widths: SideOffsets2D::new_all_same(Au::from_px(1)),
color: SideOffsets2D::new_all_same(color::rgb(0, 0, 200)),
style: SideOffsets2D::new_all_same(border_style::solid),
@ -638,22 +645,24 @@ impl FragmentDisplayListBuilding for Fragment {
}));
}
fn calculate_style_specified_clip(&self, parent_clip_rect: &Rect<Au>, origin: &Point2D<Au>)
-> Rect<Au> {
fn calculate_style_specified_clip(&self, parent_clip: &ClippingRegion, origin: &Point2D<Au>)
-> ClippingRegion {
// Account for `clip` per CSS 2.1 § 11.1.2.
let style_clip_rect = match (self.style().get_box().position,
self.style().get_effects().clip) {
(position::absolute, Some(style_clip_rect)) => style_clip_rect,
_ => return *parent_clip_rect,
_ => return (*parent_clip).clone(),
};
// FIXME(pcwalton, #2795): Get the real container size.
let border_box = self.border_box.to_physical(self.style.writing_mode, Size2D::zero());
let clip_origin = Point2D(border_box.origin.x + style_clip_rect.left,
border_box.origin.y + style_clip_rect.top);
Rect(clip_origin + *origin,
Size2D(style_clip_rect.right.unwrap_or(border_box.size.width) - clip_origin.x,
style_clip_rect.bottom.unwrap_or(border_box.size.height) - clip_origin.y))
let new_clip_rect =
Rect(clip_origin + *origin,
Size2D(style_clip_rect.right.unwrap_or(border_box.size.width) - clip_origin.x,
style_clip_rect.bottom.unwrap_or(border_box.size.height) - clip_origin.y));
(*parent_clip).clone().intersect_rect(&new_clip_rect)
}
fn build_display_list(&mut self,
@ -661,7 +670,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context: &LayoutContext,
flow_origin: Point2D<Au>,
background_and_border_level: BackgroundAndBorderLevel,
clip_rect: &Rect<Au>) {
clip: &ClippingRegion) {
// Compute the fragment position relative to the parent stacking context. If the fragment
// itself establishes a stacking context, then the origin of its position will be (0, 0)
// for the purposes of this computation.
@ -692,9 +701,8 @@ impl FragmentDisplayListBuilding for Fragment {
// Calculate the clip rect. If there's nothing to render at all, don't even construct
// display list items.
let clip_rect = self.calculate_style_specified_clip(clip_rect,
&absolute_fragment_bounds.origin);
if !absolute_fragment_bounds.intersects(&clip_rect) {
let clip = self.calculate_style_specified_clip(clip, &absolute_fragment_bounds.origin);
if !clip.might_intersect_rect(&absolute_fragment_bounds) {
return;
}
@ -712,7 +720,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context,
level,
&absolute_fragment_bounds,
clip);
&clip);
}
}
if !self.is_scanned_text_fragment() {
@ -721,7 +729,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context,
level,
&absolute_fragment_bounds,
clip);
&clip);
}
// Add the background to the list, if applicable.
@ -732,7 +740,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context,
level,
&absolute_fragment_bounds,
clip);
&clip);
}
}
if !self.is_scanned_text_fragment() {
@ -741,7 +749,7 @@ impl FragmentDisplayListBuilding for Fragment {
layout_context,
level,
&absolute_fragment_bounds,
clip);
&clip);
}
// Add a border and outlines, if applicable.
@ -751,11 +759,11 @@ impl FragmentDisplayListBuilding for Fragment {
display_list,
&absolute_fragment_bounds,
level,
clip);
&clip);
self.build_display_list_for_outline_if_applicable(&**style,
display_list,
&absolute_fragment_bounds,
clip);
&clip);
}
}
if !self.is_scanned_text_fragment() {
@ -763,19 +771,19 @@ impl FragmentDisplayListBuilding for Fragment {
display_list,
&absolute_fragment_bounds,
level,
clip);
&clip);
self.build_display_list_for_outline_if_applicable(&*self.style,
display_list,
&absolute_fragment_bounds,
clip);
&clip);
}
}
// Create special per-fragment-type display items.
self.build_fragment_type_specific_display_items(display_list, flow_origin, clip);
self.build_fragment_type_specific_display_items(display_list, flow_origin, &clip);
if opts::get().show_debug_fragment_borders {
self.build_debug_borders_around_fragment(display_list, flow_origin, clip)
self.build_debug_borders_around_fragment(display_list, flow_origin, &clip)
}
// If this is an iframe, then send its position and size up to the constellation.
@ -901,15 +909,15 @@ impl FragmentDisplayListBuilding for Fragment {
iframe_rect));
}
fn clipping_region_for_children(&self, current_clip: ClippingRegion, flow_origin: Point2D<Au>)
fn clipping_region_for_children(&self, current_clip: &ClippingRegion, flow_origin: &Point2D<Au>)
-> ClippingRegion {
// Don't clip if we're text.
if self.is_scanned_text_fragment() {
return current_clip
return (*current_clip).clone()
}
// Account for style-specified `clip`.
let current_clip_rect = self.calculate_style_specified_clip(current_clip_rect, origin);
let current_clip = self.calculate_style_specified_clip(current_clip, flow_origin);
// Only clip if `overflow` tells us to.
match self.style.get_box().overflow {
@ -921,7 +929,7 @@ impl FragmentDisplayListBuilding for Fragment {
//
// FIXME(#2795): Get the real container size.
let physical_rect = self.border_box.to_physical(self.style.writing_mode, Size2D::zero());
current_clip.intersect_rect(&Rect(physical_rect.origin + flow_origin, physical_rect.size))
current_clip.intersect_rect(&Rect(physical_rect.origin + *flow_origin, physical_rect.size))
}
fn build_display_list_for_text_fragment(&self,
@ -1078,7 +1086,7 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
layout_context,
stacking_relative_fragment_origin,
background_border_level,
&self.base.clip_rect);
&self.base.clip);
for kid in self.base.children.iter_mut() {
flow::mut_base(kid).display_list_building_result.add_to(display_list);
@ -1192,7 +1200,7 @@ impl ListItemFlowDisplayListBuilding for ListItemFlow {
layout_context,
stacking_relative_fragment_origin,
BackgroundAndBorderLevel::Content,
&self.block_flow.base.clip_rect);
&self.block_flow.base.clip);
}
}