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

components/layout_2020/display_list/background.rs

@@ -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,
+            }
+        },
+    }
+}

components/layout_2020/display_list/gradient.rs

@@ -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
+}

components/layout_2020/display_list/mod.rs

@@ -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,
+        ))
+    }
+}

components/layout_2020/geom.rs

@@ -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(),
+        )
+    }
+}