LibWeb: Implement <feMerge> SVG filter

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

Libraries/LibGfx/Filter.cpp

@@ -224,6 +224,16 @@ Filter Filter::hue_rotate(float angle_degrees, Optional<Filter const&> input)
     return Filter(Impl::create(SkImageFilters::ColorFilter(color_filter, input_skia)));
 }
 
+Filter Filter::merge(Vector<Optional<Filter>> const& inputs)
+{
+    Vector<sk_sp<SkImageFilter>> skia_filters;
+    skia_filters.ensure_capacity(inputs.size());
+    for (auto& filter : inputs)
+        skia_filters.unchecked_append(filter.has_value() ? filter->m_impl->filter : nullptr);
+
+    return Filter(Impl::create(SkImageFilters::Merge(skia_filters.data(), skia_filters.size())));
+}
+
 Filter Filter::offset(float dx, float dy, Optional<Filter const&> input)
 {
     sk_sp<SkImageFilter> input_skia = input.has_value() ? input->m_impl->filter : nullptr;

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 merge(Vector<Optional<Filter>> const&);
     static Filter offset(float dx, float dy, Optional<Filter const&> input = {});
 
     FilterImpl const& impl() const;

Libraries/LibWeb/CMakeLists.txt

@@ -850,6 +850,8 @@ set(SOURCES
     SVG/SVGFEBlendElement.cpp
     SVG/SVGFEFloodElement.cpp
     SVG/SVGFEGaussianBlurElement.cpp
+    SVG/SVGFEMergeElement.cpp
+    SVG/SVGFEMergeNodeElement.cpp
     SVG/SVGFEOffsetElement.cpp
     SVG/SVGFilterElement.cpp
     SVG/SVGForeignObjectElement.cpp

Libraries/LibWeb/DOM/ElementFactory.cpp

@@ -94,6 +94,8 @@
 #include <LibWeb/SVG/SVGFEBlendElement.h>
 #include <LibWeb/SVG/SVGFEFloodElement.h>
 #include <LibWeb/SVG/SVGFEGaussianBlurElement.h>
+#include <LibWeb/SVG/SVGFEMergeElement.h>
+#include <LibWeb/SVG/SVGFEMergeNodeElement.h>
 #include <LibWeb/SVG/SVGFEOffsetElement.h>
 #include <LibWeb/SVG/SVGFilterElement.h>
 #include <LibWeb/SVG/SVGForeignObjectElement.h>
@@ -472,6 +474,10 @@ 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::feMerge)
+        return realm.create<SVG::SVGFEMergeElement>(document, move(qualified_name));
+    if (local_name == SVG::TagNames::feMergeNode)
+        return realm.create<SVG::SVGFEMergeNodeElement>(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)

Libraries/LibWeb/SVG/SVGFEMergeElement.cpp

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/Bindings/SVGFEMergeElementPrototype.h>
+#include <LibWeb/SVG/SVGFEMergeElement.h>
+
+namespace Web::SVG {
+
+GC_DEFINE_ALLOCATOR(SVGFEMergeElement);
+
+SVGFEMergeElement::SVGFEMergeElement(DOM::Document& document, DOM::QualifiedName qualified_name)
+    : SVGElement(document, qualified_name)
+{
+}
+
+void SVGFEMergeElement::initialize(JS::Realm& realm)
+{
+    WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGFEMergeElement);
+    Base::initialize(realm);
+}
+
+void SVGFEMergeElement::visit_edges(Cell::Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    SVGFilterPrimitiveStandardAttributes::visit_edges(visitor);
+}
+
+}

Libraries/LibWeb/SVG/SVGFEMergeElement.h

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

Libraries/LibWeb/SVG/SVGFEMergeElement.idl

@@ -0,0 +1,9 @@
+#import <SVG/SVGElement.idl>
+#import <SVG/SVGFilterPrimitiveStandardAttributes.idl>
+
+// https://www.w3.org/TR/filter-effects-1/#InterfaceSVGFEMergeElement
+[Exposed=Window]
+interface SVGFEMergeElement : SVGElement {
+};
+
+SVGFEMergeElement includes SVGFilterPrimitiveStandardAttributes;

Libraries/LibWeb/SVG/SVGFEMergeNodeElement.cpp

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/Bindings/SVGFEMergeNodeElementPrototype.h>
+#include <LibWeb/SVG/AttributeNames.h>
+#include <LibWeb/SVG/SVGFEMergeNodeElement.h>
+
+namespace Web::SVG {
+
+GC_DEFINE_ALLOCATOR(SVGFEMergeNodeElement);
+
+SVGFEMergeNodeElement::SVGFEMergeNodeElement(DOM::Document& document, DOM::QualifiedName qualified_name)
+    : SVGElement(document, qualified_name)
+{
+}
+
+void SVGFEMergeNodeElement::initialize(JS::Realm& realm)
+{
+    WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGFEMergeNodeElement);
+    Base::initialize(realm);
+}
+
+void SVGFEMergeNodeElement::visit_edges(Cell::Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    visitor.visit(m_in1);
+}
+
+GC::Ref<SVGAnimatedString> SVGFEMergeNodeElement::in1()
+{
+    if (!m_in1)
+        m_in1 = SVGAnimatedString::create(realm(), *this, AttributeNames::in);
+
+    return *m_in1;
+}
+
+}

