layout: Consider transform for bounding box queries (#37871)

The recent changes that cached the Scroll Tree present an opportunity to
calculate the queries that consider transform and scroll (dubbed as post
composite queries) accurately.

This PR propose a solution for this calculation by noting the lowest
scroll tree nodes that would affect a fragment. To do this, each
fragment would store a new attribute `spatial_tree_node` -- scroll tree
node id that we could use for the query. This referencing is considered
because the scroll tree node construction is managed by the fragment
itself. Therefore it would ease the managing the possibly stale
reference and future query cache invalidation considering the
development of incremental layout.

The bounding box query then could transform the bounding content rect of
a fragment using the computed current transformation matrix.

Fixes: https://github.com/servo/servo/issues/35768
Testing: Existing and new WPT

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>

components/layout/display_list/stacking_context.rs

@@ -201,6 +201,7 @@ impl StackingContextTree {
     fn push_reference_frame(
         &mut self,
         origin: LayoutPoint,
+        frame_origin_for_query: LayoutPoint,
         parent_scroll_node_id: &ScrollTreeNodeId,
         transform_style: wr::TransformStyle,
         transform: LayoutTransform,
@@ -210,6 +211,7 @@ impl StackingContextTree {
             Some(parent_scroll_node_id),
             SpatialTreeNodeInfo::ReferenceFrame(ReferenceFrameNodeInfo {
                 origin,
+                frame_origin_for_query,
                 transform_style,
                 transform,
                 kind,
@@ -994,8 +996,11 @@ impl BoxFragment {
             return;
         }
 
+        let frame_origin_for_query = self.cumulative_border_box_rect().origin.to_webrender();
+
         let new_spatial_id = stacking_context_tree.push_reference_frame(
             reference_frame_data.origin.to_webrender(),
+            frame_origin_for_query,
             &containing_block.scroll_node_id,
             self.style.get_box().transform_style.to_webrender(),
             reference_frame_data.transform,
@@ -1212,6 +1217,11 @@ impl BoxFragment {
             add_fragment(StackingContextSection::Outline);
         }
 
+        // Spatial tree node that will affect the transform of the fragment. Note that the next frame,
+        // scroll frame, does not affect the transform of the fragment but affect the transform of it
+        // children.
+        *self.spatial_tree_node.borrow_mut() = Some(new_scroll_node_id);
+
         // We want to build the scroll frame after the background and border, because
         // they shouldn't scroll with the rest of the box content.
         if let Some(overflow_frame_data) = self.build_overflow_frame_if_necessary(

components/layout/fragment_tree/box_fragment.rs

@@ -4,6 +4,7 @@
 
 use app_units::{Au, MAX_AU, MIN_AU};
 use atomic_refcell::AtomicRefCell;
+use base::id::ScrollTreeNodeId;
 use base::print_tree::PrintTree;
 use malloc_size_of_derive::MallocSizeOf;
 use servo_arc::Arc as ServoArc;
@@ -109,6 +110,12 @@ pub(crate) struct BoxFragment {
 
     /// Additional information for block-level boxes.
     pub block_level_layout_info: Option<Box<BlockLevelLayoutInfo>>,
+
+    /// The containing spatial tree node of this [`BoxFragment`]. This is assigned during
+    /// `StackingContextTree` construction, so isn't available before that time. This is
+    /// used to for determining final viewport size and position of this node and will
+    /// also be used in the future for hit testing.
+    pub spatial_tree_node: AtomicRefCell<Option<ScrollTreeNodeId>>,
 }
 
 impl BoxFragment {
@@ -138,6 +145,7 @@ impl BoxFragment {
             background_mode: BackgroundMode::Normal,
             specific_layout_info,
             block_level_layout_info: None,
+            spatial_tree_node: AtomicRefCell::default(),
         }
     }
 
@@ -270,6 +278,10 @@ impl BoxFragment {
         rect.translate(self.cumulative_containing_block_rect.origin.to_vector())
     }
 
+    pub(crate) fn cumulative_border_box_rect(&self) -> PhysicalRect<Au> {
+        self.offset_by_containing_block(&self.border_rect())
+    }
+
     pub(crate) fn padding_rect(&self) -> PhysicalRect<Au> {
         self.content_rect.outer_rect(self.padding)
     }

components/layout/fragment_tree/fragment.rs

@@ -205,8 +205,7 @@ impl Fragment {
     pub(crate) fn cumulative_border_box_rect(&self) -> Option<PhysicalRect<Au>> {
         match self {
             Fragment::Box(fragment) | Fragment::Float(fragment) => {
-                let fragment = fragment.borrow();
-                Some(fragment.offset_by_containing_block(&fragment.border_rect()))
+                Some(fragment.borrow().cumulative_border_box_rect())
             },
             Fragment::Positioning(fragment) => {
                 let fragment = fragment.borrow();
@@ -325,6 +324,13 @@ impl Fragment {
             Fragment::IFrame(iframe_fragment) => iframe_fragment.borrow_mut().style = style.clone(),
         }
     }
+
+    pub(crate) fn retrieve_box_fragment(&self) -> Option<&ArcRefCell<BoxFragment>> {
+        match self {
+            Fragment::Box(box_fragment) | Fragment::Float(box_fragment) => Some(box_fragment),
+            _ => None,
+        }
+    }
 }
 
 impl TextFragment {

components/layout/layout_impl.rs

@@ -253,16 +253,34 @@ impl Layout for LayoutThread {
             .remove_all_web_fonts_from_stylesheet(&stylesheet);
     }
 
+    /// Return the union of this node's content boxes in the coordinate space of the Document.
+    /// to implement `getBoundingClientRect()`.
+    ///
+    /// Part of <https://drafts.csswg.org/cssom-view-1/#element-get-the-bounding-box>
+    /// TODO(stevennovaryo): Rename and parameterize the function, allowing padding area
+    ///                      query and possibly, query without consideration of transform.
     #[servo_tracing::instrument(skip_all)]
     fn query_content_box(&self, node: TrustedNodeAddress) -> Option<UntypedRect<Au>> {
         let node = unsafe { ServoLayoutNode::new(&node) };
-        process_content_box_request(node)
+        let stacking_context_tree = self.stacking_context_tree.borrow();
+        let stacking_context_tree = stacking_context_tree
+            .as_ref()
+            .expect("Should always have a StackingContextTree for geometry queries");
+        process_content_box_request(stacking_context_tree, node)
     }
 
+    /// Get a `Vec` of bounding boxes of this node's `Fragement`s in the coordinate space of the
+    /// Document. This is used to implement `getClientRects()`.
+    ///
+    /// See <https://drafts.csswg.org/cssom-view/#dom-element-getclientrects>.
     #[servo_tracing::instrument(skip_all)]
     fn query_content_boxes(&self, node: TrustedNodeAddress) -> Vec<UntypedRect<Au>> {
         let node = unsafe { ServoLayoutNode::new(&node) };
-        process_content_boxes_request(node)
+        let stacking_context_tree = self.stacking_context_tree.borrow();
+        let stacking_context_tree = stacking_context_tree
+            .as_ref()
+            .expect("Should always have a StackingContextTree for geometry queries");
+        process_content_boxes_request(stacking_context_tree, node)
     }
 
     #[servo_tracing::instrument(skip_all)]
@@ -1431,12 +1449,11 @@ impl ReflowPhases {
                 QueryMsg::NodesFromPointQuery => {
                     Self::StackingContextTreeConstruction | Self::DisplayListConstruction
                 },
-                QueryMsg::ResolvedStyleQuery | QueryMsg::ScrollingAreaOrOffsetQuery => {
-                    Self::StackingContextTreeConstruction
-                },
-                QueryMsg::ClientRectQuery |
                 QueryMsg::ContentBox |
                 QueryMsg::ContentBoxes |
+                QueryMsg::ResolvedStyleQuery |
+                QueryMsg::ScrollingAreaOrOffsetQuery => Self::StackingContextTreeConstruction,
+                QueryMsg::ClientRectQuery |
                 QueryMsg::ElementInnerOuterTextQuery |
                 QueryMsg::InnerWindowDimensionsQuery |
                 QueryMsg::OffsetParentQuery |

components/layout/query.rs

@@ -6,6 +6,7 @@
 use std::rc::Rc;
 
 use app_units::Au;
+use compositing_traits::display_list::ScrollTree;
 use euclid::default::{Point2D, Rect};
 use euclid::{SideOffsets2D, Size2D};
 use itertools::Itertools;
@@ -13,6 +14,7 @@ use layout_api::wrapper_traits::{LayoutNode, ThreadSafeLayoutElement, ThreadSafe
 use layout_api::{LayoutElementType, LayoutNodeType, OffsetParentResponse};
 use script::layout_dom::ServoLayoutNode;
 use servo_arc::Arc as ServoArc;
+use servo_geometry::{au_rect_to_f32_rect, f32_rect_to_au_rect};
 use servo_url::ServoUrl;
 use style::computed_values::display::T as Display;
 use style::computed_values::position::T as Position;
@@ -37,8 +39,10 @@ use style::values::specified::GenericGridTemplateComponent;
 use style::values::specified::box_::DisplayInside;
 use style::values::specified::text::TextTransformCase;
 use style_traits::{ParsingMode, ToCss};
+use webrender_api::units::LayoutTransform;
 
 use crate::ArcRefCell;
+use crate::display_list::StackingContextTree;
 use crate::dom::NodeExt;
 use crate::flow::inline::construct::{TextTransformation, WhitespaceCollapse, capitalize_string};
 use crate::fragment_tree::{
@@ -46,7 +50,28 @@ use crate::fragment_tree::{
 };
 use crate::taffy::SpecificTaffyGridInfo;
 
-pub fn process_content_box_request(node: ServoLayoutNode<'_>) -> Option<Rect<Au>> {
+/// Get a scroll node that would represents this [`ServoLayoutNode`]'s transform and
+/// calculate its cumlative transform from its root scroll node to the scroll node.
+fn root_transform_for_layout_node(
+    scroll_tree: &ScrollTree,
+    node: ServoLayoutNode<'_>,
+) -> Option<LayoutTransform> {
+    let fragments = node.fragments_for_pseudo(None);
+    let box_fragment = fragments
+        .first()
+        .and_then(Fragment::retrieve_box_fragment)?
+        .borrow();
+    let scroll_tree_node_id = box_fragment
+        .spatial_tree_node
+        .borrow()
+        .expect("Should always have a scroll tree node when querying bounding box.");
+    Some(scroll_tree.cumulative_node_transform(&scroll_tree_node_id))
+}
+
+pub(crate) fn process_content_box_request(
+    stacking_context_tree: &StackingContextTree,
+    node: ServoLayoutNode<'_>,
+) -> Option<Rect<Au>> {
     let rects: Vec<_> = node
         .fragments_for_pseudo(None)
         .iter()
@@ -55,17 +80,37 @@ pub fn process_content_box_request(node: ServoLayoutNode<'_>) -> Option<Rect<Au>
     if rects.is_empty() {
         return None;
     }
-
-    Some(rects.iter().fold(Rect::zero(), |unioned_rect, rect| {
+    let rect_union = rects.iter().fold(Rect::zero(), |unioned_rect, rect| {
         rect.to_untyped().union(&unioned_rect)
-    }))
+    });
+
+    let Some(transform) =
+        root_transform_for_layout_node(&stacking_context_tree.compositor_info.scroll_tree, node)
+    else {
+        return Some(rect_union);
+    };
+
+    Some(transform_au_rectangle(rect_union, transform))
 }
 
-pub fn process_content_boxes_request(node: ServoLayoutNode<'_>) -> Vec<Rect<Au>> {
-    node.fragments_for_pseudo(None)
+pub(crate) fn process_content_boxes_request(
+    stacking_context_tree: &StackingContextTree,
+    node: ServoLayoutNode<'_>,
+) -> Vec<Rect<Au>> {
+    let fragments = node.fragments_for_pseudo(None);
+    let content_boxes = fragments
         .iter()
         .filter_map(Fragment::cumulative_border_box_rect)
-        .map(|rect| rect.to_untyped())
+        .map(|rect| rect.to_untyped());
+
+    let Some(transform) =
+        root_transform_for_layout_node(&stacking_context_tree.compositor_info.scroll_tree, node)
+    else {
+        return content_boxes.collect();
+    };
+
+    content_boxes
+        .map(|rect| transform_au_rectangle(rect, transform))
         .collect()
 }
 
@@ -1104,3 +1149,10 @@ where
 
     Some(computed_values.clone_font())
 }
+
+fn transform_au_rectangle(rect_to_transform: Rect<Au>, transform: LayoutTransform) -> Rect<Au> {
+    transform
+        .outer_transformed_rect(&au_rect_to_f32_rect(rect_to_transform).cast_unit())
+        .map(|transformed_rect| f32_rect_to_au_rect(transformed_rect.to_untyped()))
+        .unwrap_or(rect_to_transform)
+}