mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
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:
commit
31eafadcb3
334 changed files with 6001 additions and 290 deletions
251
components/layout_2020/display_list/background.rs
Normal file
251
components/layout_2020/display_list/background.rs
Normal 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 area’s 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 => {
|
||||
// WebRender’s `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,
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
336
components/layout_2020/display_list/gradient.rs
Normal file
336
components/layout_2020/display_list/gradient.rs
Normal 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 line’s 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?
|
||||
// It’s debatble whether that’s 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
|
||||
}
|
|
@ -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 won’t 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 area’s 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 => {
|
||||
// WebRender’s `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,
|
||||
))
|
||||
}
|
||||
}
|
|
@ -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(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue