LibWeb: Hook up SVG component transfer filter to Skia

gmta · gmta · commit b4810f47a3f4 · 2025-11-09T01:22:48.000+01:00
diff --git a/Libraries/LibGfx/Filter.cpp b/Libraries/LibGfx/Filter.cpp
@@ -195,6 +195,29 @@ Filter Filter::color_matrix(float matrix[20], Optional<Filter const&> input)
     return Filter(Impl::create(SkImageFilters::ColorFilter(SkColorFilters::Matrix(matrix), input_skia)));
 }
 
+Filter Filter::color_table(Optional<ReadonlyBytes> a, Optional<ReadonlyBytes> r, Optional<ReadonlyBytes> g,
+    Optional<ReadonlyBytes> b, Optional<Filter const&> input)
+{
+    VERIFY(!a.has_value() || a->size() == 256);
+    VERIFY(!r.has_value() || r->size() == 256);
+    VERIFY(!g.has_value() || g->size() == 256);
+    VERIFY(!b.has_value() || b->size() == 256);
+
+    sk_sp<SkImageFilter> input_skia = input.has_value() ? input->m_impl->filter : nullptr;
+
+    auto* a_table = a.has_value() ? a->data() : nullptr;
+    auto* r_table = r.has_value() ? r->data() : nullptr;
+    auto* g_table = g.has_value() ? g->data() : nullptr;
+    auto* b_table = b.has_value() ? b->data() : nullptr;
+
+    // Color tables are applied in linear space by default, so we need to convert twice.
+    // FIXME: support sRGB space as well (i.e. don't perform these conversions).
+    auto srgb_to_linear = SkImageFilters::ColorFilter(SkColorFilters::SRGBToLinearGamma(), input_skia);
+    auto color_table = SkImageFilters::ColorFilter(SkColorFilters::TableARGB(a_table, r_table, g_table, b_table), srgb_to_linear);
+    auto linear_to_srgb = SkImageFilters::ColorFilter(SkColorFilters::LinearToSRGBGamma(), color_table);
+    return Filter(Impl::create(linear_to_srgb));
+}
+
 Filter Filter::saturate(float value, Optional<Filter const&> input)
 {
     sk_sp<SkImageFilter> input_skia = input.has_value() ? input->m_impl->filter : nullptr;
diff --git a/Libraries/LibGfx/Filter.h b/Libraries/LibGfx/Filter.h
@@ -42,6 +42,7 @@ class Filter {
     static Filter blur(float radius_x, float radius_y, Optional<Filter const&> input = {});
     static Filter color(ColorFilterType type, float amount, Optional<Filter const&> input = {});
     static Filter color_matrix(float matrix[20], Optional<Filter const&> input = {});
+    static Filter color_table(Optional<ReadonlyBytes> a, Optional<ReadonlyBytes> r, Optional<ReadonlyBytes> g, Optional<ReadonlyBytes> b, 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 image(Gfx::ImmutableBitmap const& bitmap, Gfx::IntRect const& src_rect, Gfx::IntRect const& dest_rect, Gfx::ScalingMode scaling_mode);
diff --git a/Libraries/LibWeb/SVG/SVGComponentTransferFunctionElement.cpp b/Libraries/LibWeb/SVG/SVGComponentTransferFunctionElement.cpp
@@ -47,6 +47,9 @@ void SVGComponentTransferFunctionElement::attribute_changed(FlyString const& nam
     // FIXME: Support reflection instead of invalidating the list.
     if (name == AttributeNames::tableValues)
         m_table_values = {};
+
+    // Clear our cached color table on any attribute change.
+    m_cached_color_table.clear();
 }
 
 void SVGComponentTransferFunctionElement::initialize(JS::Realm& realm)
@@ -144,4 +147,117 @@ SVGComponentTransferFunctionElement::Type SVGComponentTransferFunctionElement::t
     return parse_type(get_attribute_value(AttributeNames::type));
 }
 
+Vector<float> SVGComponentTransferFunctionElement::table_float_values()
+{
+    Vector<float> values;
+    auto table_numbers = table_values()->base_val()->items();
+    values.ensure_capacity(table_numbers.size());
+    for (auto& svg_number : table_numbers)
+        values.unchecked_append(svg_number->value());
+    return values;
+}
+
+// https://drafts.fxtf.org/filter-effects/#element-attrdef-fecomponenttransfer-type
+ReadonlyBytes SVGComponentTransferFunctionElement::color_table()
+{
+    if (m_cached_color_table.has_value())
+        return m_cached_color_table.value();
+
+    ByteBuffer result;
+    result.resize(256);
+
+    auto set_identity = [&result] {
+        for (int i = 0; i < 256; ++i)
+            result.data()[i] = i;
+    };
+    auto to_u8 = [](float value) {
+        return AK::clamp_to<u8>(value * 255.f);
+    };
+
+    switch (type_from_attribute()) {
+    // https://drafts.fxtf.org/filter-effects/#attr-valuedef-type-identity
+    case Type::Unknown:
+    case Type::Identity:
+        set_identity();
+        break;
+
+    // https://drafts.fxtf.org/filter-effects/#attr-valuedef-type-table
+    case Type::Table: {
+        auto table_values = table_float_values();
+
+        // An empty list results in an identity transfer function.
+        if (table_values.is_empty()) {
+            set_identity();
+            break;
+        }
+
+        // For a value C < 1 find k such that: k/n <= C < (k+1)/n
+        // The result C' is given by: C' = vk + (C - k/n)*n * (vk+1 - vk)
+        auto const segments = table_values.size() - 1.f;
+        for (int i = 0; i < 256; ++i) {
+            // If C = 1 then: C' = vn.
+            if (i == 255 || segments == 0.f) {
+                result.data()[i] = to_u8(table_values.last());
+                continue;
+            }
+
+            auto offset = i / 255.f;
+            auto segment_index = static_cast<size_t>(offset * segments);
+            auto segment_start = segment_index / segments;
+            auto offset_in_segment = offset - segment_start;
+            auto segment_length = 1.f / segments;
+            auto progress_in_segment = offset_in_segment / segment_length;
+
+            auto segment_value = mix(table_values[segment_index], table_values[segment_index + 1], progress_in_segment);
+            result.data()[i] = to_u8(segment_value);
+        }
+        break;
+    }
+
+    // https://drafts.fxtf.org/filter-effects/#attr-valuedef-type-discrete
+    case Type::Discrete: {
+        auto table_values = table_float_values();
+
+        // An empty list results in an identity transfer function.
+        if (table_values.is_empty()) {
+            set_identity();
+            break;
+        }
+
+        // For a value C < 1 find k such that: k/n <= C < (k+1)/n
+        // The result C' is given by: C' = vk + (C - k/n)*n * (vk+1 - vk)
+        for (int i = 0; i < 255; ++i) {
+            auto index = static_cast<size_t>(i / 255.f * table_values.size());
+            result.data()[i] = to_u8(table_values[index]);
+        }
+
+        // If C = 1 then: C' = vn.
+        result.data()[255] = to_u8(table_values.last());
+        break;
+    }
+
+    // https://drafts.fxtf.org/filter-effects/#attr-valuedef-type-linear
+    case Type::Linear: {
+        auto slope = this->slope()->base_val();
+        auto intercept = this->intercept()->base_val();
+        for (int i = 0; i < 256; ++i)
+            result.data()[i] = to_u8(slope * i / 255.f + intercept);
+        break;
+    }
+
+    // https://drafts.fxtf.org/filter-effects/#attr-valuedef-type-gamma
+    case Type::Gamma: {
+        auto amplitude = this->amplitude()->base_val();
+        auto exponent = this->exponent()->base_val();
+        auto offset = this->offset()->base_val();
+        for (int i = 0; i < 256; ++i)
+            result.data()[i] = to_u8(amplitude * pow(i / 255.f, exponent) + offset);
+        break;
+    }
+    }
+
+    m_cached_color_table = move(result);
+    return m_cached_color_table.value();
+}
+
 }
diff --git a/Libraries/LibWeb/SVG/SVGComponentTransferFunctionElement.h b/Libraries/LibWeb/SVG/SVGComponentTransferFunctionElement.h
@@ -6,6 +6,8 @@
 
 #pragma once
 
+#include <AK/ByteBuffer.h>
+#include <AK/Optional.h>
 #include <LibWeb/SVG/SVGAnimatedEnumeration.h>
 #include <LibWeb/SVG/SVGAnimatedNumber.h>
 #include <LibWeb/SVG/SVGAnimatedNumberList.h>
@@ -40,6 +42,9 @@ class SVGComponentTransferFunctionElement
     GC::Ref<SVGAnimatedNumber> exponent();
     GC::Ref<SVGAnimatedNumber> offset();
 
+    Vector<float> table_float_values();
+    ReadonlyBytes color_table();
+
 protected:
     SVGComponentTransferFunctionElement(DOM::Document&, DOM::QualifiedName);
 
@@ -57,6 +62,8 @@ class SVGComponentTransferFunctionElement
     GC::Ptr<SVGAnimatedNumber> m_amplitude;
     GC::Ptr<SVGAnimatedNumber> m_exponent;
     GC::Ptr<SVGAnimatedNumber> m_offset;
+
+    Optional<ByteBuffer> m_cached_color_table;
 };
 
 }
