LibWeb: Add generic FunctionStyleValue

Currently there are multiple style values which are essentially the same
thing, a function holding a value, just with different names. This
commit adds a generic style value to replace them with and the following
commits will do so.

Libraries/LibWeb/CMakeLists.txt

@@ -259,6 +259,7 @@ set(SOURCES
     CSS/StyleValues/EdgeStyleValue.cpp
     CSS/StyleValues/FilterValueListStyleValue.cpp
     CSS/StyleValues/FitContentStyleValue.cpp
+    CSS/StyleValues/FunctionStyleValue.cpp
     CSS/StyleValues/FontSourceStyleValue.cpp
     CSS/StyleValues/FontStyleStyleValue.cpp
     CSS/StyleValues/FontVariantAlternatesFunctionStyleValue.cpp

Libraries/LibWeb/CSS/Interpolation.cpp

@@ -26,6 +26,7 @@
 #include <LibWeb/CSS/StyleValues/FlexStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FontStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FrequencyStyleValue.h>
+#include <LibWeb/CSS/StyleValues/FunctionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTrackSizeListStyleValue.h>
 #include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
 #include <LibWeb/CSS/StyleValues/KeywordStyleValue.h>
@@ -1736,6 +1737,19 @@ static RefPtr<StyleValue const> interpolate_value_impl(DOM::Element& element, Ca
         auto interpolated_value = interpolate_raw(from.as_flex().flex().to_fr(), to.as_flex().flex().to_fr(), delta, calculation_context.accepted_ranges_by_type.get(ValueType::Flex));
         return FlexStyleValue::create(Flex::make_fr(interpolated_value));
     }
+    case StyleValue::Type::Function: {
+        auto const& from_function = from.as_function();
+        auto const& to_function = to.as_function();
+
+        if (from_function.name() != to_function.name())
+            return {};
+
+        auto interpolated_value = interpolate_value(element, calculation_context, from_function.value(), to_function.value(), delta, allow_discrete);
+        if (!interpolated_value)
+            return {};
+
+        return FunctionStyleValue::create(from_function.name(), interpolated_value.release_nonnull());
+    }
     case StyleValue::Type::Integer: {
         // https://drafts.csswg.org/css-values/#combine-integers
         // Interpolation of <integer> is defined as Vresult = round((1 - p) × VA + p × VB);
@@ -2501,6 +2515,19 @@ RefPtr<StyleValue const> composite_value(PropertyID property_id, StyleValue cons
         auto result = composite_raw_values(underlying_value.as_flex().flex().to_fr(), animated_value.as_flex().flex().to_fr());
         return FlexStyleValue::create(Flex::make_fr(result));
     }
+    case StyleValue::Type::Function: {
+        auto const& underlying_function = underlying_value.as_function();
+        auto const& animated_function = animated_value.as_function();
+
+        if (underlying_function.name() != animated_function.name())
+            return {};
+
+        auto composited_value = composite_value(property_id, underlying_function.value(), animated_function.value(), composite_operation);
+        if (!composited_value)
+            return {};
+
+        return FunctionStyleValue::create(underlying_function.name(), composited_value.release_nonnull());
+    }
     case StyleValue::Type::GridTrackSizeList: {
         auto underlying_list = underlying_value.as_grid_track_size_list().grid_track_size_list();
         auto animated_list = animated_value.as_grid_track_size_list().grid_track_size_list();

Libraries/LibWeb/CSS/StyleValues/FunctionStyleValue.cpp

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2026, Callum Law <callumlaw1709@outlook.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "FunctionStyleValue.h"
+
+namespace Web::CSS {
+
+ValueComparingNonnullRefPtr<StyleValue const> FunctionStyleValue::absolutized(ComputationContext const& context) const
+{
+    auto absolutized_value = m_value->absolutized(context);
+
+    if (absolutized_value == m_value)
+        return *this;
+
+    return FunctionStyleValue::create(m_name, absolutized_value);
+}
+
+void FunctionStyleValue::serialize(StringBuilder& builder, SerializationMode mode) const
+{
+    builder.append(m_name);
+    builder.append('(');
+    m_value->serialize(builder, mode);
+    builder.append(')');
+}
+
+}

Libraries/LibWeb/CSS/StyleValues/FunctionStyleValue.h

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2026, Callum Law <callumlaw1709@outlook.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/StyleValues/StyleValue.h>
+
+namespace Web::CSS {
+
+class FunctionStyleValue : public StyleValueWithDefaultOperators<FunctionStyleValue> {
+public:
+    static NonnullRefPtr<FunctionStyleValue> create(FlyString name, NonnullRefPtr<StyleValue const> value)
+    {
+        return adopt_ref(*new FunctionStyleValue(move(name), move(value)));
+    }
+
+    FlyString const& name() const { return m_name; }
+    NonnullRefPtr<StyleValue const> const& value() const { return m_value; }
+
+    virtual ValueComparingNonnullRefPtr<StyleValue const> absolutized(ComputationContext const&) const override;
+    virtual void serialize(StringBuilder&, SerializationMode) const override;
+
+    bool properties_equal(FunctionStyleValue const& other) const { return m_name == other.m_name && m_value == other.m_value; }
+
+    virtual bool is_computationally_independent() const override { return m_value->is_computationally_independent(); }
+
+private:
+    FunctionStyleValue(FlyString name, NonnullRefPtr<StyleValue const> value)
+        : StyleValueWithDefaultOperators(Type::Function)
+        , m_name(move(name))
+        , m_value(move(value))
+    {
+    }
+
+    virtual ~FunctionStyleValue() override = default;
+
+    FlyString m_name;
+    ValueComparingNonnullRefPtr<StyleValue const> m_value;
+};
+
+}

Libraries/LibWeb/CSS/StyleValues/StyleValue.cpp

@@ -45,6 +45,7 @@
 #include <LibWeb/CSS/StyleValues/FontStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FontVariantAlternatesFunctionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FrequencyStyleValue.h>
+#include <LibWeb/CSS/StyleValues/FunctionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridAutoFlowStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>

Libraries/LibWeb/CSS/StyleValues/StyleValue.h

@@ -59,6 +59,7 @@ namespace Web::CSS {
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Edge, edge, EdgeStyleValue)                                                                               \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(FilterValueList, filter_value_list, FilterValueListStyleValue)                                            \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(FitContent, fit_content, FitContentStyleValue)                                                            \
+    __ENUMERATE_CSS_STYLE_VALUE_TYPE(Function, function, FunctionStyleValue)                                                                   \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Flex, flex, FlexStyleValue)                                                                               \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(FontSource, font_source, FontSourceStyleValue)                                                            \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(FontStyle, font_style, FontStyleStyleValue)                                                               \

Libraries/LibWeb/Forward.h

@@ -332,6 +332,7 @@ class FontVariantAlternatesFunctionStyleValue;
 class Frequency;
 class FrequencyPercentage;
 class FrequencyStyleValue;
+class FunctionStyleValue;
 class GridAutoFlowStyleValue;
 class GridLineNames;
 class GridMinMax;