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.

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;
@@ -31,17 +32,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 b = fb.fragment.style.get_background();
-    let (painting_area, clip) = match get_cyclic(&b.background_clip.0, layer_index) {
-        Clip::ContentBox => (fb.content_rect(), fb.content_edge_clip(builder)),
-        Clip::PaddingBox => (fb.padding_rect(), fb.padding_edge_clip(builder)),
-        Clip::BorderBox => (&fb.border_rect, fb.border_edge_clip(builder)),
+    let (painting_area, clip) = match source {
+        Source::Canvas { painting_area, .. } => (painting_area, None),
+        Source::Fragment => {
+            let fb = fragment_builder;
+            let b = fb.fragment.style.get_background();
+            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 +71,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 (painting_area, common) = painting_area(fragment_builder, builder, layer_index);
+    let style = match *source {
+        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(),

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;
-        let b = self.fragment.style.get_background();
-        let background_color = self.fragment.style.resolve_color(b.background_color);
+        if self.fragment.tag == builder.element_for_canvas_background {
+            // This background is already painted for the canvas, don’t paint it again here.
+            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) {
-                        let image_rendering =
-                            image_rendering(self.fragment.style.clone_image_rendering());
+                    if let Some(layer) =
+                        background::layout_layer(self, &source, builder, index, intrinsic)
+                    {
+                        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
@@ -470,7 +587,8 @@ impl BoxFragment {
     ) {
         // If we are creating a stacking context, we may also need to create a reference
         // frame first.
-        let reference_frame_data = self.reference_frame_data_if_necessary(containing_block_info);
+        let reference_frame_data =
+            self.reference_frame_data_if_necessary(&containing_block_info.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
@@ -622,7 +740,7 @@ impl BoxFragment {
     /// Optionally returns the data for building a reference frame, without yet building it.
     fn reference_frame_data_if_necessary(
         &self,
-        containing_block_info: &ContainingBlockInfo,
+        containing_block_rect: &PhysicalRect<Length>,
     ) -> Option<ReferenceFrameData> {
         if !self.style.has_transform_or_perspective() {
             return None;
@@ -630,9 +748,8 @@ impl BoxFragment {
 
         let relative_border_rect = self
             .border_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());
+            .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);

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();
-    while let Some(child) = next {
+    for child in iter_child_nodes(parent_element) {
         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);
@@ -485,3 +483,16 @@ where
         // for DOM descendants of elements with `display: none`.
     }
 }
+
+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/flow/root.rs

@@ -8,7 +8,7 @@ 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;
@@ -21,12 +21,14 @@ use crate::positioned::AbsolutelyPositionedBox;
 use crate::positioned::PositioningContext;
 use crate::replaced::ReplacedContent;
 use crate::sizing::ContentSizesRequest;
+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;
@@ -38,6 +40,9 @@ 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,
+
+    /// https://drafts.csswg.org/css-backgrounds/#special-backgrounds
+    canvas_background: CanvasBackground,
 }
 
 #[derive(Serialize)]
@@ -54,10 +59,14 @@ pub struct FragmentTree {
 
     /// The scrollable overflow rectangle for the entire tree
     /// https://drafts.csswg.org/css-overflow/#scrollable
-    scrollable_overflow: PhysicalRect<Length>,
+    pub(crate) scrollable_overflow: PhysicalRect<Length>,
 
     /// The containing block used in the layout of this fragment tree.
-    initial_containing_block: PhysicalRect<Length>,
+    pub(crate) initial_containing_block: PhysicalRect<Length>,
+
+    /// https://drafts.csswg.org/css-backgrounds/#special-backgrounds
+    #[serde(skip)]
+    pub(crate) canvas_background: CanvasBackground,
 }
 
 impl BoxTree {
@@ -75,6 +84,7 @@ impl BoxTree {
                 contains_floats: contains_floats == ContainsFloats::Yes,
                 contents: BlockContainer::BlockLevelBoxes(boxes),
             },
+            canvas_background: CanvasBackground::for_root_element(context, root_element),
         }
     }
 }
@@ -226,6 +236,7 @@ impl BoxTree {
             root_fragments,
             scrollable_overflow,
             initial_containing_block: physical_containing_block,
+            canvas_background: self.canvas_background.clone(),
         }
     }
 }
@@ -256,6 +267,14 @@ impl FragmentTree {
         }
 
         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);
     }
 
@@ -362,3 +381,64 @@ impl FragmentTree {
         .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/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

@@ -1294,11 +1294,8 @@ impl LayoutThread {
             document.will_paint();
         }
 
-        let mut display_list = DisplayListBuilder::new(
-            self.id.to_webrender(),
-            context,
-            fragment_tree.scrollable_overflow(),
-        );
+        let mut display_list =
+            DisplayListBuilder::new(self.id.to_webrender(), context, &fragment_tree);
 
         // `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,