diff --git a/Libraries/LibWeb/SVG/SVGFilterElement.cpp b/Libraries/LibWeb/SVG/SVGFilterElement.cpp
@@ -13,11 +13,16 @@
 #include <LibWeb/DOM/Text.h>
 #include <LibWeb/Layout/Node.h>
 #include <LibWeb/Painting/PaintableBox.h>
+#include <LibWeb/SVG/SVGComponentTransferFunctionElement.h>
 #include <LibWeb/SVG/SVGFEBlendElement.h>
 #include <LibWeb/SVG/SVGFEColorMatrixElement.h>
 #include <LibWeb/SVG/SVGFEComponentTransferElement.h>
 #include <LibWeb/SVG/SVGFECompositeElement.h>
 #include <LibWeb/SVG/SVGFEFloodElement.h>
+#include <LibWeb/SVG/SVGFEFuncAElement.h>
+#include <LibWeb/SVG/SVGFEFuncBElement.h>
+#include <LibWeb/SVG/SVGFEFuncGElement.h>
+#include <LibWeb/SVG/SVGFEFuncRElement.h>
 #include <LibWeb/SVG/SVGFEGaussianBlurElement.h>
 #include <LibWeb/SVG/SVGFEImageElement.h>
 #include <LibWeb/SVG/SVGFEMergeElement.h>
