Auto merge of #26414 - servo:canvas-background2, r=mrobinson

Correctly paint the CSS canvas’ background

https://drafts.csswg.org/css-backgrounds/#special-backgrounds

Fixes https://github.com/servo/servo/issues/25559
Closes https://github.com/servo/servo/pull/26121, as it is an alternative.
Fixes https://github.com/servo/servo/issues/26444.

components/layout_2020/display_list/background.rs

@@ -6,6 +6,7 @@ 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::properties::ComputedValues;
 use style::values::computed::background::BackgroundSize as Size;
 use style::values::computed::{Length, LengthPercentage};
 use style::values::specified::background::BackgroundRepeat as RepeatXY;
@@ -20,6 +21,7 @@ pub(super) struct BackgroundLayer {
     pub repeat: bool,
 }
 
+#[derive(Debug)]
 struct Layout1DResult {
     repeat: bool,
     bounds_origin: f32,
@@ -31,17 +33,34 @@ fn get_cyclic<T>(values: &[T], layer_index: usize) -> &T {
     &values[layer_index % values.len()]
 }
 
+pub(super) enum Source<'a> {
+    Fragment,
+    Canvas {
+        style: &'a ComputedValues,
+
+        // Theoretically the painting area is the infinite 2D plane,
+        // but WebRender doesn’t really do infinite so this is the part of it that can be visible.
+        painting_area: units::LayoutRect,
+    },
+}
+
 pub(super) fn painting_area<'a>(
     fragment_builder: &'a super::BuilderForBoxFragment,
