Create own file for background calculations in layout

Move display_list_builder.rs and webrender_helpers.rs
along with the new file to components/layout/display_list/

Remove apparently unused IdType enum.
Only variant used was OverflowClip.

See #19676

components/layout/display_list/background.rs

@@ -0,0 +1,549 @@
+/* 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 http://mozilla.org/MPL/2.0/. */
+
+//! Calculations for CSS images and CSS backgrounds.
+
+#![deny(unsafe_code)]
+
+// FIXME(rust-lang/rust#26264): Remove GenericEndingShape and GenericGradientItem.
+
+use app_units::Au;
+use display_list::ToGfxColor;
+use euclid::{Point2D, Size2D, Vector2D};
+use gfx::display_list;
+use model::MaybeAuto;
+use style::values::computed::{Angle, GradientItem};
+use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto, Percentage};
+use style::values::computed::Position;
+use style::values::computed::image::{EndingShape, LineDirection};
+use style::values::generics::background::BackgroundSize;
+use style::values::generics::image::{Circle, Ellipse, ShapeExtent};
+use style::values::generics::image::EndingShape as GenericEndingShape;
+use style::values::generics::image::GradientItem as GenericGradientItem;
+use style::values::specified::background::RepeatKeyword;
+use style::values::specified::position::{X, Y};
+use webrender_api::GradientStop;
+
+/// A helper data structure for gradients.
+#[derive(Clone, Copy)]
+struct StopRun {
+    start_offset: f32,
+    end_offset: f32,
+    start_index: usize,
+    stop_count: usize,
+}
+
+/// For a given area and an image compute how big the
+/// image should be displayed on the background.
+pub fn compute_background_image_size(
+    bg_size: BackgroundSize<LengthOrPercentageOrAuto>,
+    bounds_size: Size2D<Au>,
+    intrinsic_size: Option<Size2D<Au>>,
+) -> Size2D<Au> {
+    match intrinsic_size {
+        None => match bg_size {
+            BackgroundSize::Cover | BackgroundSize::Contain => bounds_size,
+            BackgroundSize::Explicit { width, height } => Size2D::new(
+                MaybeAuto::from_style(width, bounds_size.width)
+                    .specified_or_default(bounds_size.width),
+                MaybeAuto::from_style(height, bounds_size.height)
+                    .specified_or_default(bounds_size.height),
+            ),
+        },
+        Some(own_size) => {
+            // If `image_aspect_ratio` < `bounds_aspect_ratio`, the image is tall; otherwise, it is
+            // wide.
+            let image_aspect_ratio = own_size.width.to_f32_px() / own_size.height.to_f32_px();
+            let bounds_aspect_ratio =
+                bounds_size.width.to_f32_px() / bounds_size.height.to_f32_px();
+            match (bg_size, image_aspect_ratio < bounds_aspect_ratio) {
+                (BackgroundSize::Contain, false) | (BackgroundSize::Cover, true) => Size2D::new(
+                    bounds_size.width,
+                    bounds_size.width.scale_by(image_aspect_ratio.recip()),
+                ),
+                (BackgroundSize::Contain, true) | (BackgroundSize::Cover, false) => Size2D::new(
+                    bounds_size.height.scale_by(image_aspect_ratio),
+                    bounds_size.height,
+                ),
+                (
+                    BackgroundSize::Explicit {
+                        width,
+                        height: LengthOrPercentageOrAuto::Auto,
+                    },
+                    _,
+                ) => {
+                    let width = MaybeAuto::from_style(width, bounds_size.width)
+                        .specified_or_default(own_size.width);
+                    Size2D::new(width, width.scale_by(image_aspect_ratio.recip()))
+                },
+                (
+                    BackgroundSize::Explicit {
+                        width: LengthOrPercentageOrAuto::Auto,
+                        height,
+                    },
+                    _,
+                ) => {
+                    let height = MaybeAuto::from_style(height, bounds_size.height)
+                        .specified_or_default(own_size.height);
+                    Size2D::new(height.scale_by(image_aspect_ratio), height)
+                },
+                (BackgroundSize::Explicit { width, height }, _) => Size2D::new(
+                    MaybeAuto::from_style(width, bounds_size.width)
+                        .specified_or_default(own_size.width),
+                    MaybeAuto::from_style(height, bounds_size.height)
+                        .specified_or_default(own_size.height),
+                ),
+            }
+        },
+    }
+}
+
+fn tile_image_round(
+    position: &mut Au,
+    size: &mut Au,
+    absolute_anchor_origin: Au,
+    image_size: &mut Au,
+) {
+    if *size == Au(0) || *image_size == Au(0) {
+        *position = Au(0);
+        *size = Au(0);
+        return;
+    }
+
+    let number_of_tiles = (size.to_f32_px() / image_size.to_f32_px()).round().max(1.0);
+    *image_size = *size / (number_of_tiles as i32);
+    tile_image(position, size, absolute_anchor_origin, *image_size);
+}
+
+fn tile_image_spaced(
+    position: &mut Au,
+    size: &mut Au,
+    tile_spacing: &mut Au,
+    absolute_anchor_origin: Au,
+    image_size: Au,
+) {
+    if *size == Au(0) || image_size == Au(0) {
+        *position = Au(0);
+        *size = Au(0);
+        *tile_spacing = Au(0);
+        return;
+    }
+
+    // Per the spec, if the space available is not enough for two images, just tile as
+    // normal but only display a single tile.
+    if image_size * 2 >= *size {
+        tile_image(position, size, absolute_anchor_origin, image_size);
+        *tile_spacing = Au(0);
+        *size = image_size;
+        return;
+    }
+
+    // Take the box size, remove room for two tiles on the edges, and then calculate how many
+    // other tiles fit in between them.
+    let size_remaining = *size - (image_size * 2);
+    let num_middle_tiles = (size_remaining.to_f32_px() / image_size.to_f32_px()).floor() as i32;
+
+    // Allocate the remaining space as padding between tiles. background-position is ignored
+    // as per the spec, so the position is just the box origin. We are also ignoring
+    // background-attachment here, which seems unspecced when combined with
+    // background-repeat: space.
+    let space_for_middle_tiles = image_size * num_middle_tiles;
+    *tile_spacing = (size_remaining - space_for_middle_tiles) / (num_middle_tiles + 1);
+}
+
+/// Tile an image
+fn tile_image(position: &mut Au, size: &mut Au, absolute_anchor_origin: Au, image_size: Au) {
+    // Avoid division by zero below!
+    // Images with a zero width or height are not displayed.
+    // Therefore the positions do not matter and can be left unchanged.
+    // NOTE: A possible optimization is not to build
+    // display items in this case at all.
+    if image_size == Au(0) {
+        return;
+    }
+
+    let delta_pixels = absolute_anchor_origin - *position;
+    let image_size_px = image_size.to_f32_px();
+    let tile_count = ((delta_pixels.to_f32_px() + image_size_px - 1.0) / image_size_px).floor();
+    let offset = image_size * (tile_count as i32);
+    let new_position = absolute_anchor_origin - offset;
+    *size = *position - new_position + *size;
+    *position = new_position;
+}
+
+/// For either the x or the y axis ajust various values to account for tiling.
+///
+/// This is done separately for both axes because the repeat keywords may differ.
+pub fn tile_image_axis(
+    repeat: RepeatKeyword,
+    position: &mut Au,
+    size: &mut Au,
+    tile_size: &mut Au,
+    tile_spacing: &mut Au,
+    offset: Au,
+    clip_origin: Au,
+    clip_size: Au,
+) {
+    let absolute_anchor_origin = *position + offset;
+    match repeat {
+        RepeatKeyword::NoRepeat => {
+            *position += offset;
+            *size = *tile_size;
+        },
+        RepeatKeyword::Repeat => {
+            *position = clip_origin;
+            *size = clip_size;
+            tile_image(position, size, absolute_anchor_origin, *tile_size);
+        },
+        RepeatKeyword::Space => {
+            tile_image_spaced(
+                position,
+                size,
+                tile_spacing,
+                absolute_anchor_origin,
+                *tile_size,
+            );
+            let combined_tile_size = *tile_size + *tile_spacing;
+            *position = clip_origin;
+            *size = clip_size;
+            tile_image(position, size, absolute_anchor_origin, combined_tile_size);
+        },
+        RepeatKeyword::Round => {
+            tile_image_round(position, size, absolute_anchor_origin, tile_size);
+            *position = clip_origin;
+            *size = clip_size;
+            tile_image(position, size, absolute_anchor_origin, *tile_size);
+        },
+    }
+}
+
+/// Determines the radius of a circle if it was not explictly provided.
+/// <https://drafts.csswg.org/css-images-3/#typedef-size>
+fn convert_circle_size_keyword(
+    keyword: ShapeExtent,
+    size: &Size2D<Au>,
+    center: &Point2D<Au>,
+) -> Size2D<Au> {
+    let radius = match keyword {
+        ShapeExtent::ClosestSide | ShapeExtent::Contain => {
+            let dist = get_distance_to_sides(size, center, ::std::cmp::min);
+            ::std::cmp::min(dist.width, dist.height)
+        },
+        ShapeExtent::FarthestSide => {
+            let dist = get_distance_to_sides(size, center, ::std::cmp::max);
+            ::std::cmp::max(dist.width, dist.height)
+        },
+        ShapeExtent::ClosestCorner => get_distance_to_corner(size, center, ::std::cmp::min),
+        ShapeExtent::FarthestCorner | ShapeExtent::Cover => {
+            get_distance_to_corner(size, center, ::std::cmp::max)
+        },
+    };
+    Size2D::new(radius, radius)
+}
+
+/// Returns the radius for an ellipse with the same ratio as if it was matched to the sides.
+fn get_ellipse_radius<F>(size: &Size2D<Au>, center: &Point2D<Au>, cmp: F) -> Size2D<Au>
+where
+    F: Fn(Au, Au) -> Au,
+{
+    let dist = get_distance_to_sides(size, center, cmp);
+    Size2D::new(
+        dist.width.scale_by(::std::f32::consts::FRAC_1_SQRT_2 * 2.0),
+        dist.height
+            .scale_by(::std::f32::consts::FRAC_1_SQRT_2 * 2.0),
+    )
+}
+
+/// Determines the radius of an ellipse if it was not explictly provided.
+/// <https://drafts.csswg.org/css-images-3/#typedef-size>
+fn convert_ellipse_size_keyword(
+    keyword: ShapeExtent,
+    size: &Size2D<Au>,
+    center: &Point2D<Au>,
+) -> Size2D<Au> {
+    match keyword {
+        ShapeExtent::ClosestSide | ShapeExtent::Contain => {
+            get_distance_to_sides(size, center, ::std::cmp::min)
+        },
+        ShapeExtent::FarthestSide => get_distance_to_sides(size, center, ::std::cmp::max),
+        ShapeExtent::ClosestCorner => get_ellipse_radius(size, center, ::std::cmp::min),
+        ShapeExtent::FarthestCorner | ShapeExtent::Cover => {
+            get_ellipse_radius(size, center, ::std::cmp::max)
+        },
+    }
+}
+
+fn convert_gradient_stops(gradient_items: &[GradientItem], total_length: Au) -> Vec<GradientStop> {
+    // Determine the position of each stop per CSS-IMAGES § 3.4.
+
+    // Only keep the color stops, discard the color interpolation hints.
+    let mut stop_items = gradient_items
+        .iter()
+        .filter_map(|item| match *item {
+            GenericGradientItem::ColorStop(ref stop) => Some(*stop),
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+
+    assert!(stop_items.len() >= 2);
+
+    // Run the algorithm from
+    // https://drafts.csswg.org/css-images-3/#color-stop-syntax
+
+    // Step 1:
+    // If the first color stop does not have a position, set its position to 0%.
+    {
+        let first = stop_items.first_mut().unwrap();
+        if first.position.is_none() {
+            first.position = Some(LengthOrPercentage::Percentage(Percentage(0.0)));
+        }
+    }
+    // If the last color stop does not have a position, set its position to 100%.
+    {
+        let last = stop_items.last_mut().unwrap();
+        if last.position.is_none() {
+            last.position = Some(LengthOrPercentage::Percentage(Percentage(1.0)));
+        }
+    }
+
+    // Step 2: Move any stops placed before earlier stops to the
+    // same position as the preceding stop.
+    let mut last_stop_position = stop_items.first().unwrap().position.unwrap();
+    for stop in stop_items.iter_mut().skip(1) {
+        if let Some(pos) = stop.position {
+            if position_to_offset(last_stop_position, total_length) >
+                position_to_offset(pos, total_length)
+            {
+                stop.position = Some(last_stop_position);
+            }
+            last_stop_position = stop.position.unwrap();
+        }
+    }
+
+    // Step 3: Evenly space stops without position.
+    // Note: Remove the + 2 if fix_gradient_stops is changed.
+    let mut stops = Vec::with_capacity(stop_items.len() + 2);
+    let mut stop_run = None;
+    for (i, stop) in stop_items.iter().enumerate() {
+        let offset = match stop.position {
+            None => {
+                if stop_run.is_none() {
+                    // Initialize a new stop run.
+                    // `unwrap()` here should never fail because this is the beginning of
+                    // a stop run, which is always bounded by a length or percentage.
+                    let start_offset =
+                        position_to_offset(stop_items[i - 1].position.unwrap(), total_length);
+                    // `unwrap()` here should never fail because this is the end of
+                    // a stop run, which is always bounded by a length or percentage.
+                    let (end_index, end_stop) = stop_items[(i + 1)..]
+                        .iter()
+                        .enumerate()
+                        .find(|&(_, ref stop)| stop.position.is_some())
+                        .unwrap();
+                    let end_offset = position_to_offset(end_stop.position.unwrap(), total_length);
+                    stop_run = Some(StopRun {
+                        start_offset: start_offset,
+                        end_offset: end_offset,
+                        start_index: i - 1,
+                        stop_count: end_index,
+                    })
+                }
+
+                let stop_run = stop_run.unwrap();
+                let stop_run_length = stop_run.end_offset - stop_run.start_offset;
+                stop_run.start_offset +
+                    stop_run_length * (i - stop_run.start_index) as f32 /
+                        ((2 + stop_run.stop_count) as f32)
+            },
+            Some(position) => {
+                stop_run = None;
+                position_to_offset(position, total_length)
+            },
+        };
+        assert!(offset.is_finite());
+        stops.push(GradientStop {
+            offset: offset,
+            color: stop.color.to_gfx_color(),
+        })
+    }
+    stops
+}
+
+pub fn convert_linear_gradient(
+    size: Size2D<Au>,
+    stops: &[GradientItem],
+    direction: LineDirection,
+    repeating: bool,
+) -> display_list::Gradient {
+    let angle = match direction {
+        LineDirection::Angle(angle) => angle.radians(),
+        LineDirection::Horizontal(x) => match x {
+            X::Left => Angle::Deg(270.).radians(),
+            X::Right => Angle::Deg(90.).radians(),
+        },
+        LineDirection::Vertical(y) => match y {
+            Y::Top => Angle::Deg(0.).radians(),
+            Y::Bottom => Angle::Deg(180.).radians(),
+        },
+        LineDirection::Corner(horizontal, vertical) => {
+            // This the angle for one of the diagonals of the box. Our angle
+            // will either be this one, this one + PI, or one of the other
+            // two perpendicular angles.
+            let atan = (size.height.to_f32_px() / size.width.to_f32_px()).atan();
+            match (horizontal, vertical) {
+                (X::Right, Y::Bottom) => ::std::f32::consts::PI - atan,
+                (X::Left, Y::Bottom) => ::std::f32::consts::PI + atan,
+                (X::Right, Y::Top) => atan,
+                (X::Left, Y::Top) => -atan,
+            }
+        },
+    };
+
+    // Get correct gradient line length, based on:
+    // https://drafts.csswg.org/css-images-3/#linear-gradients
+    let dir = Point2D::new(angle.sin(), -angle.cos());
+
+    let line_length =
+        (dir.x * size.width.to_f32_px()).abs() + (dir.y * size.height.to_f32_px()).abs();
+
+    let inv_dir_length = 1.0 / (dir.x * dir.x + dir.y * dir.y).sqrt();
+
+    // This is the vector between the center and the ending point; i.e. half
+    // of the distance between the starting point and the ending point.
+    let delta = Vector2D::new(
+        Au::from_f32_px(dir.x * inv_dir_length * line_length / 2.0),
+        Au::from_f32_px(dir.y * inv_dir_length * line_length / 2.0),
+    );
+
+    // This is the length of the gradient line.
+    let length = Au::from_f32_px((delta.x.to_f32_px() * 2.0).hypot(delta.y.to_f32_px() * 2.0));
+
+    let mut stops = convert_gradient_stops(stops, length);
+
+    // Only clamped gradients need to be fixed because in repeating gradients
+    // there is no "first" or "last" stop because they repeat infinitly in
+    // both directions, so the rendering is always correct.
+    if !repeating {
+        fix_gradient_stops(&mut stops);
+    }
+
+    let center = Point2D::new(size.width / 2, size.height / 2);
+
+    display_list::Gradient {
+        start_point: center - delta,
+        end_point: center + delta,
+        stops: stops,
+        repeating: repeating,
+    }
+}
+
+pub fn convert_radial_gradient(
+    size: Size2D<Au>,
+    stops: &[GradientItem],
+    shape: EndingShape,
+    center: Position,
+    repeating: bool,
+) -> display_list::RadialGradient {
+    let center = Point2D::new(
+        center.horizontal.to_used_value(size.width),
+        center.vertical.to_used_value(size.height),
+    );
+    let radius = match shape {
+        GenericEndingShape::Circle(Circle::Radius(length)) => {
+            let length = Au::from(length);
+            Size2D::new(length, length)
+        },
+        GenericEndingShape::Circle(Circle::Extent(extent)) => {
+            convert_circle_size_keyword(extent, &size, &center)
+        },
+        GenericEndingShape::Ellipse(Ellipse::Radii(x, y)) => {
+            Size2D::new(x.to_used_value(size.width), y.to_used_value(size.height))
+        },
+        GenericEndingShape::Ellipse(Ellipse::Extent(extent)) => {
+            convert_ellipse_size_keyword(extent, &size, &center)
+        },
+    };
+
+    let mut stops = convert_gradient_stops(stops, radius.width);
+    // Repeating gradients have no last stops that can be ignored. So
+    // fixup is not necessary but may actually break the gradient.
+    if !repeating {
+        fix_gradient_stops(&mut stops);
+    }
+
+    display_list::RadialGradient {
+        center: center,
+        radius: radius,
+        stops: stops,
+        repeating: repeating,
+    }
+}
+
+#[inline]
+/// Duplicate the first and last stops if necessary.
+///
+/// Explanation by pyfisch:
+/// If the last stop is at the same position as the previous stop the
+/// last color is ignored by webrender. This differs from the spec
+/// (I think so). The  implementations of Chrome and Firefox seem
+/// to have the same problem but work fine if the position of the last
+/// stop is smaller than 100%. (Otherwise they ignore the last stop.)
+///
+/// Similarly the first stop is duplicated if it is not placed
+/// at the start of the virtual gradient ray.
+fn fix_gradient_stops(stops: &mut Vec<GradientStop>) {
+    if stops.first().unwrap().offset > 0.0 {
+        let color = stops.first().unwrap().color;
+        stops.insert(
+            0,
+            GradientStop {
+                offset: 0.0,
+                color: color,
+            },
+        )
+    }
+    if stops.last().unwrap().offset < 1.0 {
+        let color = stops.last().unwrap().color;
+        stops.push(GradientStop {
+            offset: 1.0,
+            color: color,
+        })
+    }
+}
+
+/// Returns the the distance to the nearest or farthest corner depending on the comperator.
+fn get_distance_to_corner<F>(size: &Size2D<Au>, center: &Point2D<Au>, cmp: F) -> Au
+where
+    F: Fn(Au, Au) -> Au,
+{
+    let dist = get_distance_to_sides(size, center, cmp);
+    Au::from_f32_px(dist.width.to_f32_px().hypot(dist.height.to_f32_px()))
+}
+
+/// Returns the distance to the nearest or farthest sides depending on the comparator.
+///
+/// The first return value is horizontal distance the second vertical distance.
+fn get_distance_to_sides<F>(size: &Size2D<Au>, center: &Point2D<Au>, cmp: F) -> Size2D<Au>
+where
+    F: Fn(Au, Au) -> Au,
+{
+    let top_side = center.y;
+    let right_side = size.width - center.x;
+    let bottom_side = size.height - center.y;
+    let left_side = center.x;
+    Size2D::new(cmp(left_side, right_side), cmp(top_side, bottom_side))
+}
+
+fn position_to_offset(position: LengthOrPercentage, total_length: Au) -> f32 {
+    if total_length == Au(0) {
+        return 0.0;
+    }
+    match position {
+        LengthOrPercentage::Length(l) => l.to_i32_au() as f32 / total_length.0 as f32,
+        LengthOrPercentage::Percentage(percentage) => percentage.0 as f32,
+        LengthOrPercentage::Calc(calc) => {
+            calc.to_used_value(Some(total_length)).unwrap().0 as f32 / total_length.0 as f32
+        },
+    }
+}

components/layout/display_list/mod.rs

@@ -0,0 +1,18 @@
+/* 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 http://mozilla.org/MPL/2.0/. */
+
+pub use self::builder::BlockFlowDisplayListBuilding;
+pub use self::builder::BorderPaintingMode;
+pub use self::builder::DisplayListBuildState;
+pub use self::builder::FlexFlowDisplayListBuilding;
+pub use self::builder::InlineFlowDisplayListBuilding;
+pub use self::builder::ListItemFlowDisplayListBuilding;
+pub use self::builder::StackingContextCollectionFlags;
+pub use self::builder::StackingContextCollectionState;
+pub use self::builder::ToGfxColor;
+pub use self::webrender_helpers::WebRenderDisplayListConverter;
+
+mod background;
+mod builder;
+mod webrender_helpers;

components/layout/display_list/webrender_helpers.rs

@@ -0,0 +1,621 @@
+/* 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 http://mozilla.org/MPL/2.0/. */
+
+// TODO(gw): This contains helper traits and implementations for converting Servo display lists
+//           into WebRender display lists. In the future, this step should be completely removed.
+//           This might be achieved by sharing types between WR and Servo display lists, or
+//           completely converting layout to directly generate WebRender display lists, for example.
+
+use app_units::Au;
+use euclid::{Point2D, Rect, SideOffsets2D, Size2D, Vector2D};
+use gfx::display_list::{BorderDetails, BorderRadii, BoxShadowClipMode, ClipScrollNode};
+use gfx::display_list::{ClipScrollNodeIndex, ClipScrollNodeType, ClippingRegion, DisplayItem};
+use gfx::display_list::{DisplayList, StackingContextType};
+use msg::constellation_msg::PipelineId;
+use style::computed_values::image_rendering::T as ImageRendering;
+use style::computed_values::mix_blend_mode::T as MixBlendMode;
+use style::computed_values::transform_style::T as TransformStyle;
+use style::values::computed::{BorderStyle, Filter};
+use style::values::generics::effects::Filter as GenericFilter;
+use webrender_api::{self, ClipAndScrollInfo, ClipId, ClipMode, ComplexClipRegion};
+use webrender_api::{DisplayListBuilder, ExtendMode, LayoutTransform};
+
+pub trait WebRenderDisplayListConverter {
+    fn convert_to_webrender(&self, pipeline_id: PipelineId) -> DisplayListBuilder;
+}
+
+trait WebRenderDisplayItemConverter {
+    fn prim_info(&self) -> webrender_api::LayoutPrimitiveInfo;
+    fn convert_to_webrender(
+        &self,
+        builder: &mut DisplayListBuilder,
+        clip_scroll_nodes: &[ClipScrollNode],
+        clip_ids: &mut Vec<Option<ClipId>>,
+        current_clip_and_scroll_info: &mut ClipAndScrollInfo,
+    );
+}
+
+trait ToBorderStyle {
+    fn to_border_style(&self) -> webrender_api::BorderStyle;
+}
+
+impl ToBorderStyle for BorderStyle {
+    fn to_border_style(&self) -> webrender_api::BorderStyle {
+        match *self {
+            BorderStyle::None => webrender_api::BorderStyle::None,
+            BorderStyle::Solid => webrender_api::BorderStyle::Solid,
+            BorderStyle::Double => webrender_api::BorderStyle::Double,
+            BorderStyle::Dotted => webrender_api::BorderStyle::Dotted,
+            BorderStyle::Dashed => webrender_api::BorderStyle::Dashed,
+            BorderStyle::Hidden => webrender_api::BorderStyle::Hidden,
+            BorderStyle::Groove => webrender_api::BorderStyle::Groove,
+            BorderStyle::Ridge => webrender_api::BorderStyle::Ridge,
+            BorderStyle::Inset => webrender_api::BorderStyle::Inset,
+            BorderStyle::Outset => webrender_api::BorderStyle::Outset,
+        }
+    }
+}
+
+trait ToBorderWidths {
+    fn to_border_widths(&self) -> webrender_api::BorderWidths;
+}
+
+impl ToBorderWidths for SideOffsets2D<Au> {
+    fn to_border_widths(&self) -> webrender_api::BorderWidths {
+        webrender_api::BorderWidths {
+            left: self.left.to_f32_px(),
+            top: self.top.to_f32_px(),
+            right: self.right.to_f32_px(),
+            bottom: self.bottom.to_f32_px(),
+        }
+    }
+}
+
+trait ToBoxShadowClipMode {
+    fn to_clip_mode(&self) -> webrender_api::BoxShadowClipMode;
+}
+
+impl ToBoxShadowClipMode for BoxShadowClipMode {
+    fn to_clip_mode(&self) -> webrender_api::BoxShadowClipMode {
+        match *self {
+            BoxShadowClipMode::Inset => webrender_api::BoxShadowClipMode::Inset,
+            BoxShadowClipMode::Outset => webrender_api::BoxShadowClipMode::Outset,
+        }
+    }
+}
+
+trait ToSizeF {
+    fn to_sizef(&self) -> webrender_api::LayoutSize;
+}
+
+trait ToPointF {
+    fn to_pointf(&self) -> webrender_api::LayoutPoint;
+}
+
+trait ToVectorF {
+    fn to_vectorf(&self) -> webrender_api::LayoutVector2D;
+}
+
+impl ToPointF for Point2D<Au> {
+    fn to_pointf(&self) -> webrender_api::LayoutPoint {
+        webrender_api::LayoutPoint::new(self.x.to_f32_px(), self.y.to_f32_px())
+    }
+}
+
+impl ToVectorF for Vector2D<Au> {
+    fn to_vectorf(&self) -> webrender_api::LayoutVector2D {
+        webrender_api::LayoutVector2D::new(self.x.to_f32_px(), self.y.to_f32_px())
+    }
+}
+
+impl ToSizeF for Size2D<Au> {
+    fn to_sizef(&self) -> webrender_api::LayoutSize {
+        webrender_api::LayoutSize::new(self.width.to_f32_px(), self.height.to_f32_px())
+    }
+}
+
+pub trait ToRectF {
+    fn to_rectf(&self) -> webrender_api::LayoutRect;
+}
+
+impl ToRectF for Rect<Au> {
+    fn to_rectf(&self) -> webrender_api::LayoutRect {
+        let x = self.origin.x.to_f32_px();
+        let y = self.origin.y.to_f32_px();
+        let w = self.size.width.to_f32_px();
+        let h = self.size.height.to_f32_px();
+        let point = webrender_api::LayoutPoint::new(x, y);
+        let size = webrender_api::LayoutSize::new(w, h);
+        webrender_api::LayoutRect::new(point, size)
+    }
+}
+
+pub trait ToBorderRadius {
+    fn to_border_radius(&self) -> webrender_api::BorderRadius;
+}
+
+impl ToBorderRadius for BorderRadii<Au> {
+    fn to_border_radius(&self) -> webrender_api::BorderRadius {
+        webrender_api::BorderRadius {
+            top_left: self.top_left.to_sizef(),
+            top_right: self.top_right.to_sizef(),
+            bottom_left: self.bottom_left.to_sizef(),
+            bottom_right: self.bottom_right.to_sizef(),
+        }
+    }
+}
+
+pub trait ToMixBlendMode {
+    fn to_mix_blend_mode(&self) -> webrender_api::MixBlendMode;
+}
+
+impl ToMixBlendMode for MixBlendMode {
+    fn to_mix_blend_mode(&self) -> webrender_api::MixBlendMode {
+        match *self {
+            MixBlendMode::Normal => webrender_api::MixBlendMode::Normal,
+            MixBlendMode::Multiply => webrender_api::MixBlendMode::Multiply,
+            MixBlendMode::Screen => webrender_api::MixBlendMode::Screen,
+            MixBlendMode::Overlay => webrender_api::MixBlendMode::Overlay,
+            MixBlendMode::Darken => webrender_api::MixBlendMode::Darken,
+            MixBlendMode::Lighten => webrender_api::MixBlendMode::Lighten,
+            MixBlendMode::ColorDodge => webrender_api::MixBlendMode::ColorDodge,
+            MixBlendMode::ColorBurn => webrender_api::MixBlendMode::ColorBurn,
+            MixBlendMode::HardLight => webrender_api::MixBlendMode::HardLight,
+            MixBlendMode::SoftLight => webrender_api::MixBlendMode::SoftLight,
+            MixBlendMode::Difference => webrender_api::MixBlendMode::Difference,
+            MixBlendMode::Exclusion => webrender_api::MixBlendMode::Exclusion,
+            MixBlendMode::Hue => webrender_api::MixBlendMode::Hue,
+            MixBlendMode::Saturation => webrender_api::MixBlendMode::Saturation,
+            MixBlendMode::Color => webrender_api::MixBlendMode::Color,
+            MixBlendMode::Luminosity => webrender_api::MixBlendMode::Luminosity,
+        }
+    }
+}
+
+trait ToImageRendering {
+    fn to_image_rendering(&self) -> webrender_api::ImageRendering;
+}
+
+impl ToImageRendering for ImageRendering {
+    fn to_image_rendering(&self) -> webrender_api::ImageRendering {
+        match *self {
+            ImageRendering::CrispEdges => webrender_api::ImageRendering::CrispEdges,
+            ImageRendering::Auto => webrender_api::ImageRendering::Auto,
+            ImageRendering::Pixelated => webrender_api::ImageRendering::Pixelated,
+        }
+    }
+}
+
+trait ToFilterOps {
+    fn to_filter_ops(&self) -> Vec<webrender_api::FilterOp>;
+}
+
+impl ToFilterOps for Vec<Filter> {
+    fn to_filter_ops(&self) -> Vec<webrender_api::FilterOp> {
+        let mut result = Vec::with_capacity(self.len());
+        for filter in self.iter() {
+            match *filter {
+                GenericFilter::Blur(radius) => {
+                    result.push(webrender_api::FilterOp::Blur(radius.px()))
+                },
+                GenericFilter::Brightness(amount) => {
+                    result.push(webrender_api::FilterOp::Brightness(amount.0))
+                },
+                GenericFilter::Contrast(amount) => {
+                    result.push(webrender_api::FilterOp::Contrast(amount.0))
+                },
+                GenericFilter::Grayscale(amount) => {
+                    result.push(webrender_api::FilterOp::Grayscale(amount.0))
+                },
+                GenericFilter::HueRotate(angle) => {
+                    result.push(webrender_api::FilterOp::HueRotate(angle.radians()))
+                },
+                GenericFilter::Invert(amount) => {
+                    result.push(webrender_api::FilterOp::Invert(amount.0))
+                },
+                GenericFilter::Opacity(amount) => {
+                    result.push(webrender_api::FilterOp::Opacity(amount.0.into(), amount.0));
+                },
+                GenericFilter::Saturate(amount) => {
+                    result.push(webrender_api::FilterOp::Saturate(amount.0))
+                },
+                GenericFilter::Sepia(amount) => {
+                    result.push(webrender_api::FilterOp::Sepia(amount.0))
+                },
+                GenericFilter::DropShadow(ref shadow) => match *shadow {},
+            }
+        }
+        result
+    }
+}
+
+pub trait ToTransformStyle {
+    fn to_transform_style(&self) -> webrender_api::TransformStyle;
+}
+
+impl ToTransformStyle for TransformStyle {
+    fn to_transform_style(&self) -> webrender_api::TransformStyle {
+        match *self {
+            TransformStyle::Auto | TransformStyle::Flat => webrender_api::TransformStyle::Flat,
+            TransformStyle::Preserve3d => webrender_api::TransformStyle::Preserve3D,
+        }
+    }
+}
+
+impl WebRenderDisplayListConverter for DisplayList {
+    fn convert_to_webrender(&self, pipeline_id: PipelineId) -> DisplayListBuilder {
+        let mut builder = DisplayListBuilder::with_capacity(
+            pipeline_id.to_webrender(),
+            self.bounds().size.to_sizef(),
+            1024 * 1024,
+        ); // 1 MB of space
+
+        let mut current_clip_and_scroll_info = pipeline_id.root_clip_and_scroll_info();
+        builder.push_clip_and_scroll_info(current_clip_and_scroll_info);
+
+        let mut clip_ids = Vec::with_capacity(self.clip_scroll_nodes.len());
+        clip_ids.resize(self.clip_scroll_nodes.len(), None);
+        clip_ids[0] = Some(ClipId::root_scroll_node(pipeline_id.to_webrender()));
+
+        for item in &self.list {
+            item.convert_to_webrender(
+                &mut builder,
+                &self.clip_scroll_nodes,
+                &mut clip_ids,
+                &mut current_clip_and_scroll_info,
+            );
+        }
+        builder
+    }
+}
+
+impl WebRenderDisplayItemConverter for DisplayItem {
+    fn prim_info(&self) -> webrender_api::LayoutPrimitiveInfo {
+        let tag = match self.base().metadata.pointing {
+            Some(cursor) => Some((self.base().metadata.node.0 as u64, cursor as u16)),
+            None => None,
+        };
+        webrender_api::LayoutPrimitiveInfo {
+            rect: self.base().bounds.to_rectf(),
+            local_clip: self.base().local_clip,
+            // TODO(gw): Make use of the WR backface visibility functionality.
+            is_backface_visible: true,
+            tag,
+        }
+    }
+
+    fn convert_to_webrender(
+        &self,
+        builder: &mut DisplayListBuilder,
+        clip_scroll_nodes: &[ClipScrollNode],
+        clip_ids: &mut Vec<Option<ClipId>>,
+        current_clip_and_scroll_info: &mut ClipAndScrollInfo,
+    ) {
+        let get_id = |clip_ids: &[Option<ClipId>], index: ClipScrollNodeIndex| -> ClipId {
+            match clip_ids[index.0] {
+                Some(id) => id,
+                None => unreachable!("Tried to use WebRender ClipId before it was defined."),
+            }
+        };
+
+        let clip_and_scroll_indices = self.base().clipping_and_scrolling;
+        let scrolling_id = get_id(clip_ids, clip_and_scroll_indices.scrolling);
+        let clip_and_scroll_info = match clip_and_scroll_indices.clipping {
+            None => ClipAndScrollInfo::simple(scrolling_id),
+            Some(index) => ClipAndScrollInfo::new(scrolling_id, get_id(clip_ids, index)),
+        };
+
+        if clip_and_scroll_info != *current_clip_and_scroll_info {
+            builder.pop_clip_id();
+            builder.push_clip_and_scroll_info(clip_and_scroll_info);
+            *current_clip_and_scroll_info = clip_and_scroll_info;
+        }
+
+        match *self {
+            DisplayItem::SolidColor(ref item) => {
+                builder.push_rect(&self.prim_info(), item.color);
+            },
+            DisplayItem::Text(ref item) => {
+                let mut origin = item.baseline_origin.clone();
+                let mut glyphs = vec![];
+
+                for slice in item.text_run
+                    .natural_word_slices_in_visual_order(&item.range)
+                {
+                    for glyph in slice.glyphs.iter_glyphs_for_byte_range(&slice.range) {
+                        let glyph_advance = if glyph.char_is_space() {
+                            glyph.advance() + item.text_run.extra_word_spacing
+                        } else {
+                            glyph.advance()
+                        };
+                        if !slice.glyphs.is_whitespace() {
+                            let glyph_offset = glyph.offset().unwrap_or(Point2D::zero());
+                            let x = (origin.x + glyph_offset.x).to_f32_px();
+                            let y = (origin.y + glyph_offset.y).to_f32_px();
+                            let point = webrender_api::LayoutPoint::new(x, y);
+                            let glyph = webrender_api::GlyphInstance {
+                                index: glyph.id(),
+                                point: point,
+                            };
+                            glyphs.push(glyph);
+                        }
+                        origin.x = origin.x + glyph_advance;
+                    }
+                }
+
+                if glyphs.len() > 0 {
+                    builder.push_text(
+                        &self.prim_info(),
+                        &glyphs,
+                        item.text_run.font_key,
+                        item.text_color,
+                        None,
+                    );
+                }
+            },
+            DisplayItem::Image(ref item) => {
+                if let Some(id) = item.webrender_image.key {
+                    if item.stretch_size.width > Au(0) && item.stretch_size.height > Au(0) {
+                        builder.push_image(
+                            &self.prim_info(),
+                            item.stretch_size.to_sizef(),
+                            item.tile_spacing.to_sizef(),
+                            item.image_rendering.to_image_rendering(),
+                            id,
+                        );
+                    }
+                }
+            },
+            DisplayItem::Border(ref item) => {
+                let widths = item.border_widths.to_border_widths();
+
+                let details = match item.details {
+                    BorderDetails::Normal(ref border) => {
+                        let left = webrender_api::BorderSide {
+                            color: border.color.left,
+                            style: border.style.left.to_border_style(),
+                        };
+                        let top = webrender_api::BorderSide {
+                            color: border.color.top,
+                            style: border.style.top.to_border_style(),
+                        };
+                        let right = webrender_api::BorderSide {
+                            color: border.color.right,
+                            style: border.style.right.to_border_style(),
+                        };
+                        let bottom = webrender_api::BorderSide {
+                            color: border.color.bottom,
+                            style: border.style.bottom.to_border_style(),
+                        };
+                        let radius = border.radius.to_border_radius();
+                        webrender_api::BorderDetails::Normal(webrender_api::NormalBorder {
+                            left: left,
+                            top: top,
+                            right: right,
+                            bottom: bottom,
+                            radius: radius,
+                        })
+                    },
+                    BorderDetails::Image(ref image) => match image.image.key {
+                        None => return,
+                        Some(key) => {
+                            webrender_api::BorderDetails::Image(webrender_api::ImageBorder {
+                                image_key: key,
+                                patch: webrender_api::NinePatchDescriptor {
+                                    width: image.image.width,
+                                    height: image.image.height,
+                                    slice: image.slice,
+                                },
+                                fill: image.fill,
+                                outset: image.outset,
+                                repeat_horizontal: image.repeat_horizontal,
+                                repeat_vertical: image.repeat_vertical,
+                            })
+                        },
+                    },
+                    BorderDetails::Gradient(ref gradient) => {
+                        let extend_mode = if gradient.gradient.repeating {
+                            ExtendMode::Repeat
+                        } else {
+                            ExtendMode::Clamp
+                        };
+                        webrender_api::BorderDetails::Gradient(webrender_api::GradientBorder {
+                            gradient: builder.create_gradient(
+                                gradient.gradient.start_point.to_pointf(),
+                                gradient.gradient.end_point.to_pointf(),
+                                gradient.gradient.stops.clone(),
+                                extend_mode,
+                            ),
+                            outset: gradient.outset,
+                        })
+                    },
+                    BorderDetails::RadialGradient(ref gradient) => {
+                        let extend_mode = if gradient.gradient.repeating {
+                            ExtendMode::Repeat
+                        } else {
+                            ExtendMode::Clamp
+                        };
+                        webrender_api::BorderDetails::RadialGradient(
+                            webrender_api::RadialGradientBorder {
+                                gradient: builder.create_radial_gradient(
+                                    gradient.gradient.center.to_pointf(),
+                                    gradient.gradient.radius.to_sizef(),
+                                    gradient.gradient.stops.clone(),
+                                    extend_mode,
+                                ),
+                                outset: gradient.outset,
+                            },
+                        )
+                    },
+                };
+
+                builder.push_border(&self.prim_info(), widths, details);
+            },
+            DisplayItem::Gradient(ref item) => {
+                let start_point = item.gradient.start_point.to_pointf();
+                let end_point = item.gradient.end_point.to_pointf();
+                let extend_mode = if item.gradient.repeating {
+                    ExtendMode::Repeat
+                } else {
+                    ExtendMode::Clamp
+                };
+                let gradient = builder.create_gradient(
+                    start_point,
+                    end_point,
+                    item.gradient.stops.clone(),
+                    extend_mode,
+                );
+                builder.push_gradient(
+                    &self.prim_info(),
+                    gradient,
+                    item.tile.to_sizef(),
+                    item.tile_spacing.to_sizef(),
+                );
+            },
+            DisplayItem::RadialGradient(ref item) => {
+                let center = item.gradient.center.to_pointf();
+                let radius = item.gradient.radius.to_sizef();
+                let extend_mode = if item.gradient.repeating {
+                    ExtendMode::Repeat
+                } else {
+                    ExtendMode::Clamp
+                };
+                let gradient = builder.create_radial_gradient(
+                    center,
+                    radius,
+                    item.gradient.stops.clone(),
+                    extend_mode,
+                );
+                builder.push_radial_gradient(
+                    &self.prim_info(),
+                    gradient,
+                    item.tile.to_sizef(),
+                    item.tile_spacing.to_sizef(),
+                );
+            },
+            DisplayItem::Line(ref item) => {
+                builder.push_line(
+                    &self.prim_info(),
+                    // TODO(gw): Use a better estimate for wavy line thickness.
+                    (0.33 * item.base.bounds.size.height.to_f32_px()).ceil(),
+                    webrender_api::LineOrientation::Horizontal,
+                    &item.color,
+                    item.style,
+                );
+            },
+            DisplayItem::BoxShadow(ref item) => {
+                let box_bounds = item.box_bounds.to_rectf();
+                builder.push_box_shadow(
+                    &self.prim_info(),
+                    box_bounds,
+                    item.offset.to_vectorf(),
+                    item.color,
+                    item.blur_radius.to_f32_px(),
+                    item.spread_radius.to_f32_px(),
+                    item.border_radius.to_border_radius(),
+                    item.clip_mode.to_clip_mode(),
+                );
+            },
+            DisplayItem::PushTextShadow(ref item) => {
+                builder.push_shadow(
+                    &self.prim_info(),
+                    webrender_api::Shadow {
+                        blur_radius: item.blur_radius.to_f32_px(),
+                        offset: item.offset.to_vectorf(),
+                        color: item.color,
+                    },
+                );
+            },
+            DisplayItem::PopAllTextShadows(_) => {
+                builder.pop_all_shadows();
+            },
+            DisplayItem::Iframe(ref item) => {
+                builder.push_iframe(&self.prim_info(), item.iframe.to_webrender());
+            },
+            DisplayItem::PushStackingContext(ref item) => {
+                let stacking_context = &item.stacking_context;
+                debug_assert!(stacking_context.context_type == StackingContextType::Real);
+
+                let transform = stacking_context
+                    .transform
+                    .map(|transform| LayoutTransform::from_untyped(&transform).into());
+                let perspective = stacking_context
+                    .perspective
+                    .map(|perspective| LayoutTransform::from_untyped(&perspective));
+
+                builder.push_stacking_context(
+                    &webrender_api::LayoutPrimitiveInfo::new(stacking_context.bounds.to_rectf()),
+                    stacking_context.scroll_policy,
+                    transform,
+                    stacking_context.transform_style,
+                    perspective,
+                    stacking_context.mix_blend_mode,
+                    stacking_context.filters.to_filter_ops(),
+                );
+            },
+            DisplayItem::PopStackingContext(_) => builder.pop_stacking_context(),
+            DisplayItem::DefineClipScrollNode(ref item) => {
+                let node = &clip_scroll_nodes[item.node_index.0];
+                let parent_id = get_id(clip_ids, node.parent_index);
+                let item_rect = node.clip.main.to_rectf();
+
+                let webrender_id = match node.node_type {
+                    ClipScrollNodeType::Clip => builder.define_clip_with_parent(
+                        node.id,
+                        parent_id,
+                        item_rect,
+                        node.clip.get_complex_clips(),
+                        None,
+                    ),
+                    ClipScrollNodeType::ScrollFrame(scroll_sensitivity) => builder
+                        .define_scroll_frame_with_parent(
+                            node.id,
+                            parent_id,
+                            node.content_rect.to_rectf(),
+                            node.clip.main.to_rectf(),
+                            node.clip.get_complex_clips(),
+                            None,
+                            scroll_sensitivity,
+                        ),
+                    ClipScrollNodeType::StickyFrame(ref sticky_data) => {
+                        // TODO: Add define_sticky_frame_with_parent to WebRender.
+                        builder.push_clip_id(parent_id);
+                        let id = builder.define_sticky_frame(
+                            node.id,
+                            item_rect,
+                            sticky_data.margins,
+                            sticky_data.vertical_offset_bounds,
+                            sticky_data.horizontal_offset_bounds,
+                            webrender_api::LayoutVector2D::zero(),
+                        );
+                        builder.pop_clip_id();
+                        id
+                    },
+                };
+
+                debug_assert!(node.id.is_none() || node.id == Some(webrender_id));
+                clip_ids[item.node_index.0] = Some(webrender_id);
+            },
+        }
+    }
+}
+
+trait ToWebRenderClip {
+    fn get_complex_clips(&self) -> Vec<ComplexClipRegion>;
+}
+
+impl ToWebRenderClip for ClippingRegion {
+    fn get_complex_clips(&self) -> Vec<ComplexClipRegion> {
+        self.complex
+            .iter()
+            .map(|complex_clipping_region| {
+                ComplexClipRegion::new(
+                    complex_clipping_region.rect.to_rectf(),
+                    complex_clipping_region.radii.to_border_radius(),
+                    ClipMode::Clip,
+                )
+            })
+            .collect()
+    }
+}