@@ -101,7 +106,33 @@ Optional<Gfx::Filter> SVGFilterElement::gfx_filter(Layout::NodeWithStyle const&
             root_filter = Gfx::Filter::blend(background, foreground, blend_mode);
             update_result_map(*blend_primitive);
         } else if (auto* component_transfer = as_if<SVGFEComponentTransferElement>(node)) {
-            dbgln("FIXME: Implement support for SVGFEComponentTransferElement");
+            auto input = resolve_input_filter(component_transfer->in1()->base_val());
+
+            // https://drafts.fxtf.org/filter-effects/#feComponentTransferElement
+            // * If more than one transfer function element of the same kind is specified, the last occurrence is to be
+            //   used.
+            // * If any of the transfer function elements are unspecified, the feComponentTransfer must be processed as
+            //   if those transfer function elements were specified with their type attributes set to identity.
+            Array<GC::Ptr<SVGComponentTransferFunctionElement>, 4> argb_function_elements;
+            node.for_each_child([&](auto& child) {
+                if (auto* func_a = as_if<SVGFEFuncAElement>(child))
+                    argb_function_elements[0] = func_a;
+                else if (auto* func_r = as_if<SVGFEFuncRElement>(child))
+                    argb_function_elements[1] = func_r;
+                else if (auto* func_g = as_if<SVGFEFuncGElement>(child))
+                    argb_function_elements[2] = func_g;
+                else if (auto* func_b = as_if<SVGFEFuncBElement>(child))
+                    argb_function_elements[3] = func_b;
+                return IterationDecision::Continue;
+            });
+
+            root_filter = Gfx::Filter::color_table(
+                argb_function_elements[0] ? argb_function_elements[0]->color_table() : Optional<ReadonlyBytes> {},
+                argb_function_elements[1] ? argb_function_elements[1]->color_table() : Optional<ReadonlyBytes> {},
+                argb_function_elements[2] ? argb_function_elements[2]->color_table() : Optional<ReadonlyBytes> {},
+                argb_function_elements[3] ? argb_function_elements[3]->color_table() : Optional<ReadonlyBytes> {},
+                input);
+            update_result_map(*component_transfer);
         } else if (auto* composite_primitive = as_if<SVGFECompositeElement>(node)) {
             auto foreground = resolve_input_filter(composite_primitive->in1()->base_val());
             auto background = resolve_input_filter(composite_primitive->in2()->base_val());
diff --git a/Tests/LibWeb/Screenshot/expected/svg-gradient-componentTransfer-ref.html b/Tests/LibWeb/Screenshot/expected/svg-gradient-componentTransfer-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+    * {
+        margin: 0;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/svg-gradient-componentTransfer-ref.png">
diff --git a/Tests/LibWeb/Screenshot/images/svg-gradient-componentTransfer-ref.png b/Tests/LibWeb/Screenshot/images/svg-gradient-componentTransfer-ref.png
diff --git a/Tests/LibWeb/Screenshot/input/svg-gradient-componentTransfer.html b/Tests/LibWeb/Screenshot/input/svg-gradient-componentTransfer.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/svg-gradient-componentTransfer-ref.html" />
+<style>
+    svg {
+        margin: 5px;
+    }
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+    <defs>
+        <linearGradient id="r" x2="0" y2="100%">
+            <stop offset="0" stop-color="#f00"/>
+            <stop offset="0.5" stop-color="rgba(0,255,0,0.5)"/>
+            <stop offset="1" stop-color="#00f"/>
+        </linearGradient>
+        <filter id="f">
+            <feComponentTransfer>
+                <feFuncR type="identity"></feFuncR>
+                <feFuncG type="identity"></feFuncG>
+                <feFuncB type="identity"></feFuncB>
+                <feFuncA type="identity"></feFuncA>
+            </feComponentTransfer>
+        </filter>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#r)" filter="url(#f)"/>
+</svg>
+<script>
+    const testCases = [
+        // Empty component transfer, should default to identity
+        {},
+        // Explicit identity
+        {all: {type: "identity"}},
+        // Regular table
+        {R: {type: "table", attrs: {tableValues: "0 0.1 1"}}, G: {type: "table", attrs: {tableValues: "1 0.25 0"}}},
+        // Table with single value (Firefox and Chrome disagree here)
+        {G: {type: "table", attrs: {tableValues: "1"}}},
+        // Empty table, should default to identity
+        {B: {type: "table", attrs: {tableValues: ""}}},
+        // Regular discrete
+        {B: {type: "discrete", attrs: {tableValues: "0 0.8 1"}}, A: {type: "linear", attrs: {slope: 2, intercept: .4}}},
+        // Regular linear
+        {R: {type: "linear", attrs: {slope: 0.1, intercept: 0.1}}},
+        // Regular gamma
+        {all: {type: "gamma", attrs: {amplitude: 2, exponent: 2.5, offset: 0.05}}},
+    ];
+
+    const svgTemplate = document.querySelector("svg");
+    svgTemplate.remove();
+
+    const funcs = ["R", "G", "B", "A"];
+    let i = 0;
+    for (const testCase of testCases) {
+        const testSvg = svgTemplate.cloneNode(true);
+        const filterId = `f-${i}`;
+        const gradientId = `r-${i++}`;
+        testSvg.querySelector("linearGradient").setAttribute("id", gradientId);
+        testSvg.querySelector("filter").setAttribute("id", filterId);
+        testSvg.querySelector("rect").setAttribute("fill", `url(#${gradientId})`);
+        testSvg.querySelector("rect").setAttribute("filter", `url(#${filterId})`);
+
+        const funcsConfig = Object.fromEntries(funcs.map(func => [func, testCase[func] || testCase.all]));
+        for (const [func, funcConfig] of Object.entries(funcsConfig)) {
+            const funcElement = testSvg.querySelector(`feFunc${func}`);
+            if (funcConfig === undefined) {
+                funcElement.remove();
+                continue;
+            }
+            funcElement.setAttribute("type", funcConfig.type);
+            for (const [attrName, attrValue] of Object.entries(funcConfig.attrs || {})) {
+                funcElement.setAttribute(attrName, attrValue);
+            }
+        }
+
+        document.body.appendChild(testSvg);
+    }
+</script>
