mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
gfx: Clip the background properly when border-radius
is used.
Improves Reddit, GitHub, etc.
This commit is contained in:
parent
b22b29533a
commit
cc7cacfd5f
12 changed files with 356 additions and 119 deletions
|
@ -33,10 +33,11 @@ use servo_msg::compositor_msg::LayerId;
|
|||
use servo_net::image::base::Image;
|
||||
use servo_util::cursor::Cursor;
|
||||
use servo_util::dlist as servo_dlist;
|
||||
use servo_util::geometry::{mod, Au, ZERO_POINT};
|
||||
use servo_util::geometry::{mod, Au, MAX_RECT, ZERO_POINT, ZERO_RECT};
|
||||
use servo_util::range::Range;
|
||||
use servo_util::smallvec::{SmallVec, SmallVec8};
|
||||
use std::fmt;
|
||||
use std::num::Zero;
|
||||
use std::slice::Items;
|
||||
use style::ComputedValues;
|
||||
use style::computed_values::border_style;
|
||||
|
@ -205,7 +206,7 @@ impl StackingContext {
|
|||
page_rect: paint_context.page_rect,
|
||||
screen_rect: paint_context.screen_rect,
|
||||
clip_rect: clip_rect,
|
||||
transient_clip_rect: None,
|
||||
transient_clip: None,
|
||||
};
|
||||
|
||||
// Optimize the display list to throw out out-of-bounds display items and so forth.
|
||||
|
@ -348,7 +349,9 @@ impl StackingContext {
|
|||
mut iterator: I)
|
||||
where I: Iterator<&'a DisplayItem> {
|
||||
for item in iterator {
|
||||
if !geometry::rect_contains_point(item.base().clip_rect, point) {
|
||||
// TODO(pcwalton): Use a precise algorithm here. This will allow us to properly hit
|
||||
// test elements with `border-radius`, for example.
|
||||
if !item.base().clip.might_intersect_point(&point) {
|
||||
// Clipped out.
|
||||
continue
|
||||
}
|
||||
|
@ -477,25 +480,133 @@ pub struct BaseDisplayItem {
|
|||
/// Metadata attached to this display item.
|
||||
pub metadata: DisplayItemMetadata,
|
||||
|
||||
/// The rectangle to clip to.
|
||||
///
|
||||
/// TODO(pcwalton): Eventually, to handle `border-radius`, this will (at least) need to grow
|
||||
/// the ability to describe rounded rectangles.
|
||||
pub clip_rect: Rect<Au>,
|
||||
/// The region to clip to.
|
||||
pub clip: ClippingRegion,
|
||||
}
|
||||
|
||||
impl BaseDisplayItem {
|
||||
#[inline(always)]
|
||||
pub fn new(bounds: Rect<Au>, metadata: DisplayItemMetadata, clip_rect: Rect<Au>)
|
||||
pub fn new(bounds: Rect<Au>, metadata: DisplayItemMetadata, clip: ClippingRegion)
|
||||
-> BaseDisplayItem {
|
||||
BaseDisplayItem {
|
||||
bounds: bounds,
|
||||
metadata: metadata,
|
||||
clip_rect: clip_rect,
|
||||
clip: clip,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A clipping region for a display item. Currently, this can describe rectangles, rounded
|
||||
/// rectangles (for `border-radius`), or arbitrary intersections of the two. Arbitrary transforms
|
||||
/// are not supported because those are handled by the higher-level `StackingContext` abstraction.
|
||||
#[deriving(Clone, PartialEq, Show)]
|
||||
pub struct ClippingRegion {
|
||||
/// The main rectangular region. This does not include any corners.
|
||||
pub main: Rect<Au>,
|
||||
/// Any complex regions.
|
||||
///
|
||||
/// TODO(pcwalton): Atomically reference count these? Not sure if it's worth the trouble.
|
||||
/// Measure and follow up.
|
||||
pub complex: Vec<ComplexClippingRegion>,
|
||||
}
|
||||
|
||||
/// A complex clipping region. These don't as easily admit arbitrary intersection operations, so
|
||||
/// they're stored in a list over to the side. Currently a complex clipping region is just a
|
||||
/// rounded rectangle, but the CSS WGs will probably make us throw more stuff in here eventually.
|
||||
#[deriving(Clone, PartialEq, Show)]
|
||||
pub struct ComplexClippingRegion {
|
||||
/// The boundaries of the rectangle.
|
||||
pub rect: Rect<Au>,
|
||||
/// Border radii of this rectangle.
|
||||
pub radii: BorderRadii<Au>,
|
||||
}
|
||||
|
||||
impl ClippingRegion {
|
||||
/// Returns an empty clipping region that, if set, will result in no pixels being visible.
|
||||
#[inline]
|
||||
pub fn empty() -> ClippingRegion {
|
||||
ClippingRegion {
|
||||
main: ZERO_RECT,
|
||||
complex: Vec::new(),
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns an all-encompassing clipping region that clips no pixels out.
|
||||
#[inline]
|
||||
pub fn max() -> ClippingRegion {
|
||||
ClippingRegion {
|
||||
main: MAX_RECT,
|
||||
complex: Vec::new(),
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns a clipping region that represents the given rectangle.
|
||||
#[inline]
|
||||
pub fn from_rect(rect: &Rect<Au>) -> ClippingRegion {
|
||||
ClippingRegion {
|
||||
main: *rect,
|
||||
complex: Vec::new(),
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns the intersection of this clipping region and the given rectangle.
|
||||
///
|
||||
/// TODO(pcwalton): This could more eagerly eliminate complex clipping regions, at the cost of
|
||||
/// complexity.
|
||||
#[inline]
|
||||
pub fn intersect_rect(self, rect: &Rect<Au>) -> ClippingRegion {
|
||||
ClippingRegion {
|
||||
main: self.main.intersection(rect).unwrap_or(ZERO_RECT),
|
||||
complex: self.complex,
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns true if this clipping region might be nonempty. This can return false positives,
|
||||
/// but never false negatives.
|
||||
#[inline]
|
||||
pub fn might_be_nonempty(&self) -> bool {
|
||||
!self.main.is_empty()
|
||||
}
|
||||
|
||||
/// Returns true if this clipping region might contain the given point and false otherwise.
|
||||
/// This is a quick, not a precise, test; it can yield false positives.
|
||||
#[inline]
|
||||
pub fn might_intersect_point(&self, point: &Point2D<Au>) -> bool {
|
||||
geometry::rect_contains_point(self.main, *point) &&
|
||||
self.complex.iter().all(|complex| geometry::rect_contains_point(complex.rect, *point))
|
||||
}
|
||||
|
||||
/// Returns true if this clipping region might intersect the given rectangle and false
|
||||
/// otherwise. This is a quick, not a precise, test; it can yield false positives.
|
||||
#[inline]
|
||||
pub fn might_intersect_rect(&self, rect: &Rect<Au>) -> bool {
|
||||
self.main.intersects(rect) &&
|
||||
self.complex.iter().all(|complex| complex.rect.intersects(rect))
|
||||
}
|
||||
|
||||
|
||||
/// Returns a bounding rect that surrounds this entire clipping region.
|
||||
#[inline]
|
||||
pub fn bounding_rect(&self) -> Rect<Au> {
|
||||
let mut rect = self.main;
|
||||
for complex in self.complex.iter() {
|
||||
rect = rect.union(&complex.rect)
|
||||
}
|
||||
rect
|
||||
}
|
||||
|
||||
/// 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 {
|
||||
self.complex.push(ComplexClippingRegion {
|
||||
rect: *rect,
|
||||
radii: *radii,
|
||||
});
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
/// Metadata attached to each display item. This is useful for performing auxiliary tasks with
|
||||
/// the display list involving hit testing: finding the originating DOM node and determining the
|
||||
/// cursor to use when the element is hovered over.
|
||||
|
@ -618,6 +729,15 @@ pub struct BorderRadii<T> {
|
|||
pub bottom_left: T,
|
||||
}
|
||||
|
||||
impl<T> BorderRadii<T> where T: PartialEq + Zero {
|
||||
/// Returns true if all the radii are zero.
|
||||
pub fn is_square(&self) -> bool {
|
||||
let zero = Zero::zero();
|
||||
self.top_left == zero && self.top_right == zero && self.bottom_right == zero &&
|
||||
self.bottom_left == zero
|
||||
}
|
||||
}
|
||||
|
||||
/// Paints a line segment.
|
||||
#[deriving(Clone)]
|
||||
pub struct LineDisplayItem {
|
||||
|
@ -673,13 +793,12 @@ impl<'a> Iterator<&'a DisplayItem> for DisplayItemIterator<'a> {
|
|||
impl DisplayItem {
|
||||
/// Paints this display item into the given painting context.
|
||||
fn draw_into_context(&self, paint_context: &mut PaintContext) {
|
||||
let this_clip_rect = self.base().clip_rect;
|
||||
if paint_context.transient_clip_rect != Some(this_clip_rect) {
|
||||
if paint_context.transient_clip_rect.is_some() {
|
||||
paint_context.draw_pop_clip();
|
||||
{
|
||||
let this_clip = &self.base().clip;
|
||||
match paint_context.transient_clip {
|
||||
Some(ref transient_clip) if transient_clip == this_clip => {}
|
||||
Some(_) | None => paint_context.push_transient_clip((*this_clip).clone()),
|
||||
}
|
||||
paint_context.draw_push_clip(&this_clip_rect);
|
||||
paint_context.transient_clip_rect = Some(this_clip_rect)
|
||||
}
|
||||
|
||||
match *self {
|
||||
|
|
|
@ -47,7 +47,7 @@ impl DisplayListOptimizer {
|
|||
where I: Iterator<&'a DisplayItem> {
|
||||
for display_item in display_items {
|
||||
if self.visible_rect.intersects(&display_item.base().bounds) &&
|
||||
self.visible_rect.intersects(&display_item.base().clip_rect) {
|
||||
display_item.base().clip.might_intersect_rect(&self.visible_rect) {
|
||||
result_list.push_back((*display_item).clone())
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,13 +8,13 @@ use azure::azure::AzIntSize;
|
|||
use azure::azure_hl::{A8, B8G8R8A8, Color, ColorPattern, ColorPatternRef, DrawOptions};
|
||||
use azure::azure_hl::{DrawSurfaceOptions, DrawTarget, ExtendClamp, GaussianBlurFilterType};
|
||||
use azure::azure_hl::{GaussianBlurInput, GradientStop, Linear, LinearGradientPattern};
|
||||
use azure::azure_hl::{LinearGradientPatternRef, Path, SourceOp, StdDeviationGaussianBlurAttribute};
|
||||
use azure::azure_hl::{StrokeOptions};
|
||||
use azure::azure_hl::{LinearGradientPatternRef, Path, PathBuilder, SourceOp};
|
||||
use azure::azure_hl::{StdDeviationGaussianBlurAttribute, StrokeOptions};
|
||||
use azure::scaled_font::ScaledFont;
|
||||
use azure::{AZ_CAP_BUTT, AzFloat, struct__AzDrawOptions, struct__AzGlyph};
|
||||
use azure::{struct__AzGlyphBuffer, struct__AzPoint, AzDrawTargetFillGlyphs};
|
||||
use display_list::{BOX_SHADOW_INFLATION_FACTOR, TextDisplayItem, BorderRadii};
|
||||
use display_list::TextOrientation::{SidewaysLeft, SidewaysRight, Upright};
|
||||
use display_list::{BOX_SHADOW_INFLATION_FACTOR, BorderRadii, ClippingRegion, TextDisplayItem};
|
||||
use font_context::FontContext;
|
||||
use geom::matrix2d::Matrix2D;
|
||||
use geom::point::Point2D;
|
||||
|
@ -29,6 +29,7 @@ use servo_util::geometry::{Au, MAX_RECT};
|
|||
use servo_util::opts;
|
||||
use servo_util::range::Range;
|
||||
use std::default::Default;
|
||||
use std::mem;
|
||||
use std::num::{Float, FloatMath};
|
||||
use std::ptr;
|
||||
use style::computed_values::border_style;
|
||||
|
@ -45,10 +46,10 @@ pub struct PaintContext<'a> {
|
|||
pub screen_rect: Rect<uint>,
|
||||
/// The clipping rect for the stacking context as a whole.
|
||||
pub clip_rect: Option<Rect<Au>>,
|
||||
/// The current transient clipping rect, if any. A "transient clipping rect" is the clipping
|
||||
/// rect used by the last display item. We cache the last value so that we avoid pushing and
|
||||
/// popping clip rects unnecessarily.
|
||||
pub transient_clip_rect: Option<Rect<Au>>,
|
||||
/// The current transient clipping region, if any. A "transient clipping region" is the
|
||||
/// clipping region used by the last display item. We cache the last value so that we avoid
|
||||
/// pushing and popping clipping regions unnecessarily.
|
||||
pub transient_clip: Option<ClippingRegion>,
|
||||
}
|
||||
|
||||
enum Direction {
|
||||
|
@ -278,6 +279,12 @@ impl<'a> PaintContext<'a> {
|
|||
self.draw_target.fill(&path_builder.finish(), &ColorPattern::new(color), &draw_options);
|
||||
}
|
||||
|
||||
fn push_rounded_rect_clip(&self, bounds: &Rect<f32>, radii: &BorderRadii<AzFloat>) {
|
||||
let mut path_builder = self.draw_target.create_path_builder();
|
||||
self.create_rounded_rect_path(&mut path_builder, bounds, radii);
|
||||
self.draw_target.push_clip(&path_builder.finish());
|
||||
}
|
||||
|
||||
// The following comment is wonderful, and stolen from
|
||||
// gecko:gfx/thebes/gfxContext.cpp:RoundedRectangle for reference.
|
||||
//
|
||||
|
@ -537,8 +544,55 @@ impl<'a> PaintContext<'a> {
|
|||
}
|
||||
}
|
||||
|
||||
let path = path_builder.finish();
|
||||
self.draw_target.fill(&path, &ColorPattern::new(color), &draw_opts);
|
||||
/// Creates a path representing the given rounded rectangle.
|
||||
///
|
||||
/// TODO(pcwalton): Should we unify with the code above? It doesn't seem immediately obvious
|
||||
/// how to do that (especially without regressing performance) unless we have some way to
|
||||
/// efficiently intersect or union paths, since different border styles/colors can force us to
|
||||
/// slice through the rounded corners. My first attempt to unify with the above code resulted
|
||||
/// in making a mess of it, and the simplicity of this code path is appealing, so it may not
|
||||
/// be worth it… In any case, revisit this decision when we support elliptical radii.
|
||||
fn create_rounded_rect_path(&self,
|
||||
path_builder: &mut PathBuilder,
|
||||
bounds: &Rect<f32>,
|
||||
radii: &BorderRadii<AzFloat>) {
|
||||
// +----------+
|
||||
// / 1 2 \
|
||||
// + 8 3 +
|
||||
// | |
|
||||
// + 7 4 +
|
||||
// \ 6 5 /
|
||||
// +----------+
|
||||
|
||||
path_builder.move_to(Point2D(bounds.origin.x + radii.top_left, bounds.origin.y)); // 1
|
||||
path_builder.line_to(Point2D(bounds.max_x() - radii.top_right, bounds.origin.y)); // 2
|
||||
path_builder.arc(Point2D(bounds.max_x() - radii.top_right,
|
||||
bounds.origin.y + radii.top_right),
|
||||
radii.top_right,
|
||||
1.5f32 * Float::frac_pi_2(),
|
||||
Float::two_pi(),
|
||||
false); // 3
|
||||
path_builder.line_to(Point2D(bounds.max_x(), bounds.max_y() - radii.bottom_right)); // 4
|
||||
path_builder.arc(Point2D(bounds.max_x() - radii.bottom_right,
|
||||
bounds.max_y() - radii.bottom_right),
|
||||
radii.bottom_right,
|
||||
0.0,
|
||||
Float::frac_pi_2(),
|
||||
false); // 5
|
||||
path_builder.line_to(Point2D(bounds.origin.x + radii.bottom_left, bounds.max_y())); // 6
|
||||
path_builder.arc(Point2D(bounds.origin.x + radii.bottom_left,
|
||||
bounds.max_y() - radii.bottom_left),
|
||||
radii.bottom_left,
|
||||
Float::frac_pi_2(),
|
||||
Float::pi(),
|
||||
false); // 7
|
||||
path_builder.line_to(Point2D(bounds.origin.x, bounds.origin.y + radii.top_left)); // 8
|
||||
path_builder.arc(Point2D(bounds.origin.x + radii.top_left,
|
||||
bounds.origin.y + radii.top_left),
|
||||
radii.top_left,
|
||||
Float::pi(),
|
||||
1.5f32 * Float::frac_pi_2(),
|
||||
false); // 1
|
||||
}
|
||||
|
||||
fn draw_dashed_border_segment(&self,
|
||||
|
@ -956,11 +1010,27 @@ impl<'a> PaintContext<'a> {
|
|||
}
|
||||
|
||||
pub fn remove_transient_clip_if_applicable(&mut self) {
|
||||
if self.transient_clip_rect.is_some() {
|
||||
self.draw_pop_clip();
|
||||
self.transient_clip_rect = None
|
||||
if let Some(old_transient_clip) = mem::replace(&mut self.transient_clip, None) {
|
||||
for _ in old_transient_clip.complex.iter() {
|
||||
self.draw_pop_clip()
|
||||
}
|
||||
self.draw_pop_clip()
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets a new transient clipping region. Automatically calls
|
||||
/// `remove_transient_clip_if_applicable()` first.
|
||||
pub fn push_transient_clip(&mut self, clip_region: ClippingRegion) {
|
||||
self.remove_transient_clip_if_applicable();
|
||||
|
||||
self.draw_push_clip(&clip_region.main);
|
||||
for complex_region in clip_region.complex.iter() {
|
||||
// FIXME(pcwalton): Actually draw a rounded rect.
|
||||
self.push_rounded_rect_clip(&complex_region.rect.to_azure_rect(),
|
||||
&complex_region.radii.to_radii_px())
|
||||
}
|
||||
self.transient_clip = Some(clip_region)
|
||||
}
|
||||
}
|
||||
|
||||
pub trait ToAzurePoint {
|
||||
|
|
|
@ -510,7 +510,7 @@ impl WorkerThread {
|
|||
page_rect: tile.page_rect,
|
||||
screen_rect: tile.screen_rect,
|
||||
clip_rect: None,
|
||||
transient_clip_rect: None,
|
||||
transient_clip: None,
|
||||
};
|
||||
|
||||
// Apply the translation to paint the tile we want.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue