diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/layout_2020/display_list/background.rs | 39 | ||||
| -rw-r--r-- | components/layout_2020/display_list/mod.rs | 47 | ||||
| -rw-r--r-- | components/layout_2020/display_list/stacking_context.rs | 131 | ||||
| -rw-r--r-- | components/layout_2020/dom_traversal.rs | 17 | ||||
| -rw-r--r-- | components/layout_2020/flow/root.rs | 86 | ||||
| -rw-r--r-- | components/layout_2020/style_ext.rs | 14 | ||||
| -rw-r--r-- | components/layout_thread_2020/lib.rs | 7 | ||||
| -rw-r--r-- | components/script/dom/node.rs | 6 | ||||
| -rw-r--r-- | components/script_layout_interface/lib.rs | 2 |
9 files changed, 312 insertions, 37 deletions
diff --git a/components/layout_2020/display_list/background.rs b/components/layout_2020/display_list/background.rs index e6a353e2a36..e1871e5d164 100644 --- a/components/layout_2020/display_list/background.rs +++ b/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(), diff --git a/components/layout_2020/display_list/mod.rs b/components/layout_2020/display_list/mod.rs index 43529043a5a..249c423024d 100644 --- a/components/layout_2020/display_list/mod.rs +++ b/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, diff --git a/components/layout_2020/display_list/stacking_context.rs b/components/layout_2020/display_list/stacking_context.rs index 953ef188459..28973a707b5 100644 --- a/components/layout_2020/display_list/stacking_context.rs +++ b/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); diff --git a/components/layout_2020/dom_traversal.rs b/components/layout_2020/dom_traversal.rs index 8c666e6bf11..a8f5a17fc1d 100644 --- a/components/layout_2020/dom_traversal.rs +++ b/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 + }) + }) +} diff --git a/components/layout_2020/flow/root.rs b/components/layout_2020/flow/root.rs index 1d6e7d68ea7..68bce6ca9e4 100644 --- a/components/layout_2020/flow/root.rs +++ b/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 + }, + } + } +} diff --git a/components/layout_2020/style_ext.rs b/components/layout_2020/style_ext.rs index 7442411ae53..857a00d22c4 100644 --- a/components/layout_2020/style_ext.rs +++ b/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 { diff --git a/components/layout_thread_2020/lib.rs b/components/layout_thread_2020/lib.rs index 0ad917f3a18..a62a172d19d 100644 --- a/components/layout_thread_2020/lib.rs +++ b/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. diff --git a/components/script/dom/node.rs b/components/script/dom/node.rs index 503cc589b50..a7eda2e3597 100644 --- a/components/script/dom/node.rs +++ b/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 }, diff --git a/components/script_layout_interface/lib.rs b/components/script_layout_interface/lib.rs index 374c650986d..6b4b2615412 100644 --- a/components/script_layout_interface/lib.rs +++ b/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, |