LibWeb: Implement <feOffset> SVG filter

Author: https://github.com/gmta
Commit: 1377dba7af
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5742

Libraries/LibGfx/Filter.cpp

@@ -224,4 +224,10 @@ Filter Filter::hue_rotate(float angle_degrees, Optional<Filter const&> input)
     return Filter(Impl::create(SkImageFilters::ColorFilter(color_filter, input_skia)));
 }
 
+Filter Filter::offset(float dx, float dy, Optional<Filter const&> input)
+{
+    sk_sp<SkImageFilter> input_skia = input.has_value() ? input->m_impl->filter : nullptr;
+    return Filter(Impl::create(SkImageFilters::Offset(dx, dy, input_skia)));
+}
+
 }

Libraries/LibGfx/Filter.h

@@ -40,6 +40,7 @@ public:
     static Filter color_matrix(float matrix[20], Optional<Filter const&> input = {});
     static Filter saturate(float value, Optional<Filter const&> input = {});
     static Filter hue_rotate(float angle_degrees, Optional<Filter const&> input = {});
+    static Filter offset(float dx, float dy, Optional<Filter const&> input = {});
 
     FilterImpl const& impl() const;
 

Libraries/LibWeb/CMakeLists.txt

@@ -850,6 +850,7 @@ set(SOURCES
     SVG/SVGFEBlendElement.cpp
     SVG/SVGFEFloodElement.cpp
     SVG/SVGFEGaussianBlurElement.cpp
+    SVG/SVGFEOffsetElement.cpp
     SVG/SVGFilterElement.cpp
     SVG/SVGForeignObjectElement.cpp
     SVG/SVGGElement.cpp

Libraries/LibWeb/DOM/ElementFactory.cpp

@@ -94,6 +94,7 @@
 #include <LibWeb/SVG/SVGFEBlendElement.h>
 #include <LibWeb/SVG/SVGFEFloodElement.h>
 #include <LibWeb/SVG/SVGFEGaussianBlurElement.h>
+#include <LibWeb/SVG/SVGFEOffsetElement.h>
 #include <LibWeb/SVG/SVGFilterElement.h>
 #include <LibWeb/SVG/SVGForeignObjectElement.h>
 #include <LibWeb/SVG/SVGGElement.h>
@@ -471,6 +472,8 @@ static GC::Ref<SVG::SVGElement> create_svg_element(JS::Realm& realm, Document& d
         return realm.create<SVG::SVGFEFloodElement>(document, move(qualified_name));
     if (local_name == SVG::TagNames::feGaussianBlur)
         return realm.create<SVG::SVGFEGaussianBlurElement>(document, move(qualified_name));
+    if (local_name == SVG::TagNames::feOffset)
+        return realm.create<SVG::SVGFEOffsetElement>(document, move(qualified_name));
     if (local_name == SVG::TagNames::filter)
         return realm.create<SVG::SVGFilterElement>(document, move(qualified_name));
     if (local_name.equals_ignoring_ascii_case(SVG::TagNames::foreignObject))

Libraries/LibWeb/SVG/SVGFEOffsetElement.cpp

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/Bindings/SVGFEOffsetElementPrototype.h>
+#include <LibWeb/SVG/SVGFEOffsetElement.h>
+
+namespace Web::SVG {
+
+GC_DEFINE_ALLOCATOR(SVGFEOffsetElement);
+
+SVGFEOffsetElement::SVGFEOffsetElement(DOM::Document& document, DOM::QualifiedName qualified_name)
+    : SVGElement(document, qualified_name)
+{
+}
+
+void SVGFEOffsetElement::initialize(JS::Realm& realm)
+{
+    WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGFEOffsetElement);
+    Base::initialize(realm);
+}
+
+void SVGFEOffsetElement::visit_edges(Cell::Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    SVGFilterPrimitiveStandardAttributes::visit_edges(visitor);
+    visitor.visit(m_in1);
+    visitor.visit(m_dx);
+    visitor.visit(m_dy);
+}
+
+// https://www.w3.org/TR/filter-effects-1/#dom-svgfeoffsetelement-in1
+GC::Ref<SVGAnimatedString> SVGFEOffsetElement::in1()
+{
+    if (!m_in1)
+        m_in1 = SVGAnimatedString::create(realm(), *this, AttributeNames::in);
+
+    return *m_in1;
+}
+
+// https://www.w3.org/TR/filter-effects-1/#dom-svgfeoffsetelement-dx
+GC::Ref<SVGAnimatedNumber> SVGFEOffsetElement::dx()
+{
+    if (!m_dx) {
+        m_dx = SVGAnimatedNumber::create(realm(), *this, AttributeNames::dx, 0.f,
+            SVGAnimatedNumber::SupportsSecondValue::Yes, SVGAnimatedNumber::ValueRepresented::First);
+    }
+    return *m_dx;
+}
+
+// https://www.w3.org/TR/filter-effects-1/#dom-svgfeoffsetelement-dy
+GC::Ref<SVGAnimatedNumber> SVGFEOffsetElement::dy()
+{
+    if (!m_dy) {
+        m_dy = SVGAnimatedNumber::create(realm(), *this, AttributeNames::dy, 0.f,
+            SVGAnimatedNumber::SupportsSecondValue::Yes, SVGAnimatedNumber::ValueRepresented::Second);
+    }
+    return *m_dy;
+}
+
+}

Libraries/LibWeb/SVG/SVGFEOffsetElement.h

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/SVG/SVGAnimatedNumber.h>
+#include <LibWeb/SVG/SVGAnimatedString.h>
+#include <LibWeb/SVG/SVGElement.h>
+#include <LibWeb/SVG/SVGFilterPrimitiveStandardAttributes.h>
+
+namespace Web::SVG {
+
+// https://www.w3.org/TR/filter-effects-1/#svgfeoffsetelement
+class SVGFEOffsetElement final
+    : public SVGElement
+    , public SVGFilterPrimitiveStandardAttributes<SVGFEOffsetElement> {
+    WEB_PLATFORM_OBJECT(SVGFEOffsetElement, SVGElement);
+    GC_DECLARE_ALLOCATOR(SVGFEOffsetElement);
+
+public:
+    virtual ~SVGFEOffsetElement() override = default;
+
+    GC::Ref<SVGAnimatedString> in1();
+    GC::Ref<SVGAnimatedNumber> dx();
+    GC::Ref<SVGAnimatedNumber> dy();
+
+private:
+    SVGFEOffsetElement(DOM::Document&, DOM::QualifiedName);
+
+    virtual void initialize(JS::Realm&) override;
+    virtual void visit_edges(Cell::Visitor&) override;
+
+    GC::Ptr<SVGAnimatedString> m_in1;
+    GC::Ptr<SVGAnimatedNumber> m_dx;
+    GC::Ptr<SVGAnimatedNumber> m_dy;
+};
+
+}

Libraries/LibWeb/SVG/SVGFEOffsetElement.idl

@@ -0,0 +1,14 @@
+#import <SVG/SVGAnimatedNumber.idl>
+#import <SVG/SVGAnimatedString.idl>
+#import <SVG/SVGElement.idl>
+#import <SVG/SVGFilterPrimitiveStandardAttributes.idl>
+
+// https://www.w3.org/TR/filter-effects-1/#InterfaceSVGFEOffsetElement
+[Exposed=Window]
+interface SVGFEOffsetElement : SVGElement {
+    readonly attribute SVGAnimatedString in1;
+    readonly attribute SVGAnimatedNumber dx;
+    readonly attribute SVGAnimatedNumber dy;
+};
+
+SVGFEOffsetElement includes SVGFilterPrimitiveStandardAttributes;

Libraries/LibWeb/SVG/SVGFilterElement.cpp

@@ -11,6 +11,7 @@
 #include <LibWeb/SVG/SVGFEBlendElement.h>
 #include <LibWeb/SVG/SVGFEFloodElement.h>
 #include <LibWeb/SVG/SVGFEGaussianBlurElement.h>
+#include <LibWeb/SVG/SVGFEOffsetElement.h>
 #include <LibWeb/SVG/SVGFilterElement.h>
 
 namespace Web::SVG {
@@ -129,6 +130,14 @@ Optional<Gfx::Filter> SVGFilterElement::gfx_filter()
 
             root_filter = Gfx::Filter::blur(radius_x, radius_y, input);
             update_result_map(*blur_primitive);
+        } else if (auto* offset_primitive = as_if<SVGFEOffsetElement>(node)) {
+            auto input = resolve_input_filter(offset_primitive->in1()->base_val());
+
+            auto dx = offset_primitive->dx()->base_val();
+            auto dy = offset_primitive->dy()->base_val();
+
+            root_filter = Gfx::Filter::offset(dx, dy, input);
+            update_result_map(*offset_primitive);
         } else {
             dbgln("SVGFilterElement::gfx_filter(): Unknown or unsupported filter element '{}'", node.debug_description());
         }

Libraries/LibWeb/SVG/TagNames.h

@@ -20,6 +20,7 @@ namespace Web::SVG::TagNames {
     __ENUMERATE_SVG_TAG(feBlend)        \
     __ENUMERATE_SVG_TAG(feFlood)        \
     __ENUMERATE_SVG_TAG(feGaussianBlur) \
+    __ENUMERATE_SVG_TAG(feOffset)       \
     __ENUMERATE_SVG_TAG(filter)         \
     __ENUMERATE_SVG_TAG(foreignObject)  \
     __ENUMERATE_SVG_TAG(g)              \

Libraries/LibWeb/idl_files.cmake

@@ -347,6 +347,7 @@ libweb_js_bindings(SVG/SVGEllipseElement)
 libweb_js_bindings(SVG/SVGFEBlendElement)
 libweb_js_bindings(SVG/SVGFEFloodElement)
 libweb_js_bindings(SVG/SVGFEGaussianBlurElement)
+libweb_js_bindings(SVG/SVGFEOffsetElement)
 libweb_js_bindings(SVG/SVGFilterElement)
 libweb_js_bindings(SVG/SVGForeignObjectElement)
 libweb_js_bindings(SVG/SVGLength)

Tests/LibWeb/Text/expected/all-window-properties.txt

@@ -344,6 +344,7 @@ SVGEllipseElement
 SVGFEBlendElement
 SVGFEFloodElement
 SVGFEGaussianBlurElement
+SVGFEOffsetElement
 SVGFilterElement
 SVGForeignObjectElement
 SVGGElement