Auto merge of #25594 - servo:gradient, r=mrobinson

Background follow ups

* Fix `background-clip` + `border-radius`
* Fix `background-clip` + `background-color`
* Render linear and radial gradients
* Enable `css/css-background/` in WPT
This commit is contained in:
bors-servo 2020-01-25 05:34:38 -05:00 committed by GitHub
commit 31eafadcb3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
334 changed files with 6001 additions and 290 deletions

View file

@ -0,0 +1,251 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
use crate::replaced::IntrinsicSizes;
use euclid::{Size2D, Vector2D};
use style::computed_values::background_clip::single_value::T as Clip;
use style::computed_values::background_origin::single_value::T as Origin;
use style::values::computed::background::BackgroundSize as Size;
use style::values::computed::{Length, LengthPercentage};
use style::values::specified::background::BackgroundRepeat as RepeatXY;
use style::values::specified::background::BackgroundRepeatKeyword as Repeat;
use webrender_api::{self as wr, units};
pub(super) struct BackgroundLayer {
pub common: wr::CommonItemProperties,
pub bounds: units::LayoutRect,
pub tile_size: units::LayoutSize,
pub tile_spacing: units::LayoutSize,
pub repeat: bool,
}
struct Layout1DResult {
repeat: bool,
bounds_origin: f32,
bounds_size: f32,
tile_spacing: f32,
}
fn get_cyclic<T>(values: &[T], layer_index: usize) -> &T {
&values[layer_index % values.len()]
}
pub(super) fn painting_area<'a>(
fragment_builder: &'a super::BuilderForBoxFragment,
builder: &mut super::DisplayListBuilder,
layer_index: usize,
) -> (&'a units::LayoutRect, wr::CommonItemProperties) {
let fb = fragment_builder;
let b = fb.fragment.style.get_background();
let (painting_area, clip) = match get_cyclic(&b.background_clip.0, layer_index) {
Clip::ContentBox => (fb.content_rect(), fb.content_edge_clip(builder)),
Clip::PaddingBox => (fb.padding_rect(), fb.padding_edge_clip(builder)),
Clip::BorderBox => (&fb.border_rect, fb.border_edge_clip(builder)),
};
// The 'backgound-clip' property maps directly to `clip_rect` in `CommonItemProperties`:
let mut common = builder.common_properties(*painting_area);
if let Some(clip_id) = clip {
common.clip_id = clip_id
}
(painting_area, common)
}
pub(super) fn layout_layer(
fragment_builder: &mut super::BuilderForBoxFragment,
builder: &mut super::DisplayListBuilder,
layer_index: usize,
intrinsic: IntrinsicSizes,
) -> Option<BackgroundLayer> {
let b = fragment_builder.fragment.style.get_background();
let (painting_area, common) = painting_area(fragment_builder, builder, layer_index);
let positioning_area = match get_cyclic(&b.background_origin.0, layer_index) {
Origin::ContentBox => fragment_builder.content_rect(),
Origin::PaddingBox => fragment_builder.padding_rect(),
Origin::BorderBox => &fragment_builder.border_rect,
};
// https://drafts.csswg.org/css-backgrounds/#background-size
enum ContainOrCover {
Contain,
Cover,
}
let size_contain_or_cover = |background_size| {
let mut tile_size = positioning_area.size;
if let Some(intrinsic_ratio) = intrinsic.ratio {
let positioning_ratio = positioning_area.size.width / positioning_area.size.height;
// Whether the tile width (as opposed to height)
// is scaled to that of the positioning area
let fit_width = match background_size {
ContainOrCover::Contain => positioning_ratio <= intrinsic_ratio,
ContainOrCover::Cover => positioning_ratio > intrinsic_ratio,
};
// The other dimension needs to be adjusted
if fit_width {
tile_size.height = tile_size.width / intrinsic_ratio
} else {
tile_size.width = tile_size.height * intrinsic_ratio
}
}
tile_size
};
let mut tile_size = match get_cyclic(&b.background_size.0, layer_index) {
Size::Contain => size_contain_or_cover(ContainOrCover::Contain),
Size::Cover => size_contain_or_cover(ContainOrCover::Cover),
Size::ExplicitSize { width, height } => {
let mut width = width.non_auto().map(|lp| {
lp.0.percentage_relative_to(Length::new(positioning_area.size.width))
});
let mut height = height.non_auto().map(|lp| {
lp.0.percentage_relative_to(Length::new(positioning_area.size.height))
});
if width.is_none() && height.is_none() {
// Both computed values are 'auto':
// use intrinsic sizes, treating missing width or height as 'auto'
width = intrinsic.width;
height = intrinsic.height;
}
match (width, height) {
(Some(w), Some(h)) => units::LayoutSize::new(w.px(), h.px()),
(Some(w), None) => {
let h = if let Some(intrinsic_ratio) = intrinsic.ratio {
w / intrinsic_ratio
} else if let Some(intrinsic_height) = intrinsic.height {
intrinsic_height
} else {
// Treated as 100%
Length::new(positioning_area.size.height)
};
units::LayoutSize::new(w.px(), h.px())
},
(None, Some(h)) => {
let w = if let Some(intrinsic_ratio) = intrinsic.ratio {
h * intrinsic_ratio
} else if let Some(intrinsic_width) = intrinsic.width {
intrinsic_width
} else {
// Treated as 100%
Length::new(positioning_area.size.width)
};
units::LayoutSize::new(w.px(), h.px())
},
// Both comptued values were 'auto', and neither intrinsic size is present
(None, None) => size_contain_or_cover(ContainOrCover::Contain),
}
},
};
if tile_size.width == 0.0 || tile_size.height == 0.0 {
return None;
}
let RepeatXY(repeat_x, repeat_y) = *get_cyclic(&b.background_repeat.0, layer_index);
let result_x = layout_1d(
&mut tile_size.width,
repeat_x,
get_cyclic(&b.background_position_x.0, layer_index),
painting_area.origin.x - positioning_area.origin.x,
painting_area.size.width,
positioning_area.size.width,
);
let result_y = layout_1d(
&mut tile_size.height,
repeat_y,
get_cyclic(&b.background_position_y.0, layer_index),
painting_area.origin.y - positioning_area.origin.y,
painting_area.size.height,
positioning_area.size.height,
);
let bounds = units::LayoutRect::new(
positioning_area.origin + Vector2D::new(result_x.bounds_origin, result_y.bounds_origin),
Size2D::new(result_x.bounds_size, result_y.bounds_size),
);
let tile_spacing = units::LayoutSize::new(result_x.tile_spacing, result_y.tile_spacing);
Some(BackgroundLayer {
common,
bounds,
tile_size,
tile_spacing,
repeat: result_x.repeat || result_y.repeat,
})
}
/// Abstract over the horizontal or vertical dimension
/// Coordinates (0, 0) for the purpose of this function are the positioning areas origin.
fn layout_1d(
tile_size: &mut f32,
mut repeat: Repeat,
position: &LengthPercentage,
painting_area_origin: f32,
painting_area_size: f32,
positioning_area_size: f32,
) -> Layout1DResult {
// https://drafts.csswg.org/css-backgrounds/#background-repeat
if let Repeat::Round = repeat {
*tile_size = positioning_area_size / (positioning_area_size / *tile_size).round();
}
// https://drafts.csswg.org/css-backgrounds/#background-position
let mut position = position
.percentage_relative_to(Length::new(positioning_area_size - *tile_size))
.px();
let mut tile_spacing = 0.0;
// https://drafts.csswg.org/css-backgrounds/#background-repeat
if let Repeat::Space = repeat {
// The most entire tiles we can fit
let tile_count = (positioning_area_size / *tile_size).floor();
if tile_count >= 2.0 {
position = 0.0;
// Make the outsides of the first and last of that many tiles
// touch the edges of the positioning area:
let total_space = positioning_area_size - *tile_size * tile_count;
let spaces_count = tile_count - 1.0;
tile_spacing = total_space / spaces_count;
} else {
repeat = Repeat::NoRepeat
}
}
match repeat {
Repeat::Repeat | Repeat::Round | Repeat::Space => {
// WebRenders `RepeatingImageDisplayItem` contains a `bounds` rectangle and:
//
// * The tiling is clipped to the intersection of `clip_rect` and `bounds`
// * The origin (top-left corner) of `bounds` is the position
// of the “first” (top-left-most) tile.
//
// In the general case that first tile is not the one that is positioned by
// `background-position`.
// We want it to be the top-left-most tile that intersects with `clip_rect`.
// We find it by offsetting by a whole number of strides,
// then compute `bounds` such that:
//
// * Its bottom-right is the bottom-right of `clip_rect`
// * Its top-left is the top-left of first tile.
let tile_stride = *tile_size + tile_spacing;
let offset = position - painting_area_origin;
let bounds_origin = position - tile_stride * (offset / tile_stride).ceil();
let bounds_size = painting_area_size - bounds_origin - painting_area_origin;
Layout1DResult {
repeat: true,
bounds_origin,
bounds_size,
tile_spacing,
}
},
Repeat::NoRepeat => {
// `RepeatingImageDisplayItem` always repeats in both dimension.
// When we want only one of the dimensions to repeat,
// we use the `bounds` rectangle to clip the tiling to one tile
// in that dimension.
Layout1DResult {
repeat: false,
bounds_origin: position,
bounds_size: *tile_size,
tile_spacing: 0.0,
}
},
}
}

