LibWeb: Implement basic CSS random() function

At the moment this is limited to only fixed value sharing and does not
support step values

Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp

@@ -31,6 +31,7 @@
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
+#include <LibWeb/CSS/StyleValues/RandomValueSharingStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 
@@ -284,6 +285,11 @@ static String serialize_a_math_function(CalculationNode const& fn, CalculationCo
         }
     }
 
+    // AD-HOC: We serialize random() directly since it has abnormal children (e.g. m_random_value_sharing which is not a
+    //         calculation node).
+    if (fn.type() == CalculationNode::Type::Random)
+        return as<RandomCalculationNode>(fn).to_string(context, serialization_mode);
+
     // 3. If the calculation tree’s root node is a numeric value, or a calc-operator node, let s be a string initially
     //    containing "calc(".
     //    Otherwise, let s be a string initially containing the name of the root node, lowercased (such as "sin" or
@@ -572,6 +578,8 @@ StringView CalculationNode::name() const
         return "log"sv;
     case Type::Exp:
         return "exp"sv;
+    case Type::Random:
+        return "random"sv;
     case Type::Round:
         return "round"sv;
     case Type::Mod:
@@ -2434,6 +2442,134 @@ bool ModCalculationNode::equals(CalculationNode const& other) const
         && m_y->equals(*static_cast<ModCalculationNode const&>(other).m_y);
 }
 
