LibWeb: Account for CSS transform in Element::getClientRects()

kalenikaliaksandr · awesomekling · commit fb2166f19c38 · 2024-01-30T14:50:25.000+01:00
diff --git a/Tests/LibWeb/Text/expected/element-get-bounding-client-rect-css-transform.txt b/Tests/LibWeb/Text/expected/element-get-bounding-client-rect-css-transform.txt
@@ -0,0 +1 @@
+       {"x":68,"y":118,"width":100,"height":100,"top":118,"right":168,"bottom":218,"left":68}
diff --git a/Tests/LibWeb/Text/input/element-get-bounding-client-rect-css-transform.html b/Tests/LibWeb/Text/input/element-get-bounding-client-rect-css-transform.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<style type="text/css">
+    .transform-1 {
+        transform: translate(100px, 100px);
+    }
+
+    .transform-2 {
+        transform: translate(-50px, 0px);
+    }
+
+    #box {
+        background-color: magenta;
+        width: 100px;
+        height: 100px;
+        opacity: 0.1;
+        transform: translate(10px, 10px);
+    }
+</style>
+<div class="transform-1">
+    <div class="transform-2">
+        <div id="box"></div>
+    </div>
+</div>
+<script src="include.js"></script>
+<script>
+    test(() => {
+        const transformed_box_rect = document.getElementById("box").getBoundingClientRect();
+        println(JSON.stringify(transformed_box_rect));
+    });
+</script>
diff --git a/Userland/Libraries/LibWeb/DOM/Element.cpp b/Userland/Libraries/LibWeb/DOM/Element.cpp
@@ -900,24 +900,35 @@ JS::NonnullGCPtr<Geometry::DOMRectList> Element::get_client_rects() const
 
     // 3. Return a DOMRectList object containing DOMRect objects in content order, one for each box fragment,
     // describing its border area (including those with a height or width of zero) with the following constraints:
-    // FIXME: - Apply the transforms that apply to the element and its ancestors.
+    // - Apply the transforms that apply to the element and its ancestors.
     // FIXME: - If the element on which the method was invoked has a computed value for the display property of table
     //          or inline-table include both the table box and the caption box, if any, but not the anonymous container box.
     // FIXME: - Replace each anonymous block box with its child box(es) and repeat this until no anonymous block boxes
     //          are left in the final list.
     const_cast<Document&>(document()).update_layout();
     VERIFY(document().navigable());
     auto viewport_offset = document().navigable()->viewport_scroll_offset();
+
+    Gfx::AffineTransform transform;
+    for (auto const* containing_block = this->layout_node(); containing_block; containing_block = containing_block->containing_block()) {
+        Gfx::AffineTransform containing_block_transform;
+        if (containing_block->paintable() && containing_block->paintable()->is_paintable_box()) {
+            auto const& containing_block_paintable_box = static_cast<Painting::PaintableBox const&>(*containing_block->paintable());
+            containing_block_transform = Gfx::extract_2d_affine_transform(containing_block_paintable_box.transform());
+        }
+        transform = transform.multiply(containing_block_transform);
+    }
+
     auto const* paintable = this->paintable();
     if (auto const* paintable_box = this->paintable_box()) {
         auto absolute_rect = paintable_box->absolute_border_box_rect();
         absolute_rect.translate_by(-viewport_offset.x(), -viewport_offset.y());
-        rects.append(Geometry::DOMRect::create(realm(), absolute_rect.to_type<float>()));
+        rects.append(Geometry::DOMRect::create(realm(), transform.map(absolute_rect.to_type<float>())));
     } else if (paintable && is<Painting::InlinePaintable>(*paintable)) {
         auto const& inline_paintable = static_cast<Painting::InlinePaintable const&>(*paintable);
         auto absolute_rect = inline_paintable.bounding_rect();
         absolute_rect.translate_by(-viewport_offset.x(), -viewport_offset.y());
-        rects.append(Geometry::DOMRect::create(realm(), absolute_rect.to_type<float>()));
+        rects.append(Geometry::DOMRect::create(realm(), transform.map(absolute_rect.to_type<float>())));
     } else if (paintable) {
         dbgln("FIXME: Failed to get client rects for element ({})", debug_description());
     }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+ {"x":68,"y":118,"width":100,"height":100,"top":118,"right":168,"bottom":218,"left":68}`