View file

@ -0,0 +1,336 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
use style::properties::ComputedValues;
use style::values::computed::image::{EndingShape, Gradient, LineDirection};
use style::values::computed::{GradientItem, Length, Position};
use style::values::generics::image::GenericGradientKind as Kind;
use style::values::generics::image::{Circle, ColorStop, Ellipse, ShapeExtent};
use webrender_api::{self as wr, units};
pub(super) fn build(
style: &ComputedValues,
gradient: &Gradient,
layer: &super::background::BackgroundLayer,
builder: &mut super::DisplayListBuilder,
) {
let extend_mode = if gradient.repeating {
wr::ExtendMode::Repeat
} else {
wr::ExtendMode::Clamp
};
match &gradient.kind {
Kind::Linear(line_direction) => build_linear(
style,
&gradient.items,
line_direction,
extend_mode,
&layer,
builder,
),
Kind::Radial(ending_shape, center) => build_radial(
style,
&gradient.items,
ending_shape,
center,
extend_mode,
&layer,
builder,
),
}
}
/// https://drafts.csswg.org/css-images-3/#linear-gradients
pub(super) fn build_linear(
style: &ComputedValues,
items: &[GradientItem],
line_direction: &LineDirection,
extend_mode: wr::ExtendMode,
layer: &super::background::BackgroundLayer,
builder: &mut super::DisplayListBuilder,
) {
use style::values::specified::position::HorizontalPositionKeyword::*;
use style::values::specified::position::VerticalPositionKeyword::*;
use webrender_api::units::LayoutVector2D as Vec2;
let gradient_box = layer.tile_size;
// A vector of length 1.0 in the direction of the gradient line
let direction = match line_direction {
LineDirection::Horizontal(Right) => Vec2::new(1., 0.),
LineDirection::Vertical(Top) => Vec2::new(0., -1.),
LineDirection::Horizontal(Left) => Vec2::new(-1., 0.),
LineDirection::Vertical(Bottom) => Vec2::new(0., 1.),
LineDirection::Angle(angle) => {
let radians = angle.radians();
// “`0deg` points upward,
// and positive angles represent clockwise rotation,
// so `90deg` point toward the right.”
Vec2::new(radians.sin(), -radians.cos())
},
LineDirection::Corner(horizontal, vertical) => {
// “If the argument instead specifies a corner of the box such as `to top left`,
// the gradient line must be angled such that it points
// into the same quadrant as the specified corner,
// and is perpendicular to a line intersecting
// the two neighboring corners of the gradient box.”
// Note that that last line is a diagonal of the gradient box rectangle,
// since two neighboring corners of a third corner
// are necessarily opposite to each other.
// `{ x: gradient_box.width, y: gradient_box.height }` is such a diagonal vector,
// from the bottom left corner to the top right corner of the gradient box.
// (Both coordinates are positive.)
// Changing either or both signs produces the other three (oriented) diagonals.
// Swapping the coordinates `{ x: gradient_box.height, y: gradient_box.height }`
// produces a vector perpendicular to some diagonal of the rectangle.
// Finally, we choose the sign of each cartesian coordinate
// such that our vector points to the desired quadrant.
let x = match horizontal {
Right => gradient_box.height,
Left => -gradient_box.height,
};
let y = match vertical {
Top => gradient_box.width,
Bottom => -gradient_box.width,
};
// `{ x, y }` is now a vector of arbitrary length
// with the same direction as the gradient line.
// This normalizes the length to 1.0:
Vec2::new(x, y).normalize()
},
};
// This formula is given as `abs(W * sin(A)) + abs(H * cos(A))` in a note in the spec, under
// https://drafts.csswg.org/css-images-3/#linear-gradient-syntax
//
// Sketch of a proof:
//
// * Take the top side of the gradient box rectangle. It is a segment of length `W`
// * Project onto the gradient line. You get a segment of length `abs(W * sin(A))`
// * Similarly, the left side of the rectangle (length `H`)
// projects to a segment of length `abs(H * cos(A))`
// * These two segments add up to exactly the gradient line.
//
// See the illustration in the example under
// https://drafts.csswg.org/css-images-3/#linear-gradient-syntax
let gradient_line_length =
(gradient_box.width * direction.x).abs() + (gradient_box.height * direction.y).abs();
let half_gradient_line = direction * (gradient_line_length / 2.);
let center = (gradient_box / 2.).to_vector().to_point();
let start_point = center - half_gradient_line;
let end_point = center + half_gradient_line;
let stops = fixup_stops(style, items, Length::new(gradient_line_length));
let linear_gradient = builder
.wr
.create_gradient(start_point, end_point, stops, extend_mode);
builder.wr.push_gradient(
&layer.common,
layer.bounds,
linear_gradient,
layer.tile_size,
layer.tile_spacing,
)
}
/// https://drafts.csswg.org/css-images-3/#radial-gradients
pub(super) fn build_radial(
style: &ComputedValues,
items: &[GradientItem],
shape: &EndingShape,
center: &Position,
extend_mode: wr::ExtendMode,
layer: &super::background::BackgroundLayer,
builder: &mut super::DisplayListBuilder,
) {
let gradient_box = layer.tile_size;
let center = units::LayoutPoint::new(
center
.horizontal
.percentage_relative_to(Length::new(gradient_box.width))
.px(),
center
.vertical
.percentage_relative_to(Length::new(gradient_box.height))
.px(),
);
let radii = match shape {
EndingShape::Circle(circle) => {
let radius = match circle {
Circle::Radius(r) => r.0.px(),
Circle::Extent(extent) => match extent {
ShapeExtent::ClosestSide | ShapeExtent::Contain => {
let vec = abs_vector_to_corner(gradient_box, center, f32::min);
vec.x.min(vec.y)
},
ShapeExtent::FarthestSide => {
let vec = abs_vector_to_corner(gradient_box, center, f32::max);
vec.x.max(vec.y)
},
ShapeExtent::ClosestCorner => {
abs_vector_to_corner(gradient_box, center, f32::min).length()
},
ShapeExtent::FarthestCorner | ShapeExtent::Cover => {
abs_vector_to_corner(gradient_box, center, f32::max).length()
},
},
};
units::LayoutSize::new(radius, radius)
},
EndingShape::Ellipse(Ellipse::Radii(rx, ry)) => units::LayoutSize::new(
rx.0.percentage_relative_to(Length::new(gradient_box.width))
.px(),
ry.0.percentage_relative_to(Length::new(gradient_box.height))
.px(),
),
EndingShape::Ellipse(Ellipse::Extent(extent)) => match extent {
ShapeExtent::ClosestSide | ShapeExtent::Contain => {
abs_vector_to_corner(gradient_box, center, f32::min).to_size()
},
ShapeExtent::FarthestSide => {
abs_vector_to_corner(gradient_box, center, f32::max).to_size()
},
ShapeExtent::ClosestCorner => {
abs_vector_to_corner(gradient_box, center, f32::min).to_size() *
(std::f32::consts::FRAC_1_SQRT_2 * 2.0)
},
ShapeExtent::FarthestCorner | ShapeExtent::Cover => {
abs_vector_to_corner(gradient_box, center, f32::max).to_size() *
(std::f32::consts::FRAC_1_SQRT_2 * 2.0)
},
},
};
/// Returns the distance to the nearest or farthest sides in the respective dimension,
/// depending on `select`.
fn abs_vector_to_corner(
gradient_box: units::LayoutSize,
center: units::LayoutPoint,
select: impl Fn(f32, f32) -> f32,
) -> units::LayoutVector2D {
let left = center.x.abs();
let top = center.y.abs();
let right = (gradient_box.width - center.x).abs();
let bottom = (gradient_box.height - center.y).abs();
units::LayoutVector2D::new(select(left, right), select(top, bottom))
}
// “The gradient lines starting point is at the center of the gradient,
// and it extends toward the right, with the ending point on the point
// where the gradient line intersects the ending shape.”
let gradient_line_length = radii.width;
let stops = fixup_stops(style, items, Length::new(gradient_line_length));
let radial_gradient = builder
.wr
.create_radial_gradient(center, radii, stops, extend_mode);
builder.wr.push_radial_gradient(
&layer.common,
layer.bounds,
radial_gradient,
layer.tile_size,
layer.tile_spacing,
)
}
/// https://drafts.csswg.org/css-images-4/#color-stop-fixup
fn fixup_stops(
style: &ComputedValues,
items: &[GradientItem],
gradient_line_length: Length,
) -> Vec<wr::GradientStop> {
// Remove color transititon hints, which are not supported yet.
// https://drafts.csswg.org/css-images-4/#color-transition-hint
//
// This gives an approximation of the gradient that might be visibly wrong,
// but maybe better than not parsing that value at all?
// Its debatble whether thats better or worse
// than not parsing and allowing authors to set a fallback.
// Either way, the best outcome is to add support.
// Gecko does so by approximating the non-linear interpolation
// by up to 10 piece-wise linear segments (9 intermediate color stops)
let mut stops = Vec::with_capacity(items.len());
for item in items {
match item {
GradientItem::SimpleColorStop(color) => stops.push(ColorStop {
color: super::rgba(style.resolve_color(*color)),
position: None,
}),
GradientItem::ComplexColorStop { color, position } => stops.push(ColorStop {
color: super::rgba(style.resolve_color(*color)),
position: Some(if gradient_line_length.px() == 0. {
0.
} else {
position.percentage_relative_to(gradient_line_length).px() /
gradient_line_length.px()
}),
}),
GradientItem::InterpolationHint(_) => {
// FIXME: approximate like in:
// https://searchfox.org/mozilla-central/rev/f98dad153b59a985efd4505912588d4651033395/layout/painting/nsCSSRenderingGradients.cpp#315-391
},
}
}
assert!(stops.len() >= 2);
// https://drafts.csswg.org/css-images-4/#color-stop-fixup
if let first_position @ None = &mut stops.first_mut().unwrap().position {
*first_position = Some(0.);
}
if let last_position @ None = &mut stops.last_mut().unwrap().position {
*last_position = Some(1.);
}
let mut iter = stops.iter_mut();
let mut max_so_far = iter.next().unwrap().position.unwrap();
for stop in iter {
if let Some(position) = &mut stop.position {
if *position < max_so_far {
*position = max_so_far
} else {
max_so_far = *position
}
}
}
let mut wr_stops = Vec::with_capacity(stops.len());
let mut iter = stops.iter().enumerate();
let (_, first) = iter.next().unwrap();
let first_stop_position = first.position.unwrap();
wr_stops.push(wr::GradientStop {
offset: first_stop_position,
color: first.color,
});
let mut last_positioned_stop_index = 0;
let mut last_positioned_stop_position = first_stop_position;
for (i, stop) in iter {
if let Some(position) = stop.position {
let step_count = i - last_positioned_stop_index;
if step_count > 1 {
let step = (position - last_positioned_stop_position) / step_count as f32;
for j in 1..step_count {
let color = stops[last_positioned_stop_index + j].color;
let offset = last_positioned_stop_position + j as f32 * step;
wr_stops.push(wr::GradientStop { offset, color })
}
}
last_positioned_stop_index = i;
last_positioned_stop_position = position;
wr_stops.push(wr::GradientStop {
offset: position,
color: stop.color,
})
}
}
wr_stops
}