+NonnullRefPtr<RandomCalculationNode const> RandomCalculationNode::create(NonnullRefPtr<RandomValueSharingStyleValue const> random_value_sharing, NonnullRefPtr<CalculationNode const> minimum, NonnullRefPtr<CalculationNode const> maximum)
+{
+    Optional<NumericType> numeric_type = add_the_types(*minimum, *maximum);
+
+    return adopt_ref(*new (nothrow) RandomCalculationNode(move(random_value_sharing), move(minimum), move(maximum), move(numeric_type)));
+}
+
+RandomCalculationNode::RandomCalculationNode(NonnullRefPtr<RandomValueSharingStyleValue const> random_value_sharing, NonnullRefPtr<CalculationNode const> minimum, NonnullRefPtr<CalculationNode const> maximum, Optional<NumericType> numeric_type)
+    : CalculationNode(Type::Random, move(numeric_type))
+    , m_random_value_sharing(move(random_value_sharing))
+    , m_minimum(move(minimum))
+    , m_maximum(move(maximum))
+{
+}
+
+RandomCalculationNode::~RandomCalculationNode() = default;
+
+bool RandomCalculationNode::contains_percentage() const
+{
+    return m_minimum->contains_percentage() || m_maximum->contains_percentage();
+}
+
+NonnullRefPtr<CalculationNode const> RandomCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
+{
+    ValueComparingRefPtr<RandomValueSharingStyleValue const> simplified_random_value_sharing;
+
+    // When we are in the absolutization process we should absolutize m_random_value_sharing
+    if (resolution_context.length_resolution_context.has_value()) {
+        ComputationContext computation_context {
+            .length_resolution_context = resolution_context.length_resolution_context.value(),
+            .abstract_element = resolution_context.abstract_element
+        };
+
+        simplified_random_value_sharing = m_random_value_sharing->absolutized(computation_context)->as_random_value_sharing();
+    } else {
+        simplified_random_value_sharing = m_random_value_sharing;
+    }
+
+    ValueComparingNonnullRefPtr<CalculationNode const> simplified_minimum = simplify_a_calculation_tree(m_minimum, context, resolution_context);
+    ValueComparingNonnullRefPtr<CalculationNode const> simplified_maximum = simplify_a_calculation_tree(m_maximum, context, resolution_context);
+
+    if (simplified_random_value_sharing == m_random_value_sharing && simplified_minimum == m_minimum && simplified_maximum == m_maximum)
+        return *this;
+
+    return RandomCalculationNode::create(simplified_random_value_sharing.release_nonnull(), move(simplified_minimum), move(simplified_maximum));
+}
+
+// https://drafts.csswg.org/css-values-5/#random-evaluation
+Optional<CalculatedStyleValue::CalculationResult> RandomCalculationNode::run_operation_if_possible(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
+{
+    // NB: We don't want to resolve this before computation time even if it's possible
+    if (!resolution_context.abstract_element.has_value() && !resolution_context.length_resolution_context.has_value() && resolution_context.percentage_basis.has<Empty>())
+        return {};
+
+    auto random_base_value = m_random_value_sharing->random_base_value();
+
+    auto minimum = try_get_value_with_canonical_unit(m_minimum, context, resolution_context);
+    auto maximum = try_get_value_with_canonical_unit(m_maximum, context, resolution_context);
+
+    if (!minimum.has_value() || !maximum.has_value())
+        return {};
+
+    auto minimum_value = minimum->value();
+    auto maximum_value = maximum->value();
+
+    // https://drafts.csswg.org/css-values-5/#random-infinities
+    // If the maximum value is less than the minimum value, it behaves as if it’s equal to the minimum value.
+    if (maximum_value < minimum_value)
+        maximum_value = minimum_value;
+
+    // https://drafts.csswg.org/css-values-5/#random-infinities
+    // In random(A, B), if A is infinite, the result is infinite.
+    if (isinf(minimum_value))
+        return CalculatedStyleValue::CalculationResult { AK::Infinity<double>, numeric_type() };
+
+    // If A is finite, but the difference between A and B is either infinite or large enough to be treated as infinite
+    // in the user agent, the result is NaN.
+    if (isinf(maximum_value))
+        return CalculatedStyleValue::CalculationResult { AK::NaN<double>, numeric_type() };
+
+    // Note: As usual for math functions, if any argument calculation is NaN, the result is NaN.
+    if (isnan(minimum_value) || isnan(maximum_value))
+        return CalculatedStyleValue::CalculationResult { AK::NaN<double>, numeric_type() };
+
+    // Given a random function with a random base value R, the value of the function is:
+    // - for a random() function with min and max, but no step
+    // Return min + R * (max - min)
+    return CalculatedStyleValue::CalculationResult {
+        minimum_value + (random_base_value * (maximum_value - minimum_value)),
+        numeric_type()
+    };
+}
+
+String RandomCalculationNode::to_string(CalculationContext const& context, SerializationMode serialization_mode) const
+{
+    StringBuilder builder;
+
+    builder.append("random("sv);
+    builder.appendff("{}, ", m_random_value_sharing->to_string(serialization_mode));
+    builder.appendff("{}, ", serialize_a_calculation_tree(m_minimum, context, serialization_mode));
+    builder.appendff("{})", serialize_a_calculation_tree(m_maximum, context, serialization_mode));
+
+    return builder.to_string_without_validation();
+}
+
+void RandomCalculationNode::dump(StringBuilder& builder, int indent) const
+{
+    builder.appendff("{: >{}}RANDOM:\n", "", indent);
+    builder.appendff("{}\n", m_random_value_sharing->to_string(SerializationMode::Normal));
+    m_minimum->dump(builder, indent + 2);
+    m_maximum->dump(builder, indent + 2);
+}
+
+bool RandomCalculationNode::equals(CalculationNode const& other) const
+{
+    if (this == &other)
+        return true;
+
+    if (type() != other.type())
+        return false;
+
+    auto const& other_random = as<RandomCalculationNode>(other);
+
+    return m_random_value_sharing == other_random.m_random_value_sharing
+        && m_minimum == other_random.m_minimum
+        && m_maximum == other_random.m_maximum;
+}
+
 NonnullRefPtr<RemCalculationNode const> RemCalculationNode::create(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y)
 {
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation

Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h

@@ -190,6 +190,10 @@ public:
         Mod,
         Rem,
 
+        // Random value generation
+        // https://drafts.csswg.org/css-values-5/#random
+        Random,
+
         // Non-math functions
         NonMathFunction
     };
@@ -228,6 +232,7 @@ public:
         case Type::Round:
         case Type::Mod:
         case Type::Rem:
+        case Type::Random:
             return true;
 
         default:
@@ -747,6 +752,30 @@ private:
     NonnullRefPtr<CalculationNode const> m_y;
 };
 