+    source: &'a Source,
     builder: &mut super::DisplayListBuilder,
     layer_index: usize,
 ) -> (&'a units::LayoutRect, wr::CommonItemProperties) {
-    let fb = fragment_builder;
+    let (painting_area, clip) = match source {
-    let b = fb.fragment.style.get_background();
+        Source::Canvas { painting_area, .. } => (painting_area, None),
-    let (painting_area, clip) = match get_cyclic(&b.background_clip.0, layer_index) {
+        Source::Fragment => {
-        Clip::ContentBox => (fb.content_rect(), fb.content_edge_clip(builder)),
+            let fb = fragment_builder;
-        Clip::PaddingBox => (fb.padding_rect(), fb.padding_edge_clip(builder)),
+            let b = fb.fragment.style.get_background();
-        Clip::BorderBox => (&fb.border_rect, fb.border_edge_clip(builder)),
+            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);
@@ -53,12 +72,17 @@ pub(super) fn painting_area<'a>(
 
 pub(super) fn layout_layer(
     fragment_builder: &mut super::BuilderForBoxFragment,
+    source: &Source,
     builder: &mut super::DisplayListBuilder,
     layer_index: usize,
     intrinsic: IntrinsicSizes,
 ) -> Option<BackgroundLayer> {
-    let b = fragment_builder.fragment.style.get_background();
+    let style = match *source {
-    let (painting_area, common) = painting_area(fragment_builder, builder, layer_index);
+        Source::Canvas { style, .. } => style,
+        Source::Fragment => &fragment_builder.fragment.style,
+    };
+    let b = style.get_background();
+    let (painting_area, common) = painting_area(fragment_builder, source, builder, layer_index);
 
     let positioning_area = match get_cyclic(&b.background_origin.0, layer_index) {
         Origin::ContentBox => fragment_builder.content_rect(),
@@ -227,7 +251,8 @@ fn layout_1d(
             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;
+            let bounds_end = painting_area_origin + painting_area_size;
+            let bounds_size = bounds_end - bounds_origin;
             Layout1DResult {
                 repeat: true,
                 bounds_origin,

components/layout_2020/display_list/mod.rs

@@ -41,6 +41,7 @@ pub struct DisplayListBuilder<'a> {
     /// The current SpatialId and ClipId information for this `DisplayListBuilder`.
     current_space_and_clip: wr::SpaceAndClipInfo,
 
+    element_for_canvas_background: OpaqueNode,
     pub context: &'a LayoutContext<'a>,
     pub wr: wr::DisplayListBuilder,
 
@@ -55,13 +56,14 @@ impl<'a> DisplayListBuilder<'a> {
     pub fn new(
         pipeline_id: wr::PipelineId,
         context: &'a LayoutContext,
-        viewport_size: wr::units::LayoutSize,
+        fragment_tree: &crate::FragmentTree,
     ) -> Self {
         Self {
             current_space_and_clip: wr::SpaceAndClipInfo::root_scroll(pipeline_id),
+            element_for_canvas_background: fragment_tree.canvas_background.from_element,
             is_contentful: false,
             context,
-            wr: wr::DisplayListBuilder::new(pipeline_id, viewport_size),
+            wr: wr::DisplayListBuilder::new(pipeline_id, fragment_tree.scrollable_overflow()),
         }
     }
 
@@ -333,19 +335,40 @@ impl<'a> BuilderForBoxFragment<'a> {
     }
 
     fn build_background(&mut self, builder: &mut DisplayListBuilder) {
-        use style::values::computed::image::Image;
+        if self.fragment.tag == builder.element_for_canvas_background {
-        let b = self.fragment.style.get_background();
+            // This background is already painted for the canvas, don’t paint it again here.
-        let background_color = self.fragment.style.resolve_color(b.background_color);
+            return;
+        }
+
+        let source = background::Source::Fragment;
+        let style = &self.fragment.style;
+        let b = style.get_background();
+        let background_color = style.resolve_color(b.background_color);
         if background_color.alpha > 0 {
             // 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 (bounds, common) = background::painting_area(self, builder, layer_index);
+            let (bounds, common) = background::painting_area(self, &source, builder, layer_index);
             builder
                 .wr
                 .push_rect(&common, *bounds, rgba(background_color))
         }
+
+        self.build_background_image(builder, source);
+    }
+
+    fn build_background_image(
+        &mut self,
+        builder: &mut DisplayListBuilder,
+        source: background::Source<'a>,
+    ) {
+        use style::values::computed::image::Image;
+        let style = match source {
+            background::Source::Canvas { style, .. } => style,
+            background::Source::Fragment => &self.fragment.style,
+        };
+        let b = style.get_background();
         // Reverse because the property is top layer first, we want to paint bottom layer first.
         for (index, image) in b.background_image.0.iter().enumerate().rev() {
             match image {
@@ -356,9 +379,10 @@ impl<'a> BuilderForBoxFragment<'a> {
                         height: None,
                         ratio: None,
                     };
-                    if let Some(layer) = &background::layout_layer(self, builder, index, intrinsic)
+                    if let Some(layer) =
+                        &background::layout_layer(self, &source, builder, index, intrinsic)
                     {
-                        gradient::build(&self.fragment.style, &gradient, layer, builder)
+                        gradient::build(&style, &gradient, layer, builder)
                     }
                 },
                 Image::Url(ref image_url) => {
@@ -393,9 +417,10 @@ impl<'a> BuilderForBoxFragment<'a> {
                         ratio: Some(width as f32 / height as f32),
                     };
 
-                    if let Some(layer) = background::layout_layer(self, builder, index, intrinsic) {
+                    if let Some(layer) =
-                        let image_rendering =
+                        background::layout_layer(self, &source, builder, index, intrinsic)
-                            image_rendering(self.fragment.style.clone_image_rendering());
+                    {
+                        let image_rendering = image_rendering(style.clone_image_rendering());
                         if layer.repeat {
                             builder.wr.push_repeating_image(
                                 &layer.common,

components/layout_2020/display_list/stacking_context.rs

@@ -94,7 +94,7 @@ impl<'a> StackingContextBuilder<'a> {
     }
 }
 
-#[derive(Clone, Copy, Eq, Ord, PartialEq, PartialOrd)]
+#[derive(Clone, Copy, Debug, Eq, Ord, PartialEq, PartialOrd)]
 pub(crate) enum StackingContextSection {
     BackgroundsAndBorders,
     BlockBackgroundsAndBorders,
@@ -253,7 +253,124 @@ impl StackingContext {
         true
     }
 
-    pub(crate) fn build_display_list<'a>(&self, builder: &'a mut DisplayListBuilder) {
+    /// https://drafts.csswg.org/css-backgrounds/#special-backgrounds
+    ///
+    /// This is only called for the root `StackingContext`
+    pub(crate) fn build_canvas_background_display_list(
+        &self,
+        builder: &mut DisplayListBuilder,
+        fragment_tree: &crate::FragmentTree,
+        containing_block_rect: &PhysicalRect<Length>,
+    ) {
+        let style = if let Some(style) = &fragment_tree.canvas_background.style {
+            style
+        } else {
+            // The root element has `display: none`,
+            // or the canvas background is taken from `<body>` which has `display: none`
+            return;
+        };
+
+        // The painting area is theoretically the infinite 2D plane,
+        // but we need a rectangle with finite coordinates.
+        //
+        // If the document is smaller than the viewport (and doesn’t scroll),
+        // we still want to paint the rest of the viewport.
+        // If it’s larger, we also want to paint areas reachable after scrolling.
+        let mut painting_area = fragment_tree
+            .initial_containing_block
+            .union(&fragment_tree.scrollable_overflow)
+            .to_webrender();
+
+        let background_color = style.resolve_color(style.get_background().background_color);
+        if background_color.alpha > 0 {
+            let common = builder.common_properties(painting_area);
+            let color = super::rgba(background_color);
+            builder.wr.push_rect(&common, painting_area, color)
+        }
+
+        // `background-color` was comparatively easy,
+        // but `background-image` needs a positioning area based on the root element.
+        // Let’s find the corresponding fragment.
+
+        // The fragment generated by the root element is the first one here, unless…
+        let first_if_any = self.fragments.first().or_else(|| {
+            // There wasn’t any `StackingContextFragment` in the root `StackingContext`,
+            // because the root element generates a stacking context. Let’s find that one.
+            self.stacking_contexts
+                .first()
+                .and_then(|first_child_stacking_context| {
+                    first_child_stacking_context.fragments.first()
+                })
+        });
+
+        macro_rules! debug_panic {
+            ($msg: expr) => {
+                if cfg!(debug_assertions) {
+                    panic!($msg)
+                }
+            };
+        }
+
+        let first_stacking_context_fragment = if let Some(first) = first_if_any {
+            first
+        } else {
+            // This should only happen if the root element has `display: none`
+            debug_panic!("`CanvasBackground::for_root_element` should have returned `style: None`");
+            return;
+        };
+
+        let fragment = first_stacking_context_fragment.fragment.borrow();
+        let box_fragment = if let Fragment::Box(box_fragment) = &*fragment {
+            box_fragment
+        } else {
+            debug_panic!("Expected a box-generated fragment");
+            return;
+        };
+
+        // The `StackingContextFragment` we found is for the root DOM element:
+        debug_assert_eq!(
+            box_fragment.tag,
+            fragment_tree.canvas_background.root_element
+        );
+
+        // The root element may have a CSS transform,
+        // and we want the canvas’ background image to be transformed.
+        // To do so, take its `SpatialId` (but not its `ClipId`)
+        builder.current_space_and_clip.spatial_id =
+            first_stacking_context_fragment.space_and_clip.spatial_id;
+
+        // Now we need express the painting area rectangle in the local coordinate system,
+        // which differs from the top-level coordinate system based on…
+
+        // Convert the painting area rectangle to the local coordinate system of this `SpatialId`
+        if let Some(reference_frame_data) =
+            box_fragment.reference_frame_data_if_necessary(containing_block_rect)
+        {
+            painting_area.origin -= reference_frame_data.origin.to_webrender().to_vector();
+            if let Some(transformed) = reference_frame_data
+                .transform
+                .inverse()
+                .and_then(|inversed| inversed.transform_rect(&painting_area))
+            {
+                painting_area = transformed
+            } else {
+                // The desired rect cannot be represented, so skip painting this background-image
+                return;
+            }
+        }
+
+        let mut fragment_builder = super::BuilderForBoxFragment::new(
+            box_fragment,
+            &first_stacking_context_fragment.containing_block,
+        );
+        let source = super::background::Source::Canvas {
+            style,
+            painting_area,
+        };
+        fragment_builder.build_background_image(builder, source);
+    }
+
+    pub(crate) fn build_display_list(&self, builder: &mut DisplayListBuilder) {
         let pushed_context = self.push_webrender_stacking_context_if_necessary(builder);
 
         // Properly order display items that make up a stacking context. "Steps" here
@@ -364,6 +481,12 @@ impl Fragment {
     }
 }
 
+struct ReferenceFrameData {
+    origin: crate::geom::PhysicalPoint<Length>,
+    transform: LayoutTransform,
+    kind: wr::ReferenceFrameKind,
+}
+
 impl BoxFragment {
     fn get_stacking_context_type(&self) -> Option<StackingContextType> {
         if self.style.establishes_stacking_context() {
@@ -464,22 +587,25 @@ impl BoxFragment {
     ) {
         // If we are creating a stacking context, we may also need to create a reference
         // frame first.
-        let relative_border_rect = self
+        let reference_frame_data =
-            .border_rect()
+            self.reference_frame_data_if_necessary(&containing_block_info.rect);
-            .to_physical(self.style.writing_mode, &containing_block_info.rect);
-        let border_rect =
-            relative_border_rect.translate(containing_block_info.rect.origin.to_vector());
-        let established_reference_frame =
-            self.build_reference_frame_if_necessary(builder, &border_rect);
 
         // WebRender reference frames establish a new coordinate system at their origin
         // (the border box of the fragment). We need to ensure that any coordinates we
         // give to WebRender in this reference frame are relative to the fragment border
         // box. We do this by adjusting the containing block origin.
         let mut new_containing_block_info = containing_block_info.clone();
-        if established_reference_frame {
+
-            new_containing_block_info.rect.origin =
+        if let Some(reference_frame_data) = &reference_frame_data {
-                (-relative_border_rect.origin.to_vector()).to_point();
+            new_containing_block_info.rect.origin -= reference_frame_data.origin.to_vector();
+            builder.current_space_and_clip.spatial_id = builder.wr.push_reference_frame(
+                reference_frame_data.origin.to_webrender(),
+                builder.current_space_and_clip.spatial_id,
+                self.style.get_box().transform_style.to_webrender(),
+                wr::PropertyBinding::Value(reference_frame_data.transform),
+                reference_frame_data.kind,
+            );
+            builder.nearest_reference_frame = builder.current_space_and_clip.spatial_id;
         }
 
         let mut child_stacking_context = StackingContext::new(
@@ -510,7 +636,7 @@ impl BoxFragment {
             .stacking_contexts
             .append(&mut stolen_children);
 
-        if established_reference_frame {
+        if reference_frame_data.is_some() {
             builder.wr.pop_reference_frame();
         }
     }
@@ -611,17 +737,21 @@ impl BoxFragment {
         }
     }
 
-    /// Build a reference frame for this fragment if it is necessary. Returns `true` if
+    /// Optionally returns the data for building a reference frame, without yet building it.
-    /// a reference was built and `false` otherwise.
+    fn reference_frame_data_if_necessary(
-    fn build_reference_frame_if_necessary(
         &self,
-        builder: &mut StackingContextBuilder,
+        containing_block_rect: &PhysicalRect<Length>,
-        border_rect: &PhysicalRect<Length>,
+    ) -> Option<ReferenceFrameData> {
-    ) -> bool {
         if !self.style.has_transform_or_perspective() {
-            return false;
+            return None;
         }
+
+        let relative_border_rect = self
+            .border_rect()
+            .to_physical(self.style.writing_mode, &containing_block_rect);
+        let border_rect = relative_border_rect.translate(containing_block_rect.origin.to_vector());
         let untyped_border_rect = border_rect.to_untyped();
+
         let transform = self.calculate_transform_matrix(&untyped_border_rect);
         let perspective = self.calculate_perspective_matrix(&untyped_border_rect);
         let (reference_frame_transform, reference_frame_kind) = match (transform, perspective) {
@@ -641,15 +771,11 @@ impl BoxFragment {
             (None, None) => unreachable!(),
         };
 
-        builder.current_space_and_clip.spatial_id = builder.wr.push_reference_frame(
+        Some(ReferenceFrameData {
-            border_rect.origin.to_webrender(),
+            origin: border_rect.origin,
-            builder.current_space_and_clip.spatial_id,
+            transform: reference_frame_transform,
-            self.style.get_box().transform_style.to_webrender(),
+            kind: reference_frame_kind,
-            wr::PropertyBinding::Value(reference_frame_transform),
+        })
-            reference_frame_kind,
-        );
-        builder.nearest_reference_frame = builder.current_space_and_clip.spatial_id;
-        true
     }
 
     /// Returns the 4D matrix representing this fragment's transform.

components/layout_2020/dom_traversal.rs

@@ -87,14 +87,12 @@ fn traverse_children_of<'dom, Node>(
 {
     traverse_pseudo_element(WhichPseudoElement::Before, parent_element, context, handler);
 
-    let mut next = parent_element.first_child();
+    for child in iter_child_nodes(parent_element) {
-    while let Some(child) = next {
         if let Some(contents) = child.as_text() {
             handler.handle_text(child, contents, &child.style(context));
         } else if child.is_element() {
             traverse_element(child, context, handler);
         }
-        next = child.next_sibling();
     }
 
     traverse_pseudo_element(WhichPseudoElement::After, parent_element, context, handler);
@@ -110,25 +108,21 @@ fn traverse_element<'dom, Node>(
     let replaced = ReplacedContent::for_element(element);
     let style = element.style(context);
     match Display::from(style.get_box().display) {
-        Display::None => element.unset_boxes_in_subtree(),
+        Display::None => element.unset_all_boxes(),
         Display::Contents => {
             if replaced.is_some() {
                 // `display: content` on a replaced element computes to `display: none`
                 // <https://drafts.csswg.org/css-display-3/#valdef-display-contents>
-                element.unset_boxes_in_subtree()
+                element.unset_all_boxes()
             } else {
-                *element.layout_data_mut().self_box.borrow_mut() = Some(LayoutBox::DisplayContents);
+                element.element_box_slot().set(LayoutBox::DisplayContents);
                 traverse_children_of(element, context, handler)
             }
         },
         Display::GeneratingBox(display) => {
-            handler.handle_element(
+            let contents = replaced.map_or(Contents::OfElement, Contents::Replaced);
-                element,
+            let box_slot = element.element_box_slot();
-                &style,
+            handler.handle_element(element, &style, display, contents, box_slot);
-                display,
-                replaced.map_or(Contents::OfElement, Contents::Replaced),
-                element.element_box_slot(),
-            );
         },
     }
 }
@@ -145,17 +139,20 @@ fn traverse_pseudo_element<'dom, Node>(
         match Display::from(style.get_box().display) {
             Display::None => element.unset_pseudo_element_box(which),
             Display::Contents => {
-                element.unset_pseudo_element_box(which);
                 let items = generate_pseudo_element_content(&style, element, context);
+                let box_slot = element.pseudo_element_box_slot(which);
+                box_slot.set(LayoutBox::DisplayContents);
                 traverse_pseudo_element_contents(element, &style, context, handler, items);
             },
             Display::GeneratingBox(display) => {
                 let items = generate_pseudo_element_content(&style, element, context);
-                let contents = Contents::OfPseudoElement(items);
                 let box_slot = element.pseudo_element_box_slot(which);
+                let contents = Contents::OfPseudoElement(items);
                 handler.handle_element(element, &style, display, contents, box_slot);
             },
         }
+    } else {
+        element.unset_pseudo_element_box(which)
     }
 }
 
@@ -373,7 +370,9 @@ pub(crate) trait NodeExt<'dom>: 'dom + Copy + LayoutNode<'dom> + Send + Sync {
     fn element_box_slot(&self) -> BoxSlot<'dom>;
     fn pseudo_element_box_slot(&self, which: WhichPseudoElement) -> BoxSlot<'dom>;
     fn unset_pseudo_element_box(self, which: WhichPseudoElement);
-    fn unset_boxes_in_subtree(self);
+
+    /// Remove boxes for the element itself, and its `:before` and `:after` if any.
+    fn unset_all_boxes(self);
 }
 
 impl<'dom, T> NodeExt<'dom> for T
@@ -458,65 +457,42 @@ where
     }
 
     fn pseudo_element_box_slot(&self, which: WhichPseudoElement) -> BoxSlot<'dom> {
-        let mut data = self.layout_data_mut();
+        let data = self.layout_data_mut();
-        let pseudos = data.pseudo_elements.get_or_insert_with(Default::default);
         let cell = match which {
-            WhichPseudoElement::Before => &mut pseudos.before,
+            WhichPseudoElement::Before => &data.pseudo_before_box,
-            WhichPseudoElement::After => &mut pseudos.after,
+            WhichPseudoElement::After => &data.pseudo_after_box,
         };
         BoxSlot::new(cell.clone())
     }
 
     fn unset_pseudo_element_box(self, which: WhichPseudoElement) {
-        if let Some(pseudos) = &mut self.layout_data_mut().pseudo_elements {
+        let data = self.layout_data_mut();
-            match which {
+        let cell = match which {
-                WhichPseudoElement::Before => *pseudos.before.borrow_mut() = None,
+            WhichPseudoElement::Before => &data.pseudo_before_box,
-                WhichPseudoElement::After => *pseudos.after.borrow_mut() = None,
+            WhichPseudoElement::After => &data.pseudo_after_box,
-            }
+        };
-        }
+        *cell.borrow_mut() = None;
     }
 
-    fn unset_boxes_in_subtree(self) {
+    fn unset_all_boxes(self) {
-        assert!(self.is_element());
+        let mut data = self.layout_data_mut();
-        assert!(self.parent_node().is_some());
+        *data.self_box.borrow_mut() = None;
-
+        *data.pseudo_before_box.borrow_mut() = None;
-        let mut node = self;
+        *data.pseudo_after_box.borrow_mut() = None;
-        loop {
+        // Stylo already takes care of removing all layout data
-            if node.is_element() {
+        // for DOM descendants of elements with `display: none`.
-                let traverse_children = {
-                    let mut layout_data = node.layout_data_mut();
-                    layout_data.pseudo_elements = None;
-                    let self_box = layout_data.self_box.borrow_mut().take();
-                    self_box.is_some()
-                };
-                if traverse_children {
-                    // Only descend into children if we removed a box.
-                    // If there wasn’t one, then descendants don’t have boxes either.
-                    if let Some(child) = node.first_child() {
-                        node = child;
-                        continue;
-                    }
-                } else if node == self {
-                    // If this is the root of the subtree and we aren't descending
-                    // into our children return now.
-                    return;
-                }
-            }
-
-            let mut next_is_a_sibling_of = node;
-            node = loop {
-                if let Some(sibling) = next_is_a_sibling_of.next_sibling() {
-                    break sibling;
-                } else {
-                    next_is_a_sibling_of = node
-                        .parent_node()
-                        .expect("reached the root while traversing only a subtree");
-                }
-            };
-            if next_is_a_sibling_of == self {
-                // Don’t go outside the subtree.
-                return;
-            }
-        }
     }
 }
+
+pub(crate) fn iter_child_nodes<'dom, Node>(parent: Node) -> impl Iterator<Item = Node>
+where
+    Node: NodeExt<'dom>,
+{
+    let mut next = parent.first_child();
+    std::iter::from_fn(move || {
+        next.map(|child| {
+            next = child.next_sibling();
+            child
+        })
+    })
+}

components/layout_2020/element_data.rs

@@ -9,13 +9,8 @@ use crate::flow::BlockLevelBox;
 #[derive(Default)]
 pub struct LayoutDataForElement {
     pub(super) self_box: ArcRefCell<Option<LayoutBox>>,
-    pub(super) pseudo_elements: Option<Box<PseudoElementBoxes>>,
+    pub(super) pseudo_before_box: ArcRefCell<Option<LayoutBox>>,
-}
+    pub(super) pseudo_after_box: ArcRefCell<Option<LayoutBox>>,
-
-#[derive(Default)]
-pub(super) struct PseudoElementBoxes {
-    pub before: ArcRefCell<Option<LayoutBox>>,
-    pub after: ArcRefCell<Option<LayoutBox>>,
 }
 
 pub(super) enum LayoutBox {

components/layout_2020/flow/mod.rs

@@ -29,7 +29,7 @@ mod float;
 pub mod inline;
 mod root;
 
-pub use root::{BoxTreeRoot, FragmentTreeRoot};
+pub use root::{BoxTree, FragmentTree};
 
 #[derive(Debug, Serialize)]
 pub(crate) struct BlockFormattingContext {

components/layout_2020/flow/root.rs

@@ -8,7 +8,8 @@ use crate::display_list::stacking_context::{
     ContainingBlock, ContainingBlockInfo, StackingContext, StackingContextBuildMode,
     StackingContextBuilder,
 };
-use crate::dom_traversal::{Contents, NodeExt};
+use crate::dom_traversal::{iter_child_nodes, Contents, NodeExt};
+use crate::element_data::LayoutBox;
 use crate::flow::construct::ContainsFloats;
 use crate::flow::float::FloatBox;
 use crate::flow::{BlockContainer, BlockFormattingContext, BlockLevelBox};
@@ -20,12 +21,14 @@ use crate::positioned::AbsolutelyPositionedBox;
 use crate::positioned::PositioningContext;
 use crate::replaced::ReplacedContent;
 use crate::sizing::ContentSizesRequest;
-use crate::style_ext::{Display, DisplayGeneratingBox, DisplayInside};
+use crate::style_ext::ComputedValuesExt;
+use crate::style_ext::{Display, DisplayGeneratingBox};
 use crate::DefiniteContainingBlock;
 use app_units::Au;
 use euclid::default::{Point2D, Rect, Size2D};
 use gfx_traits::print_tree::PrintTree;
 use script_layout_interface::wrapper_traits::LayoutNode;
+use script_layout_interface::{LayoutElementType, LayoutNodeType};
 use servo_arc::Arc;
 use style::dom::OpaqueNode;
 use style::properties::ComputedValues;
@@ -33,30 +36,56 @@ use style::values::computed::Length;
 use style_traits::CSSPixel;
 
 #[derive(Serialize)]
-pub struct BoxTreeRoot(BlockFormattingContext);
+pub struct BoxTree {
+    /// Contains typically exactly one block-level box, which was generated by the root element.
+    /// There may be zero if that element has `display: none`.
+    root: BlockFormattingContext,
 
-#[derive(Serialize)]
+    /// https://drafts.csswg.org/css-backgrounds/#special-backgrounds
-pub struct FragmentTreeRoot {
+    canvas_background: CanvasBackground,
-    /// The children of the root of the fragment tree.
-    children: Vec<ArcRefCell<Fragment>>,
-
-    /// The scrollable overflow of the root of the fragment tree.
-    scrollable_overflow: PhysicalRect<Length>,
-
-    /// The containing block used in the layout of this fragment tree.
-    initial_containing_block: PhysicalRect<Length>,
 }
 
-impl BoxTreeRoot {
+#[derive(Serialize)]
+pub struct FragmentTree {
+    /// Fragments at the top-level of the tree.
+    ///
+    /// If the root element has `display: none`, there are zero fragments.
+    /// Otherwise, there is at least one:
+    ///
+    /// * The first fragment is generated by the root element.
+    /// * There may be additional fragments generated by positioned boxes
+    ///   that have the initial containing block.
+    root_fragments: Vec<ArcRefCell<Fragment>>,
+
+    /// The scrollable overflow rectangle for the entire tree
+    /// https://drafts.csswg.org/css-overflow/#scrollable
+    pub(crate) scrollable_overflow: PhysicalRect<Length>,
+
+    /// The containing block used in the layout of this fragment tree.
+    pub(crate) initial_containing_block: PhysicalRect<Length>,
+
+    /// https://drafts.csswg.org/css-backgrounds/#special-backgrounds
+    #[serde(skip)]
+    pub(crate) canvas_background: CanvasBackground,
+}
+
+impl BoxTree {
     pub fn construct<'dom, Node>(context: &LayoutContext, root_element: Node) -> Self
     where
         Node: 'dom + Copy + LayoutNode<'dom> + Send + Sync,
     {
         let (contains_floats, boxes) = construct_for_root_element(&context, root_element);
-        Self(BlockFormattingContext {
+
-            contains_floats: contains_floats == ContainsFloats::Yes,
+        // Zero box for `:root { display: none }`, one for the root element otherwise.
-            contents: BlockContainer::BlockLevelBoxes(boxes),
+        assert!(boxes.len() <= 1);
-        })
+
+        Self {
+            root: BlockFormattingContext {
+                contains_floats: contains_floats == ContainsFloats::Yes,
+                contents: BlockContainer::BlockLevelBoxes(boxes),
+            },
+            canvas_background: CanvasBackground::for_root_element(context, root_element),
+        }
     }
 }
 
@@ -65,69 +94,77 @@ fn construct_for_root_element<'dom>(
     root_element: impl NodeExt<'dom>,
 ) -> (ContainsFloats, Vec<ArcRefCell<BlockLevelBox>>) {
     let style = root_element.style(context);
-    let replaced = ReplacedContent::for_element(root_element);
     let box_style = style.get_box();
 
     let display_inside = match Display::from(box_style.display) {
-        Display::None => return (ContainsFloats::No, Vec::new()),
+        Display::None => {
-        Display::Contents if replaced.is_some() => {
+            root_element.unset_all_boxes();
-            // 'display: contents' computes to 'none' for replaced elements
             return (ContainsFloats::No, Vec::new());
         },
-        // https://drafts.csswg.org/css-display-3/#transformations
+        Display::Contents => {
-        Display::Contents => DisplayInside::Flow,
+            // Unreachable because the style crate adjusts the computed values:
+            // https://drafts.csswg.org/css-display-3/#transformations
+            // “'display' of 'contents' computes to 'block' on the root element”
+            unreachable!()
+        },
         // The root element is blockified, ignore DisplayOutside
         Display::GeneratingBox(DisplayGeneratingBox::OutsideInside { inside, .. }) => inside,
     };
 
-    let contents = replaced.map_or(Contents::OfElement, Contents::Replaced);
+    let contents =
-    if box_style.position.is_absolutely_positioned() {
+        ReplacedContent::for_element(root_element).map_or(Contents::OfElement, Contents::Replaced);
+    let (contains_floats, root_box) = if box_style.position.is_absolutely_positioned() {
         (
             ContainsFloats::No,
-            vec![ArcRefCell::new(
+            BlockLevelBox::OutOfFlowAbsolutelyPositionedBox(Arc::new(
-                BlockLevelBox::OutOfFlowAbsolutelyPositionedBox(Arc::new(
+                AbsolutelyPositionedBox::construct(
-                    AbsolutelyPositionedBox::construct(
-                        context,
-                        root_element,
-                        style,
-                        display_inside,
-                        contents,
-                    ),
-                )),
-            )],
-        )
-    } else if box_style.float.is_floating() {
-        (
-            ContainsFloats::Yes,
-            vec![ArcRefCell::new(BlockLevelBox::OutOfFlowFloatBox(
-                FloatBox::construct(context, root_element, style, display_inside, contents),
-            ))],
-        )
-    } else {
-        let propagated_text_decoration_line = style.clone_text_decoration_line();
-        (
-            ContainsFloats::No,
-            vec![ArcRefCell::new(BlockLevelBox::Independent(
-                IndependentFormattingContext::construct(
                     context,
                     root_element,
                     style,
                     display_inside,
                     contents,
-                    ContentSizesRequest::None,
-                    propagated_text_decoration_line,
                 ),
-            ))],
+            )),
         )
-    }
+    } else if box_style.float.is_floating() {
+        (
+            ContainsFloats::Yes,
+            BlockLevelBox::OutOfFlowFloatBox(FloatBox::construct(
+                context,
+                root_element,
+                style,
+                display_inside,
+                contents,
+            )),
+        )
+    } else {
+        let propagated_text_decoration_line = style.clone_text_decoration_line();
+        (
+            ContainsFloats::No,
+            BlockLevelBox::Independent(IndependentFormattingContext::construct(
+                context,
+                root_element,
+                style,
+                display_inside,
+                contents,
+                ContentSizesRequest::None,
+                propagated_text_decoration_line,
+            )),
+        )
+    };
+    let root_box = ArcRefCell::new(root_box);
+    root_element
+        .element_box_slot()
+        .set(LayoutBox::BlockLevel(root_box.clone()));
+    (contains_floats, vec![root_box])
 }
 
-impl BoxTreeRoot {
+impl BoxTree {
     pub fn layout(
         &self,
         layout_context: &LayoutContext,
         viewport: euclid::Size2D<f32, CSSPixel>,
-    ) -> FragmentTreeRoot {
+    ) -> FragmentTree {
         let style = ComputedValues::initial_values();
 
         // FIXME: use the document’s mode:
@@ -147,54 +184,64 @@ impl BoxTreeRoot {
         let dummy_tree_rank = 0;
         let mut positioning_context =
             PositioningContext::new_for_containing_block_for_all_descendants();
-        let independent_layout = self.0.layout(
+        let independent_layout = self.root.layout(
             layout_context,
             &mut positioning_context,
             &(&initial_containing_block).into(),
             dummy_tree_rank,
         );
 
-        let mut children = independent_layout
+        let mut root_fragments = independent_layout
             .fragments
             .into_iter()
             .map(|fragment| ArcRefCell::new(fragment))
-            .collect();
+            .collect::<Vec<_>>();
+
+        // Zero box for `:root { display: none }`, one for the root element otherwise.
+        assert!(root_fragments.len() <= 1);
+
+        // There may be more fragments at the top-level
+        // (for positioned boxes whose containing is the initial containing block)
+        // but only if there was one fragment for the root element.
         positioning_context.layout_initial_containing_block_children(
             layout_context,
             &initial_containing_block,
-            &mut children,
+            &mut root_fragments,
         );
 
-        let scrollable_overflow = children.iter().fold(PhysicalRect::zero(), |acc, child| {
+        let scrollable_overflow = root_fragments
-            let child_overflow = child
+            .iter()
-                .borrow()
+            .fold(PhysicalRect::zero(), |acc, child| {
-                .scrollable_overflow(&physical_containing_block);
+                let child_overflow = child
+                    .borrow()
+                    .scrollable_overflow(&physical_containing_block);
 
-            // https://drafts.csswg.org/css-overflow/#scrolling-direction
+                // https://drafts.csswg.org/css-overflow/#scrolling-direction
-            // We want to clip scrollable overflow on box-start and inline-start
+                // We want to clip scrollable overflow on box-start and inline-start
-            // sides of the scroll container.
+                // sides of the scroll container.
-            //
+                //
-            // FIXME(mrobinson, bug 25564): This should take into account writing
+                // FIXME(mrobinson, bug 25564): This should take into account writing
-            // mode.
+                // mode.
-            let child_overflow = PhysicalRect::new(
+                let child_overflow = PhysicalRect::new(
-                euclid::Point2D::zero(),
+                    euclid::Point2D::zero(),
-                euclid::Size2D::new(
+                    euclid::Size2D::new(
-                    child_overflow.size.width + child_overflow.origin.x,
+                        child_overflow.size.width + child_overflow.origin.x,
-                    child_overflow.size.height + child_overflow.origin.y,
+                        child_overflow.size.height + child_overflow.origin.y,
-                ),
+                    ),
-            );
+                );
-            acc.union(&child_overflow)
+                acc.union(&child_overflow)
-        });
+            });
 
-        FragmentTreeRoot {
+        FragmentTree {
-            children,
+            root_fragments,
             scrollable_overflow,
             initial_containing_block: physical_containing_block,
+            canvas_background: self.canvas_background.clone(),
         }
     }
 }
 
-impl FragmentTreeRoot {
+impl FragmentTree {
     pub fn build_display_list(&self, builder: &mut crate::display_list::DisplayListBuilder) {
         let mut stacking_context = StackingContext::create_root(&builder.wr);
         {
@@ -208,7 +255,7 @@ impl FragmentTreeRoot {
                 ),
             };
 
-            for fragment in &self.children {
+            for fragment in &self.root_fragments {
                 fragment.borrow().build_stacking_context_tree(
                     fragment,
                     &mut stacking_context_builder,
@@ -220,12 +267,20 @@ impl FragmentTreeRoot {
         }
 
         stacking_context.sort();
+
+        // Paint the canvas’ background (if any) before/under everything else
+        stacking_context.build_canvas_background_display_list(
+            builder,
+            self,
+            &self.initial_containing_block,
+        );
+
         stacking_context.build_display_list(builder);
     }
 
     pub fn print(&self) {
         let mut print_tree = PrintTree::new("Fragment Tree".to_string());
-        for fragment in &self.children {
+        for fragment in &self.root_fragments {
             fragment.borrow().print(&mut print_tree);
         }
     }
@@ -241,7 +296,7 @@ impl FragmentTreeRoot {
         &self,
         mut process_func: impl FnMut(&Fragment, &PhysicalRect<Length>) -> Option<T>,
     ) -> Option<T> {
-        self.children.iter().find_map(|child| {
+        self.root_fragments.iter().find_map(|child| {
             child
                 .borrow()
                 .find(&self.initial_containing_block, &mut process_func)
@@ -326,3 +381,64 @@ impl FragmentTreeRoot {
         .unwrap_or_else(Rect::zero)
     }
 }
+
+/// https://drafts.csswg.org/css-backgrounds/#root-background
+#[derive(Clone, Serialize)]
+pub(crate) struct CanvasBackground {
+    /// DOM node for the root element
+    pub root_element: OpaqueNode,
+
+    /// The element whose style the canvas takes background properties from (see next field).
+    /// This can be the root element (same as the previous field), or the HTML `<body>` element.
+    /// See https://drafts.csswg.org/css-backgrounds/#body-background
+    pub from_element: OpaqueNode,
+
+    /// The computed styles to take background properties from.
+    #[serde(skip)]
+    pub style: Option<Arc<ComputedValues>>,
+}
+
+impl CanvasBackground {
+    fn for_root_element<'dom>(context: &LayoutContext, root_element: impl NodeExt<'dom>) -> Self {
+        let root_style = root_element.style(context);
+
+        let mut style = root_style;
+        let mut from_element = root_element;
+
+        // https://drafts.csswg.org/css-backgrounds/#body-background
+        // “if the computed value of background-image on the root element is none
+        //  and its background-color is transparent”
+        if style.background_is_transparent() &&
+            // “For documents whose root element is an HTML `HTML` element
+            //  or an XHTML `html` element”
+            root_element.type_id() == LayoutNodeType::Element(LayoutElementType::HTMLHtmlElement) &&
+            // Don’t try to access styles for an unstyled subtree
+            !matches!(style.clone_display().into(), Display::None)
+        {
+            // “that element’s first HTML `BODY` or XHTML `body` child element”
+            if let Some(body) = iter_child_nodes(root_element).find(|child| {
+                child.is_element() &&
+                    child.type_id() ==
+                        LayoutNodeType::Element(LayoutElementType::HTMLBodyElement)
+            }) {
+                style = body.style(context);
+                from_element = body;
+            }
+        }
+
+        Self {
+            root_element: root_element.opaque(),
+            from_element: from_element.opaque(),
+
+            // “However, if no boxes are generated for the element
+            //  whose background would be used for the canvas
+            //  (for example, if the root element has display: none),
+            //  then the canvas background is transparent.”
+            style: if let Display::GeneratingBox(_) = style.clone_display().into() {
+                Some(style)
+            } else {
+                None
+            },
+        }
+    }
+}

components/layout_2020/layout_debug.rs

@@ -5,7 +5,7 @@
 //! Supports writing a trace file created during each layout scope
 //! that can be viewed by an external tool to make layout debugging easier.
 
-use crate::flow::{BoxTreeRoot, FragmentTreeRoot};
+use crate::flow::{BoxTree, FragmentTree};
 use serde_json::{to_string, to_value, Value};
 use std::cell::RefCell;
 use std::fs;
@@ -63,8 +63,8 @@ impl ScopeData {
 }
 
 struct State {
-    fragment_tree: Arc<FragmentTreeRoot>,
+    fragment_tree: Arc<FragmentTree>,
-    box_tree: Arc<BoxTreeRoot>,
+    box_tree: Arc<BoxTree>,
     scope_stack: Vec<Box<ScopeData>>,
 }
 
@@ -109,7 +109,7 @@ pub fn generate_unique_debug_id() -> u16 {
 
 /// Begin a layout debug trace. If this has not been called,
 /// creating debug scopes has no effect.
-pub fn begin_trace(box_tree: Arc<BoxTreeRoot>, fragment_tree: Arc<FragmentTreeRoot>) {
+pub fn begin_trace(box_tree: Arc<BoxTree>, fragment_tree: Arc<FragmentTree>) {
     assert!(STATE_KEY.with(|ref r| r.borrow().is_none()));
 
     STATE_KEY.with(|ref r| {

components/layout_2020/lib.rs

@@ -30,7 +30,7 @@ mod style_ext;
 pub mod traversal;
 pub mod wrapper;
 
-pub use flow::{BoxTreeRoot, FragmentTreeRoot};
+pub use flow::{BoxTree, FragmentTree};
 
 use crate::geom::flow_relative::Vec2;
 use style::properties::ComputedValues;

components/layout_2020/query.rs

@@ -4,7 +4,7 @@
 
 //! Utilities for querying the layout, as needed by the layout thread.
 use crate::context::LayoutContext;
-use crate::flow::FragmentTreeRoot;
+use crate::flow::FragmentTree;
 use crate::fragments::Fragment;
 use app_units::Au;
 use euclid::default::{Point2D, Rect};
@@ -166,14 +166,9 @@ impl LayoutRPC for LayoutRPCImpl {
 
 pub fn process_content_box_request(
     requested_node: OpaqueNode,
-    fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
+    fragment_tree: Option<Arc<FragmentTree>>,
 ) -> Option<Rect<Au>> {
-    let fragment_tree_root = match fragment_tree_root {
+    Some(fragment_tree?.get_content_box_for_node(requested_node))
-        Some(fragment_tree_root) => fragment_tree_root,
-        None => return None,
-    };
-
-    Some(fragment_tree_root.get_content_box_for_node(requested_node))
 }
 
 pub fn process_content_boxes_request(_requested_node: OpaqueNode) -> Vec<Rect<Au>> {
@@ -182,14 +177,13 @@ pub fn process_content_boxes_request(_requested_node: OpaqueNode) -> Vec<Rect<Au
 
 pub fn process_node_geometry_request(
     requested_node: OpaqueNode,
-    fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
+    fragment_tree: Option<Arc<FragmentTree>>,
 ) -> Rect<i32> {
-    let fragment_tree_root = match fragment_tree_root {
+    if let Some(fragment_tree) = fragment_tree {
-        Some(fragment_tree_root) => fragment_tree_root,
+        fragment_tree.get_border_dimensions_for_node(requested_node)
-        None => return Rect::zero(),
+    } else {
-    };
+        Rect::zero()
-
+    }
-    fragment_tree_root.get_border_dimensions_for_node(requested_node)
 }
 
 pub fn process_node_scroll_id_request<'dom>(
@@ -212,7 +206,7 @@ pub fn process_resolved_style_request<'dom>(
     node: impl LayoutNode<'dom>,
     pseudo: &Option<PseudoElement>,
     property: &PropertyId,
-    fragment_tree_root: Option<Arc<FragmentTreeRoot>>,
+    fragment_tree: Option<Arc<FragmentTree>>,
 ) -> String {
     if !node.as_element().unwrap().has_data() {
         return process_resolved_style_request_for_unstyled_node(context, node, pseudo, property);
@@ -286,11 +280,11 @@ pub fn process_resolved_style_request<'dom>(
         return computed_style();
     }
 
-    let fragment_tree_root = match fragment_tree_root {
+    let fragment_tree = match fragment_tree {
-        Some(fragment_tree_root) => fragment_tree_root,
+        Some(fragment_tree) => fragment_tree,
         None => return computed_style(),
     };
-    fragment_tree_root
+    fragment_tree
         .find(|fragment, containing_block| {
             let box_fragment = match fragment {
                 Fragment::Box(ref box_fragment) if box_fragment.tag == node.opaque() => {

components/layout_2020/style_ext.rs

@@ -10,6 +10,7 @@ use style::computed_values::position::T as ComputedPosition;
 use style::computed_values::transform_style::T as ComputedTransformStyle;
 use style::properties::longhands::box_sizing::computed_value::T as BoxSizing;
 use style::properties::ComputedValues;
+use style::values::computed::image::Image as ComputedImageLayer;
 use style::values::computed::{Length, LengthPercentage};
 use style::values::computed::{NonNegativeLengthPercentage, Size};
 use style::values::generics::box_::Perspective;
@@ -88,6 +89,7 @@ pub(crate) trait ComputedValuesExt {
     fn establishes_stacking_context(&self) -> bool;
     fn establishes_containing_block(&self) -> bool;
     fn establishes_containing_block_for_all_descendants(&self) -> bool;
+    fn background_is_transparent(&self) -> bool;
 }
 
 impl ComputedValuesExt for ComputedValues {
@@ -361,6 +363,18 @@ impl ComputedValuesExt for ComputedValues {
         // TODO: We need to handle CSS Contain here.
         false
     }
+
+    /// Whether or not this style specifies a non-transparent background.
+    fn background_is_transparent(&self) -> bool {
+        let background = self.get_background();
+        let color = self.resolve_color(background.background_color);
+        color.alpha == 0 &&
+            background
+                .background_image
+                .0
+                .iter()
+                .all(|layer| matches!(layer, ComputedImageLayer::None))
+    }
 }
 
 impl From<stylo::Display> for Display {

components/layout_thread_2020/lib.rs

@@ -45,7 +45,7 @@ use layout::query::{
     process_offset_parent_query, process_resolved_style_request, process_text_index_request,
 };
 use layout::traversal::RecalcStyle;
-use layout::{BoxTreeRoot, FragmentTreeRoot};
+use layout::{BoxTree, FragmentTree};
 use layout_traits::LayoutThreadFactory;
 use libc::c_void;
 use malloc_size_of::{MallocSizeOf, MallocSizeOfOps};
@@ -160,11 +160,11 @@ pub struct LayoutThread {
     /// The number of Web fonts that have been requested but not yet loaded.
     outstanding_web_fonts: Arc<AtomicUsize>,
 
-    /// The root of the box tree.
+    /// The box tree.
-    box_tree_root: RefCell<Option<Arc<BoxTreeRoot>>>,
+    box_tree: RefCell<Option<Arc<BoxTree>>>,
 
-    /// The root of the fragment tree.
+    /// The fragment tree.
-    fragment_tree_root: RefCell<Option<Arc<FragmentTreeRoot>>>,
+    fragment_tree: RefCell<Option<Arc<FragmentTree>>>,
 
     /// The document-specific shared lock used for author-origin stylesheets
     document_shared_lock: Option<SharedRwLock>,
@@ -513,8 +513,8 @@ impl LayoutThread {
             font_cache_sender: ipc_font_cache_sender,
             generation: Cell::new(0),
             outstanding_web_fonts: Arc::new(AtomicUsize::new(0)),
-            box_tree_root: Default::default(),
+            box_tree: Default::default(),
-            fragment_tree_root: Default::default(),
+            fragment_tree: Default::default(),
             document_shared_lock: None,
             // Epoch starts at 1 because of the initial display list for epoch 0 that we send to WR
             epoch: Cell::new(Epoch(1)),
@@ -1078,7 +1078,7 @@ impl LayoutThread {
             driver::traverse_dom(&traversal, token, rayon_pool);
 
             let root_node = document.root_element().unwrap().as_node();
-            let build_box_tree = || BoxTreeRoot::construct(traversal.context(), root_node);
+            let build_box_tree = || BoxTree::construct(traversal.context(), root_node);
             let box_tree = if let Some(pool) = rayon_pool {
                 pool.install(build_box_tree)
             } else {
@@ -1103,8 +1103,8 @@ impl LayoutThread {
             } else {
                 run_layout()
             });
-            *self.box_tree_root.borrow_mut() = Some(box_tree);
+            *self.box_tree.borrow_mut() = Some(box_tree);
-            *self.fragment_tree_root.borrow_mut() = Some(fragment_tree);
+            *self.fragment_tree.borrow_mut() = Some(fragment_tree);
         }
 
         for element in elements_with_snapshot {
@@ -1130,7 +1130,7 @@ impl LayoutThread {
         layout_context.style_context.stylist.rule_tree().maybe_gc();
 
         // Perform post-style recalculation layout passes.
-        if let Some(root) = &*self.fragment_tree_root.borrow() {
+        if let Some(root) = &*self.fragment_tree.borrow() {
             self.perform_post_style_recalc_layout_passes(
                 root.clone(),
                 &data.reflow_goal,
@@ -1162,7 +1162,7 @@ impl LayoutThread {
             ReflowGoal::LayoutQuery(ref querymsg, _) => match querymsg {
                 &QueryMsg::ContentBoxQuery(node) => {
                     rw_data.content_box_response =
-                        process_content_box_request(node, self.fragment_tree_root.borrow().clone());
+                        process_content_box_request(node, self.fragment_tree.borrow().clone());
                 },
                 &QueryMsg::ContentBoxesQuery(node) => {
                     rw_data.content_boxes_response = process_content_boxes_request(node);
@@ -1175,10 +1175,8 @@ impl LayoutThread {
                     rw_data.text_index_response = process_text_index_request(node, point_in_node);
                 },
                 &QueryMsg::ClientRectQuery(node) => {
-                    rw_data.client_rect_response = process_node_geometry_request(
+                    rw_data.client_rect_response =
-                        node,
+                        process_node_geometry_request(node, self.fragment_tree.borrow().clone());
-                        self.fragment_tree_root.borrow().clone(),
-                    );
                 },
                 &QueryMsg::NodeScrollGeometryQuery(node) => {
                     rw_data.scroll_area_response = process_node_scroll_area_request(node);
@@ -1190,7 +1188,7 @@ impl LayoutThread {
                 },
                 &QueryMsg::ResolvedStyleQuery(node, ref pseudo, ref property) => {
                     let node = unsafe { ServoLayoutNode::new(&node) };
-                    let fragment_tree = self.fragment_tree_root.borrow().clone();
+                    let fragment_tree = self.fragment_tree.borrow().clone();
                     rw_data.resolved_style_response = process_resolved_style_request(
                         context,
                         node,
@@ -1270,13 +1268,13 @@ impl LayoutThread {
 
     fn perform_post_style_recalc_layout_passes(
         &self,
-        fragment_tree: Arc<FragmentTreeRoot>,
+        fragment_tree: Arc<FragmentTree>,
         reflow_goal: &ReflowGoal,
         document: Option<&ServoLayoutDocument>,
         context: &mut LayoutContext,
     ) {
         if self.trace_layout {
-            if let Some(box_tree) = &*self.box_tree_root.borrow() {
+            if let Some(box_tree) = &*self.box_tree.borrow() {
                 layout_debug::begin_trace(box_tree.clone(), fragment_tree.clone());
             }
         }
@@ -1296,11 +1294,8 @@ impl LayoutThread {
             document.will_paint();
         }
 
-        let mut display_list = DisplayListBuilder::new(
+        let mut display_list =
-            self.id.to_webrender(),
+            DisplayListBuilder::new(self.id.to_webrender(), context, &fragment_tree);
-            context,
-            fragment_tree.scrollable_overflow(),
-        );
 
         // `dump_serialized_display_list` doesn't actually print anything. It sets up
         // the display list for printing the serialized version when `finalize()` is called.

components/script/dom/node.rs

@@ -3439,12 +3439,18 @@ impl Into<LayoutElementType> for ElementTypeId {
     #[inline(always)]
     fn into(self) -> LayoutElementType {
         match self {
+            ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLBodyElement) => {
+                LayoutElementType::HTMLBodyElement
+            },
             ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLBRElement) => {
                 LayoutElementType::HTMLBRElement
             },
             ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLCanvasElement) => {
                 LayoutElementType::HTMLCanvasElement
             },
+            ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLHtmlElement) => {
+                LayoutElementType::HTMLHtmlElement
+            },
             ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLIFrameElement) => {
                 LayoutElementType::HTMLIFrameElement
             },

components/script_layout_interface/lib.rs

@@ -101,8 +101,10 @@ pub enum LayoutNodeType {
 #[derive(Clone, Copy, Debug, Eq, PartialEq)]
 pub enum LayoutElementType {
     Element,
+    HTMLBodyElement,
     HTMLBRElement,
     HTMLCanvasElement,
+    HTMLHtmlElement,
     HTMLIFrameElement,
     HTMLImageElement,
     HTMLInputElement,

components/style/values/specified/box.rs

@@ -354,7 +354,7 @@ impl Display {
     ///
     /// Also used for :root style adjustments.
     pub fn equivalent_block_display(&self, _is_root_element: bool) -> Self {
-        #[cfg(feature = "gecko")]
+        #[cfg(any(feature = "servo-layout-2020", feature = "gecko"))]
         {
             // Special handling for `contents` and `list-item`s on the root element.
             if _is_root_element && (self.is_contents() || self.is_list_item()) {

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-004a.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-004a.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-004b.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-004b.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-004c.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-004c.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-004d.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-004d.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-004e.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-004e.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-004f.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-004f.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-005a.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-005a.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-005b.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-005b.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-005c.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-005c.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/abspos/abspos-containing-block-initial-005d.xht.ini

@@ -1,2 +0,0 @@
-[abspos-containing-block-initial-005d.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-body-001.xht.ini

@@ -1,2 +0,0 @@
-[background-body-001.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-001.xht.ini

@@ -1,2 +0,0 @@
-[background-root-001.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-002.xht.ini

@@ -1,2 +0,0 @@
-[background-root-002.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-005.xht.ini

@@ -1,2 +0,0 @@
-[background-root-005.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-007.xht.ini

@@ -1,2 +0,0 @@
-[background-root-007.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-008.xht.ini

@@ -1,2 +0,0 @@
-[background-root-008.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-009.xht.ini

@@ -1,2 +0,0 @@
-[background-root-009.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-010.xht.ini

@@ -1,2 +0,0 @@
-[background-root-010.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-012b.xht.ini

@@ -1,2 +0,0 @@
-[background-root-012b.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-015.xht.ini

@@ -1,2 +0,0 @@
-[background-root-015.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-016.xht.ini

@@ -1,2 +0,0 @@
-[background-root-016.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-018.xht.ini

@@ -1,2 +0,0 @@
-[background-root-018.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-019.xht.ini

@@ -1,2 +0,0 @@
-[background-root-019.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/backgrounds/background-root-024.xht.ini

@@ -1,2 +0,0 @@
-[background-root-024.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/box-display/root-box-003.xht.ini

@@ -0,0 +1,2 @@
+[root-box-003.xht]
+  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/css1/c45-bg-canvas-000.xht.ini

@@ -1,2 +0,0 @@
-[c45-bg-canvas-000.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/margin-padding-clear/margin-collapse-021.xht.ini

@@ -1,2 +0,0 @@
-[margin-collapse-021.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/CSS2/visudet/height-percentage-003a.xht.ini

@@ -1,2 +0,0 @@
-[height-percentage-003a.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-backgrounds/background-attachment-margin-root-001.html.ini

@@ -1,2 +0,0 @@
-[background-attachment-margin-root-001.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-backgrounds/background-color-body-propagation-001.html.ini

@@ -1,2 +0,0 @@
-[background-color-body-propagation-001.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-backgrounds/background-color-body-propagation-003.html.ini

@@ -1,2 +0,0 @@
-[background-color-body-propagation-003.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-backgrounds/background-margin-root.html.ini

@@ -1,2 +0,0 @@
-[background-margin-root.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-backgrounds/background-margin-transformed-root.html.ini

@@ -1,2 +0,0 @@
-[background-margin-transformed-root.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-backgrounds/background-margin-will-change-root.html.ini

@@ -1,2 +0,0 @@
-[background-margin-will-change-root.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-color/t421-rgb-func-whitespace-b.xht.ini

@@ -1,2 +0,0 @@
-[t421-rgb-func-whitespace-b.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-color/t422-rgba-func-whitespace-b.xht.ini

@@ -1,2 +0,0 @@
-[t422-rgba-func-whitespace-b.xht]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-color/t423-transparent-2-a.xht.ini

@@ -1,2 +0,0 @@
-[t423-transparent-2-a.xht]
-  expected: FAIL

tests/wpt/mozilla/meta-layout-2020/css/root_height_a.html.ini

@@ -1,2 +0,0 @@
-[root_height_a.html]
-  expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -8070,7 +8070,7 @@
      ]
     ],
     "scroll_root.html": [
-     "5896eb3957da1eb85a26680053823d3f3bf9af49",
+     "b1a9cb590b0fcce9c883f99e17fa029a999b699b",
      [
       null,
       [
@@ -11102,7 +11102,7 @@
      []
     ],
     "scroll_root_ref.html": [
-     "c7d4cfec7b9d9b5daf32841172721ddac3e4d071",
+     "6503ad5d5265c0698f61fc607e2e4e017b31cb6f",
      []
     ],
     "scrolling_div_background_borders_background.png": [

tests/wpt/mozilla/tests/mozilla/scroll_root.html

@@ -7,9 +7,6 @@
         <style>
             body {
                 background: green;
-
-                /* FIXME(mrobinson): Remove this workaround when #25559 is fixed. */
-                margin: 0;
             }
         </style>
     </head>

tests/wpt/mozilla/tests/mozilla/scroll_root_ref.html

@@ -5,14 +5,7 @@
         <style>
             body {
                 background: green;
-
-                /* FIXME(mrobinson): Remove this workaround when #25559 is fixed. */
-                margin: 0;
             }
         </style>
     </head>
-    <body>
-        <!-- FIXME(mrobinson): Remove this workaround div when #25559 is fixed. -->
-        <div style="height: 10000px;"></div>
-    </body>
 </html>