View file

@ -7,7 +7,7 @@ use crate::fragments::{BoxFragment, Fragment};
use crate::geom::{PhysicalPoint, PhysicalRect, ToWebRender};
use crate::replaced::IntrinsicSizes;
use embedder_traits::Cursor;
use euclid::{Point2D, SideOffsets2D, Size2D, Vector2D};
use euclid::{Point2D, SideOffsets2D, Size2D};
use gfx::text::glyph::GlyphStore;
use mitochondria::OnceCell;
use net_traits::image_cache::UsePlaceholder;
@ -18,6 +18,9 @@ use style::values::computed::{BorderStyle, Length, LengthPercentage};
use style::values::specified::ui::CursorKind;
use webrender_api::{self as wr, units};
mod background;
mod gradient;
#[derive(Clone, Copy)]
pub struct WebRenderImageInfo {
pub width: u32,
@ -139,6 +142,8 @@ struct BuilderForBoxFragment<'a> {
content_rect: OnceCell<units::LayoutRect>,
border_radius: wr::BorderRadius,
border_edge_clip_id: OnceCell<Option<wr::ClipId>>,
padding_edge_clip_id: OnceCell<Option<wr::ClipId>>,
content_edge_clip_id: OnceCell<Option<wr::ClipId>>,
}
impl<'a> BuilderForBoxFragment<'a> {
@ -176,6 +181,8 @@ impl<'a> BuilderForBoxFragment<'a> {
padding_rect: OnceCell::new(),
content_rect: OnceCell::new(),
border_edge_clip_id: OnceCell::new(),
padding_edge_clip_id: OnceCell::new(),
content_edge_clip_id: OnceCell::new(),
}
}
@ -199,30 +206,41 @@ impl<'a> BuilderForBoxFragment<'a> {
})
}
fn with_border_edge_clip(
&mut self,
builder: &mut DisplayListBuilder,
common: &mut wr::CommonItemProperties,
) {
let initialized = self.border_edge_clip_id.init_once(|| {
if self.border_radius.is_zero() {
None
} else {
Some(builder.wr.define_clip(
&builder.current_space_and_clip,
self.border_rect,
Some(wr::ComplexClipRegion {
rect: self.border_rect,
radii: self.border_radius,
mode: wr::ClipMode::Clip,
}),
None,
))
}
});
if let Some(clip_id) = *initialized {
common.clip_id = clip_id
}
fn border_edge_clip(&self, builder: &mut DisplayListBuilder) -> Option<wr::ClipId> {
*self
.border_edge_clip_id
.init_once(|| clip_for_radii(self.border_radius, self.border_rect, builder))
}
fn padding_edge_clip(&self, builder: &mut DisplayListBuilder) -> Option<wr::ClipId> {
*self.padding_edge_clip_id.init_once(|| {
clip_for_radii(
inner_radii(
self.border_radius,
self.fragment
.border
.to_physical(self.fragment.style.writing_mode)
.to_webrender(),
),
self.border_rect,
builder,
)
})
}
fn content_edge_clip(&self, builder: &mut DisplayListBuilder) -> Option<wr::ClipId> {
*self.content_edge_clip_id.init_once(|| {
clip_for_radii(
inner_radii(
self.border_radius,
(&self.fragment.border + &self.fragment.padding)
.to_physical(self.fragment.style.writing_mode)
.to_webrender(),
),
self.border_rect,
builder,
)
})
}
fn build(&mut self, builder: &mut DisplayListBuilder) {
@ -230,7 +248,9 @@ impl<'a> BuilderForBoxFragment<'a> {
if hit_info.is_some() {
let mut common = builder.common_properties(self.border_rect);
common.hit_info = hit_info;
self.with_border_edge_clip(builder, &mut common);
if let Some(clip_id) = self.border_edge_clip(builder) {
common.clip_id = clip_id
}
builder.wr.push_hit_test(&common)
}
@ -251,8 +271,11 @@ impl<'a> BuilderForBoxFragment<'a> {
let b = self.fragment.style.get_background();
let background_color = self.fragment.style.resolve_color(b.background_color);
if background_color.alpha > 0 {
let mut common = builder.common_properties(self.border_rect);
self.with_border_edge_clip(builder, &mut common);
// https://drafts.csswg.org/css-backgrounds/#background-color
// “The background color is clipped according to the background-clip
// value associated with the bottom-most background image layer.”
let layer_index = b.background_image.0.len() - 1;
let (_, common) = background::painting_area(self, builder, layer_index);
builder.wr.push_rect(&common, rgba(background_color))
}
// Reverse because the property is top layer first, we want to paint bottom layer first.
@ -260,33 +283,75 @@ impl<'a> BuilderForBoxFragment<'a> {
match layer {
ImageLayer::None => {},
ImageLayer::Image(image) => match image {
Image::Gradient(_gradient) => {
// TODO
Image::Gradient(gradient) => {
let intrinsic = IntrinsicSizes {
width: None,
height: None,
ratio: None,
};
if let Some(layer) =
&background::layout_layer(self, builder, index, intrinsic)
{
gradient::build(&self.fragment.style, gradient, layer, builder)
}
},
Image::Url(image_url) => {
if let Some(url) = image_url.url() {
let webrender_image = builder.context.get_webrender_image_for_url(
self.fragment.tag,
url.clone(),
UsePlaceholder::No,
);
if let Some(WebRenderImageInfo {
width,
height,
key: Some(key),
}) = webrender_image
{
// FIXME: https://drafts.csswg.org/css-images-4/#the-image-resolution
let dppx = 1.0;
// FIXME: images wont always have in intrinsic width or height
// when support for SVG is added.
// Or a WebRender `ImageKey`, for that matter.
let (width, height, key) = match image_url.url() {
Some(url) => {
match builder.context.get_webrender_image_for_url(
self.fragment.tag,
url.clone(),
UsePlaceholder::No,
) {
Some(WebRenderImageInfo {
width,
height,
key: Some(key),
}) => (width, height, key),
_ => continue,
}
},
None => continue,
};
let intrinsic = IntrinsicSizes {
width: Some(Length::new(width as f32 / dppx)),
height: Some(Length::new(height as f32 / dppx)),
// FIXME https://github.com/w3c/csswg-drafts/issues/4572
ratio: Some(width as f32 / height as f32),
};
// FIXME: https://drafts.csswg.org/css-images-4/#the-image-resolution
let dppx = 1.0;
self.build_background_raster_image(builder, index, intrinsic, key)
let intrinsic = IntrinsicSizes {
width: Some(Length::new(width as f32 / dppx)),
height: Some(Length::new(height as f32 / dppx)),
// FIXME https://github.com/w3c/csswg-drafts/issues/4572
ratio: Some(width as f32 / height as f32),
};
if let Some(layer) =
background::layout_layer(self, builder, index, intrinsic)
{
let image_rendering =
image_rendering(self.fragment.style.clone_image_rendering());
if layer.repeat {
builder.wr.push_repeating_image(
&layer.common,
layer.bounds,
layer.tile_size,
layer.tile_spacing,
image_rendering,
wr::AlphaType::PremultipliedAlpha,
key,
wr::ColorF::WHITE,
)
} else {
builder.wr.push_image(
&layer.common,
layer.bounds,
image_rendering,
wr::AlphaType::PremultipliedAlpha,
key,
wr::ColorF::WHITE,
)
}
}
},
@ -297,244 +362,6 @@ impl<'a> BuilderForBoxFragment<'a> {
}
}
fn build_background_raster_image(
&mut self,
builder: &mut DisplayListBuilder,
index: usize,
intrinsic: IntrinsicSizes,
key: wr::ImageKey,
) {
use style::computed_values::background_clip::single_value::T as Clip;
use style::computed_values::background_origin::single_value::T as Origin;
use style::values::computed::background::BackgroundSize as Size;
use style::values::specified::background::BackgroundRepeat as RepeatXY;
use style::values::specified::background::BackgroundRepeatKeyword as Repeat;
fn get_cyclic<T>(values: &[T], index: usize) -> &T {
&values[index % values.len()]
}
let b = self.fragment.style.get_background();
let clipping_area = match get_cyclic(&b.background_clip.0, index) {
Clip::ContentBox => self.content_rect(),
Clip::PaddingBox => self.padding_rect(),
Clip::BorderBox => &self.border_rect,
};
let positioning_area = match get_cyclic(&b.background_origin.0, index) {
Origin::ContentBox => self.content_rect(),
Origin::PaddingBox => self.padding_rect(),
Origin::BorderBox => &self.border_rect,
};
// https://drafts.csswg.org/css-backgrounds/#background-size
enum ContainOrCover {
Contain,
Cover,
}
let size_contain_or_cover = |background_size| {
let mut tile_size = positioning_area.size;
if let Some(intrinsic_ratio) = intrinsic.ratio {
let positioning_ratio = positioning_area.size.width / positioning_area.size.height;
// Whether the tile width (as opposed to height)
// is scaled to that of the positioning area
let fit_width = match background_size {
ContainOrCover::Contain => positioning_ratio <= intrinsic_ratio,
ContainOrCover::Cover => positioning_ratio > intrinsic_ratio,
};
// The other dimension needs to be adjusted
if fit_width {
tile_size.height = tile_size.width / intrinsic_ratio
} else {
tile_size.width = tile_size.height * intrinsic_ratio
}
}
tile_size
};
let mut tile_size = match get_cyclic(&b.background_size.0, index) {
Size::Contain => size_contain_or_cover(ContainOrCover::Contain),
Size::Cover => size_contain_or_cover(ContainOrCover::Cover),
Size::ExplicitSize { width, height } => {
let mut width = width.non_auto().map(|lp| {
lp.0.percentage_relative_to(Length::new(positioning_area.size.width))
});
let mut height = height.non_auto().map(|lp| {
lp.0.percentage_relative_to(Length::new(positioning_area.size.height))
});
if width.is_none() && height.is_none() {
// Both computed values are 'auto':
// use intrinsic sizes, treating missing width or height as 'auto'
width = intrinsic.width;
height = intrinsic.height;
}
match (width, height) {
(Some(w), Some(h)) => units::LayoutSize::new(w.px(), h.px()),
(Some(w), None) => {
let h = if let Some(intrinsic_ratio) = intrinsic.ratio {
w / intrinsic_ratio
} else if let Some(intrinsic_height) = intrinsic.height {
intrinsic_height
} else {
// Treated as 100%
Length::new(positioning_area.size.height)
};
units::LayoutSize::new(w.px(), h.px())
},
(None, Some(h)) => {
let w = if let Some(intrinsic_ratio) = intrinsic.ratio {
h * intrinsic_ratio
} else if let Some(intrinsic_width) = intrinsic.width {
intrinsic_width
} else {
// Treated as 100%
Length::new(positioning_area.size.width)
};
units::LayoutSize::new(w.px(), h.px())
},
// Both comptued values were 'auto', and neither intrinsic size is present
(None, None) => size_contain_or_cover(ContainOrCover::Contain),
}
},
};
if tile_size.width == 0.0 || tile_size.height == 0.0 {
return;
}
struct Layout1DResult {
repeat: bool,
bounds_origin: f32,
bounds_size: f32,
}
/// Abstract over the horizontal or vertical dimension
/// Coordinates (0, 0) for the purpose of this function are the positioning areas origin.
fn layout_1d(
tile_size: &mut f32,
tile_spacing: &mut f32,
mut repeat: Repeat,
position: &LengthPercentage,
clipping_area_origin: f32,
clipping_area_size: f32,
positioning_area_size: f32,
) -> Layout1DResult {
// https://drafts.csswg.org/css-backgrounds/#background-repeat
if let Repeat::Round = repeat {
*tile_size = positioning_area_size / (positioning_area_size / *tile_size).round();
}
// https://drafts.csswg.org/css-backgrounds/#background-position
let mut position = position
.percentage_relative_to(Length::new(positioning_area_size - *tile_size))
.px();
// https://drafts.csswg.org/css-backgrounds/#background-repeat
if let Repeat::Space = repeat {
// The most entire tiles we can fit
let tile_count = (positioning_area_size / *tile_size).floor();
if tile_count >= 2.0 {
position = 0.0;
// Make the outsides of the first and last of that many tiles
// touch the edges of the positioning area:
let total_space = positioning_area_size - *tile_size * tile_count;
let spaces_count = tile_count - 1.0;
*tile_spacing = total_space / spaces_count;
} else {
repeat = Repeat::NoRepeat
}
}
match repeat {
Repeat::Repeat | Repeat::Round | Repeat::Space => {
// WebRenders `RepeatingImageDisplayItem` contains a `bounds` rectangle and:
//
// * The tiling is clipped to the intersection of `clip_rect` and `bounds`
// * The origin (top-left corner) of `bounds` is the position
// of the “first” (top-left-most) tile.
//
// In the general case that first tile is not the one that is positioned by
// `background-position`.
// We want it to be the top-left-most tile that intersects with `clip_rect`.
// We find it by offsetting by a whole number of strides,
// then compute `bounds` such that:
//
// * Its bottom-right is the bottom-right of `clip_rect`
// * Its top-left is the top-left of first tile.
let tile_stride = *tile_size + *tile_spacing;
let offset = position - clipping_area_origin;
let bounds_origin = position - tile_stride * (offset / tile_stride).ceil();
let bounds_size = clipping_area_size - bounds_origin - clipping_area_origin;
Layout1DResult {
repeat: true,
bounds_origin,
bounds_size,
}
},
Repeat::NoRepeat => {
// `RepeatingImageDisplayItem` always repeats in both dimension.
// When we want only one of the dimensions to repeat,
// we use the `bounds` rectangle to clip the tiling to one tile
// in that dimension.
Layout1DResult {
repeat: false,
bounds_origin: position,
bounds_size: *tile_size,
}
},
}
}
let mut tile_spacing = units::LayoutSize::zero();
let RepeatXY(repeat_x, repeat_y) = *get_cyclic(&b.background_repeat.0, index);
let result_x = layout_1d(
&mut tile_size.width,
&mut tile_spacing.width,
repeat_x,
get_cyclic(&b.background_position_x.0, index),
clipping_area.origin.x - positioning_area.origin.x,
clipping_area.size.width,
positioning_area.size.width,
);
let result_y = layout_1d(
&mut tile_size.height,
&mut tile_spacing.height,
repeat_y,
get_cyclic(&b.background_position_y.0, index),
clipping_area.origin.y - positioning_area.origin.y,
clipping_area.size.height,
positioning_area.size.height,
);
let bounds = units::LayoutRect::new(
positioning_area.origin + Vector2D::new(result_x.bounds_origin, result_y.bounds_origin),
Size2D::new(result_x.bounds_size, result_y.bounds_size),
);
// The 'backgound-clip' property maps directly to `clip_rect` in `CommonItemProperties`:
let mut common = builder.common_properties(*clipping_area);
self.with_border_edge_clip(builder, &mut common);
if result_x.repeat || result_y.repeat {
builder.wr.push_repeating_image(
&common,
bounds,
tile_size,
tile_spacing,
image_rendering(self.fragment.style.clone_image_rendering()),
wr::AlphaType::PremultipliedAlpha,
key,
wr::ColorF::WHITE,
)
} else {
builder.wr.push_image(
&common,
bounds,
image_rendering(self.fragment.style.clone_image_rendering()),
wr::AlphaType::PremultipliedAlpha,
key,
wr::ColorF::WHITE,
)
}
}
fn build_border(&mut self, builder: &mut DisplayListBuilder) {
let b = self.fragment.style.get_border();
let widths = SideOffsets2D::new(
@ -674,3 +501,40 @@ fn image_rendering(ir: style::computed_values::image_rendering::T) -> wr::ImageR
ImageRendering::Pixelated => wr::ImageRendering::Pixelated,
}
}
/// Radii for the padding edge or content edge
fn inner_radii(mut radii: wr::BorderRadius, offsets: units::LayoutSideOffsets) -> wr::BorderRadius {
radii.top_left.width -= -offsets.left;
radii.bottom_left.width -= offsets.left;
radii.top_right.width -= offsets.right;
radii.bottom_right.width -= offsets.right;
radii.top_left.height -= offsets.top;
radii.top_right.height -= offsets.top;
radii.bottom_left.height -= offsets.bottom;
radii.bottom_right.height -= offsets.bottom;
radii
}
fn clip_for_radii(
radii: wr::BorderRadius,
rect: units::LayoutRect,
builder: &mut DisplayListBuilder,
) -> Option<wr::ClipId> {
if radii.is_zero() {
None
} else {
Some(builder.wr.define_clip(
&builder.current_space_and_clip,
rect,
Some(wr::ComplexClipRegion {
rect,
radii,
mode: wr::ClipMode::Clip,
}),
None,
))
}
}

View file

@ -240,6 +240,44 @@ impl<T> flow_relative::Sides<T> {
{
self.block_start + self.block_end
}
pub fn to_physical(&self, mode: WritingMode) -> PhysicalSides<T>
where
T: Clone,
{
let top;
let right;
let bottom;
let left;
if mode.is_vertical() {
if mode.is_vertical_lr() {
left = self.block_start.clone();
right = self.block_end.clone();
} else {
right = self.block_start.clone();
left = self.block_end.clone();
}
if mode.is_inline_tb() {
top = self.inline_start.clone();
bottom = self.inline_end.clone();
} else {
bottom = self.inline_start.clone();
top = self.inline_end.clone();
}
} else {
top = self.block_start.clone();
bottom = self.block_end.clone();
if mode.is_bidi_ltr() {
left = self.inline_start.clone();
right = self.inline_end.clone();
} else {
right = self.inline_start.clone();
left = self.inline_end.clone();
}
}
PhysicalSides::new(top, right, bottom, left)
}
}
impl flow_relative::Sides<LengthPercentage> {
@ -342,3 +380,15 @@ impl ToWebRender for PhysicalRect<Length> {
webrender_api::units::LayoutRect::new(self.origin.to_webrender(), self.size.to_webrender())
}
}
impl ToWebRender for PhysicalSides<Length> {
type Type = webrender_api::units::LayoutSideOffsets;
fn to_webrender(&self) -> Self::Type {
webrender_api::units::LayoutSideOffsets::new(
self.top.px(),
self.right.px(),
self.bottom.px(),
self.left.px(),
)
}
}