+class RandomCalculationNode final : public CalculationNode {
+public:
+    static NonnullRefPtr<RandomCalculationNode const> create(NonnullRefPtr<RandomValueSharingStyleValue const>, NonnullRefPtr<CalculationNode const> minimum, NonnullRefPtr<CalculationNode const> maximum);
+    ~RandomCalculationNode();
+
+    virtual bool contains_percentage() const override;
+    virtual NonnullRefPtr<CalculationNode const> with_simplified_children(CalculationContext const&, CalculationResolutionContext const&) const override;
+    virtual Optional<CalculatedStyleValue::CalculationResult> run_operation_if_possible(CalculationContext const&, CalculationResolutionContext const&) const override;
+
+    // NOTE: We don't return children here as serialization is handled ad-hoc
+    virtual Vector<NonnullRefPtr<CalculationNode const>> children() const override { return {}; }
+
+    String to_string(CalculationContext const&, SerializationMode serialization_mode) const;
+
+    virtual void dump(StringBuilder&, int indent) const override;
+    virtual bool equals(CalculationNode const&) const override;
+
+private:
+    RandomCalculationNode(NonnullRefPtr<RandomValueSharingStyleValue const>, NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<NumericType>);
+    ValueComparingNonnullRefPtr<RandomValueSharingStyleValue const> m_random_value_sharing;
+    ValueComparingNonnullRefPtr<CalculationNode const> m_minimum;
+    ValueComparingNonnullRefPtr<CalculationNode const> m_maximum;
+};
+
 class RemCalculationNode final : public CalculationNode {
 public:
     static NonnullRefPtr<RemCalculationNode const> create(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>);

Libraries/LibWeb/CSS/StyleValues/RandomValueSharingStyleValue.cpp

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2025, Callum Law <callumlaw1709@outlook.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "RandomValueSharingStyleValue.h"
+#include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
+#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
+
+namespace Web::CSS {
+
+ValueComparingNonnullRefPtr<StyleValue const> RandomValueSharingStyleValue::absolutized(ComputationContext const& computation_context) const
+{
+    if (m_fixed_value) {
+        auto const& absolutized_fixed_value = m_fixed_value->absolutized(computation_context);
+
+        if (m_fixed_value == absolutized_fixed_value)
+            return *this;
+
+        return RandomValueSharingStyleValue::create_fixed(absolutized_fixed_value);
+    }
+
+    TODO();
+}
+
+double RandomValueSharingStyleValue::random_base_value() const
+{
+    VERIFY(m_fixed_value);
+    VERIFY(m_fixed_value->is_number() || (m_fixed_value->is_calculated() && m_fixed_value->as_calculated().resolves_to_number()));
+
+    if (m_fixed_value->is_number())
+        return m_fixed_value->as_number().number();
+
+    if (m_fixed_value->is_calculated())
+        return m_fixed_value->as_calculated().resolve_number({}).value();
+
+    VERIFY_NOT_REACHED();
+}
+
+String RandomValueSharingStyleValue::to_string(SerializationMode serialization_mode) const
+{
+    if (m_fixed_value)
+        return MUST(String::formatted("fixed {}", m_fixed_value->to_string(serialization_mode)));
+
+    TODO();
+}
+
+}

Libraries/LibWeb/CSS/StyleValues/RandomValueSharingStyleValue.h

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2025, Callum Law <callumlaw1709@outlook.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/Enums.h>
+#include <LibWeb/CSS/StyleValues/StyleValue.h>
+
+namespace Web::CSS {
+
+class RandomValueSharingStyleValue : public StyleValueWithDefaultOperators<RandomValueSharingStyleValue> {
+public:
+    static ValueComparingNonnullRefPtr<RandomValueSharingStyleValue const> create_fixed(NonnullRefPtr<StyleValue const> const& fixed_value)
+    {
+        return adopt_ref(*new (nothrow) RandomValueSharingStyleValue(fixed_value));
+    }
+
+    virtual ~RandomValueSharingStyleValue() override = default;
+
+    virtual ValueComparingNonnullRefPtr<StyleValue const> absolutized(ComputationContext const&) const override;
+
+    double random_base_value() const;
+
+    virtual String to_string(SerializationMode serialization_mode) const override;
+
+    bool properties_equal(RandomValueSharingStyleValue const& other) const
+    {
+        return m_fixed_value == other.m_fixed_value;
+    }
+
+private:
+    explicit RandomValueSharingStyleValue(RefPtr<StyleValue const> fixed_value)
+        : StyleValueWithDefaultOperators(Type::RandomValueSharing)
+        , m_fixed_value(move(fixed_value))
+    {
+    }
+
+    ValueComparingRefPtr<StyleValue const> m_fixed_value;
+};
+
+}

Libraries/LibWeb/CSS/StyleValues/StyleValue.cpp

@@ -55,6 +55,7 @@
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RadialGradientStyleValue.h>
+#include <LibWeb/CSS/StyleValues/RandomValueSharingStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>

Libraries/LibWeb/CSS/StyleValues/StyleValue.h

@@ -73,6 +73,7 @@ namespace Web::CSS {
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Percentage, percentage, PercentageStyleValue)                                    \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Position, position, PositionStyleValue)                                          \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(RadialGradient, radial_gradient, RadialGradientStyleValue)                       \
+    __ENUMERATE_CSS_STYLE_VALUE_TYPE(RandomValueSharing, random_value_sharing, RandomValueSharingStyleValue)          \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Ratio, ratio, RatioStyleValue)                                                   \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Rect, rect, RectStyleValue)                                                      \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(RepeatStyle, repeat_style, RepeatStyleStyleValue)                                \