LibWeb/SVG: Skip unnwanted transformations on clip-path

LadybirdBrowser · Jan 8, 2025 · 2a2b0a1 · 2a2b0a1
1 parent 89296b8
commit 2a2b0a1
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 10 deletions.
diff --git a/Libraries/LibWeb/Painting/SVGMaskable.cpp b/Libraries/LibWeb/Painting/SVGMaskable.cpp
@@ -87,7 +87,11 @@ RefPtr<Gfx::ImmutableBitmap> SVGMaskable::calculate_mask_of_svg(PaintContext& co
         DisplayListRecorder display_list_recorder(*display_list);
         display_list_recorder.translate(-mask_rect.location().to_type<int>());
         auto paint_context = context.clone(display_list_recorder);
-        paint_context.set_svg_transform(graphics_element.get_transform());
+        auto const& mask_element = verify_cast<SVG::SVGGraphicsElement const>(*paintable.dom_node());
+        paint_context.set_svg_transform(
+            graphics_element.get_transform()
+                .multiply(mask_element.get_transform().inverse().value())
+                .multiply(mask_element.element_transform()));
         paint_context.set_draw_svg_geometry_for_clip_path(is<SVGClipPaintable>(paintable));
         StackingContext::paint_svg(paint_context, paintable, PaintPhase::Foreground);
         DisplayListPlayerSkia display_list_player { *mask_bitmap };

diff --git a/Libraries/LibWeb/SVG/SVGClipPathElement.cpp b/Libraries/LibWeb/SVG/SVGClipPathElement.cpp
@@ -14,7 +14,7 @@ namespace Web::SVG {
 GC_DEFINE_ALLOCATOR(SVGClipPathElement);
 
 SVGClipPathElement::SVGClipPathElement(DOM::Document& document, DOM::QualifiedName qualified_name)
-    : SVGElement(document, move(qualified_name))
+    : SVGGraphicsElement(document, move(qualified_name))
 {
 }
 

diff --git a/Libraries/LibWeb/SVG/SVGClipPathElement.h b/Libraries/LibWeb/SVG/SVGClipPathElement.h
@@ -8,13 +8,14 @@
 
 #include <LibWeb/SVG/AttributeParser.h>
 #include <LibWeb/SVG/SVGElement.h>
+#include <LibWeb/SVG/SVGGraphicsElement.h>
 #include <LibWeb/SVG/SVGViewport.h>
 
 namespace Web::SVG {
 
-class SVGClipPathElement final : public SVGElement
+class SVGClipPathElement final : public SVGGraphicsElement
     , public SVGViewport {
-    WEB_PLATFORM_OBJECT(SVGClipPathElement, SVGElement);
+    WEB_PLATFORM_OBJECT(SVGClipPathElement, SVGGraphicsElement);
     GC_DECLARE_ALLOCATOR(SVGClipPathElement);
 
 public:
@@ -48,5 +49,4 @@ class SVGClipPathElement final : public SVGElement
 
     Optional<ClipPathUnits> m_clip_path_units = {};
 };
-
 }
diff --git a/Libraries/LibWeb/SVG/SVGGraphicsElement.h b/Libraries/LibWeb/SVG/SVGGraphicsElement.h
@@ -67,16 +67,16 @@ class SVGGraphicsElement : public SVGElement {
 
     GC::Ptr<Geometry::DOMMatrix> get_screen_ctm();
 
-protected:
-    SVGGraphicsElement(DOM::Document&, DOM::QualifiedName);
-
-    virtual void initialize(JS::Realm&) override;
-
     virtual Gfx::AffineTransform element_transform() const
     {
         return m_transform;
     }
 
+protected:
+    SVGGraphicsElement(DOM::Document&, DOM::QualifiedName);
+
+    virtual void initialize(JS::Realm&) override;
+
     Optional<Painting::PaintStyle> svg_paint_computed_value_to_gfx_paint_style(SVGPaintContext const& paint_context, Optional<CSS::SVGPaint> const& paint_value) const;
 
     Gfx::AffineTransform m_transform = {};

diff --git a/Tests/LibWeb/Screenshot/expected/svg-clip-path-transform-ref.html b/Tests/LibWeb/Screenshot/expected/svg-clip-path-transform-ref.html
@@ -0,0 +1,10 @@
+<style>
+    * {
+        margin: 0;
+    }
+
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/svg-clip-path-transform-ref.png">
diff --git a/Tests/LibWeb/Screenshot/images/svg-clip-path-transform-ref.png b/Tests/LibWeb/Screenshot/images/svg-clip-path-transform-ref.png
diff --git a/Tests/LibWeb/Screenshot/input/svg-clip-path-transform.html b/Tests/LibWeb/Screenshot/input/svg-clip-path-transform.html
@@ -0,0 +1,20 @@
+<link rel="match" href="../expected/svg-clip-path-transform-ref.html" />
+<svg>
+    <g id="root" transform="scale(.5 .5)">
+        <g id="maskContainer" transform="scale(.5 2)">
+            <clipPath id="maskGroup" transform="translate(0,20)">
+                <path id="maskPath" d="M0 0h100v100H0z" />
+            </clipPath>
+        </g>
+        <g id="targetContainer" transform="rotate(5)">
+            <g transform="translate(20,0)">
+                <path d="M0 0h100v100H0z" style="fill:red" />
+                <path d="M0 100h100v100H0z" style="fill:red" />
+            </g>
+            <g id="targetGroup" clip-path="url(#maskGroup)" transform="translate(20,0)">
+                <path id="targetPath1" d="M0 0h100v100H0z" style="fill:green" />
+                <path id="targetPath2" d="M0 100h100v100H0z" style="fill:blue" />
+            </g>
+        </g>
+    </g>
+</svg>