Libraries/LibWeb/SVG/SVGFEMergeNodeElement.h

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

Libraries/LibWeb/SVG/SVGFEMergeNodeElement.idl

@@ -0,0 +1,8 @@
+#import <SVG/SVGAnimatedString.idl>
+#import <SVG/SVGElement.idl>
+
+// https://www.w3.org/TR/filter-effects-1/#InterfaceSVGFEMergeNodeElement
+[Exposed=Window]
+interface SVGFEMergeNodeElement : SVGElement {
+    readonly attribute SVGAnimatedString in1;
+};

Libraries/LibWeb/SVG/SVGFilterElement.cpp

@@ -11,6 +11,8 @@
 #include <LibWeb/SVG/SVGFEBlendElement.h>
 #include <LibWeb/SVG/SVGFEFloodElement.h>
 #include <LibWeb/SVG/SVGFEGaussianBlurElement.h>
+#include <LibWeb/SVG/SVGFEMergeElement.h>
+#include <LibWeb/SVG/SVGFEMergeNodeElement.h>
 #include <LibWeb/SVG/SVGFEOffsetElement.h>
 #include <LibWeb/SVG/SVGFilterElement.h>
 
@@ -130,6 +132,15 @@ Optional<Gfx::Filter> SVGFilterElement::gfx_filter()
 
             root_filter = Gfx::Filter::blur(radius_x, radius_y, input);
             update_result_map(*blur_primitive);
+        } else if (auto* merge_primitive = as_if<SVGFEMergeElement>(node)) {
+            Vector<Optional<Gfx::Filter>> merge_inputs;
+            merge_primitive->template for_each_child_of_type<SVGFEMergeNodeElement>([&](auto& merge_node) {
+                merge_inputs.append(resolve_input_filter(merge_node.in1()->base_val()));
+                return IterationDecision::Continue;
+            });
+
+            root_filter = Gfx::Filter::merge(merge_inputs);
+            update_result_map(*merge_primitive);
         } else if (auto* offset_primitive = as_if<SVGFEOffsetElement>(node)) {
             auto input = resolve_input_filter(offset_primitive->in1()->base_val());
 

Libraries/LibWeb/SVG/TagNames.h

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

Libraries/LibWeb/idl_files.cmake

@@ -347,6 +347,8 @@ libweb_js_bindings(SVG/SVGEllipseElement)
 libweb_js_bindings(SVG/SVGFEBlendElement)
 libweb_js_bindings(SVG/SVGFEFloodElement)
 libweb_js_bindings(SVG/SVGFEGaussianBlurElement)
+libweb_js_bindings(SVG/SVGFEMergeElement)
+libweb_js_bindings(SVG/SVGFEMergeNodeElement)
 libweb_js_bindings(SVG/SVGFEOffsetElement)
 libweb_js_bindings(SVG/SVGFilterElement)
 libweb_js_bindings(SVG/SVGForeignObjectElement)

Tests/LibWeb/Ref/expected/svg/offset-merge-filters-ref.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="100" height="100" fill="blue" />
+    <circle cx="50" cy="50" r="30" fill="rgba(255,0,0,0.5)" />
+    <circle cx="70" cy="60" r="30" fill="rgba(255,0,0,0.5)" />
+</svg>

Tests/LibWeb/Ref/input/svg/offset-merge-filters.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="match" href="../../expected/svg/offset-merge-filters-ref.html" />
+<meta name="fuzzy" content="0-1;0-59">
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="offsetMergeFilter" x="0" y="0" width="100" height="100">
+            <feOffset dx="20" dy="10" />
+            <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+            </feMerge>
+        </filter>
+    </defs>
+    <rect x="0" y="0" width="100" height="100" fill="blue" />
+    <circle cx="50" cy="50" r="30" fill="rgba(255,0,0,0.5)" filter="url(#offsetMergeFilter)" />
+</svg>

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

@@ -344,6 +344,8 @@ SVGEllipseElement
 SVGFEBlendElement
 SVGFEFloodElement
 SVGFEGaussianBlurElement
+SVGFEMergeElement
+SVGFEMergeNodeElement
 SVGFEOffsetElement
 SVGFilterElement
 SVGForeignObjectElement