LibWeb/CSS: Support calculated angles in conic-gradient()

Author: https://github.com/AtkinsSJ
Commit: 9a1352fc17
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6874
Reviewed-by: https://github.com/gmta ✅

Libraries/LibWeb/CSS/Parser/GradientParsing.cpp

@@ -1,7 +1,7 @@
 /*
  * Copyright (c) 2018-2022, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2020-2021, the SerenityOS developers.
- * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2021-2025, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  * Copyright (c) 2022, MacDue <macdue@dueutil.tech>
  *
@@ -10,6 +10,7 @@
 
 #include <AK/NonnullRawPtr.h>
 #include <LibWeb/CSS/Parser/Parser.h>
+#include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LinearGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
@@ -408,15 +409,12 @@ RefPtr<ConicGradientStyleValue const> Parser::parse_conic_gradient_function(Toke
     if (!tokens.has_next_token())
         return nullptr;
 
-    auto from_angle = Angle::make_degrees(0);
+    RefPtr<StyleValue const> from_angle;
     RefPtr<PositionStyleValue const> at_position;
     Optional<InterpolationMethod> maybe_interpolation_method;
 
     // conic-gradient( [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list> )
     NonnullRawPtr<ComponentValue const> token = tokens.next_token();
-    bool got_from_angle = false;
-    bool got_color_interpolation_method = false;
-    bool got_at_position = false;
     while (token->is(Token::Type::Ident)) {
         auto consume_identifier = [&](auto identifier) {
             auto token_string = token->token().ident();
@@ -430,42 +428,28 @@ RefPtr<ConicGradientStyleValue const> Parser::parse_conic_gradient_function(Toke
 
         if (consume_identifier("from"sv)) {
             // from [ <angle> | <zero> ]
-            if (got_from_angle || got_at_position)
+            if (from_angle || at_position)
                 return nullptr;
-            if (!tokens.has_next_token())
-                return nullptr;
-
-            auto const& angle_token = tokens.consume_a_token();
-            if (angle_token.is(Token::Type::Dimension)) {
-                auto angle = angle_token.token().dimension_value();
-                auto angle_unit = angle_token.token().dimension_unit();
-                auto angle_type = string_to_angle_unit(angle_unit);
-                if (!angle_type.has_value())
-                    return nullptr;
-
-                from_angle = Angle(angle, *angle_type);
-                got_from_angle = true;
-            } else if (angle_token.is(Token::Type::Number) && angle_token.token().number().value() == 0) {
-                from_angle = Angle::make_degrees(0);
-                got_from_angle = true;
+            if (auto maybe_angle = parse_angle_value(tokens)) {
+                from_angle = maybe_angle.release_nonnull();
+            } else if (auto peek_token = tokens.next_token(); peek_token.is(Token::Type::Number) && peek_token.token().number().value() == 0) {
+                tokens.discard_a_token(); // 0
+                from_angle = AngleStyleValue::create(Angle::make_degrees(0));
             } else {
                 return nullptr;
             }
         } else if (consume_identifier("at"sv)) {
             // at <position>
-            if (got_at_position)
+            if (at_position)
                 return nullptr;
             auto position = parse_position_value(tokens);
             if (!position)
                 return nullptr;
-            at_position = position;
-            got_at_position = true;
+            at_position = move(position);
         } else if (token->token().ident().equals_ignoring_ascii_case("in"sv)) {
             // <color-interpolation-method>
-            if (got_color_interpolation_method)
+            if (maybe_interpolation_method.has_value())
                 return nullptr;
-            got_color_interpolation_method = true;
-
             maybe_interpolation_method = parse_interpolation_method(tokens);
             if (!maybe_interpolation_method.has_value())
                 return nullptr;
@@ -481,7 +465,7 @@ RefPtr<ConicGradientStyleValue const> Parser::parse_conic_gradient_function(Toke
     tokens.discard_whitespace();
     if (!tokens.has_next_token())
         return nullptr;
-    if ((got_from_angle || got_at_position || got_color_interpolation_method) && !tokens.consume_a_token().is(Token::Type::Comma))
+    if ((from_angle || at_position || maybe_interpolation_method.has_value()) && !tokens.consume_a_token().is(Token::Type::Comma))
         return nullptr;
 
     auto color_stops = parse_angular_color_stop_list(tokens);
@@ -492,7 +476,7 @@ RefPtr<ConicGradientStyleValue const> Parser::parse_conic_gradient_function(Toke
         at_position = PositionStyleValue::create_center();
 
     transaction.commit();
-    return ConicGradientStyleValue::create(from_angle, at_position.release_nonnull(), move(*color_stops), repeating_gradient, maybe_interpolation_method);
+    return ConicGradientStyleValue::create(move(from_angle), at_position.release_nonnull(), move(*color_stops), repeating_gradient, maybe_interpolation_method);
 }
 
 RefPtr<RadialGradientStyleValue const> Parser::parse_radial_gradient_function(TokenStream<ComponentValue>& outer_tokens)

Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.cpp

@@ -8,6 +8,7 @@
  */
 
 #include "ConicGradientStyleValue.h"
+#include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
 #include <LibWeb/Layout/Node.h>
 #include <LibWeb/Painting/DisplayListRecorder.h>
@@ -20,12 +21,12 @@ String ConicGradientStyleValue::to_string(SerializationMode mode) const
     if (is_repeating())
         builder.append("repeating-"sv);
     builder.append("conic-gradient("sv);
-    bool has_from_angle = m_properties.from_angle.to_degrees() != 0;
+    bool has_from_angle = m_properties.from_angle;
     bool has_at_position = !m_properties.position->is_center();
     bool has_color_space = m_properties.interpolation_method.has_value() && m_properties.interpolation_method.value().color_space != InterpolationMethod::default_color_space(m_properties.color_syntax);
 
     if (has_from_angle)
-        builder.appendff("from {}", m_properties.from_angle.to_string());
+        builder.appendff("from {}", m_properties.from_angle->to_string(mode));
     if (has_at_position) {
         if (has_from_angle)
             builder.append(' ');
@@ -72,9 +73,18 @@ bool ConicGradientStyleValue::equals(StyleValue const& other) const
     return m_properties == other_gradient.m_properties;
 }
 
-float ConicGradientStyleValue::angle_degrees() const
+float ConicGradientStyleValue::angle_degrees(CalculationResolutionContext const& context) const
 {
-    return m_properties.from_angle.to_degrees();
+    if (!m_properties.from_angle)
+        return 0;
+    if (m_properties.from_angle->is_angle())
+        return m_properties.from_angle->as_angle().angle().to_degrees();
+    if (m_properties.from_angle->is_calculated()) {
+        if (auto maybe_angle = m_properties.from_angle->as_calculated().resolve_angle(context); maybe_angle.has_value())
+            return maybe_angle->to_degrees();
+        return 0;
+    }
+    VERIFY_NOT_REACHED();
 }
 
 }

Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h

@@ -10,6 +10,7 @@
 #pragma once
 
 #include <LibWeb/CSS/Angle.h>
+#include <LibWeb/CSS/CalculatedOr.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/Painting/GradientPainting.h>
 
@@ -17,11 +18,11 @@ namespace Web::CSS {
 
 class ConicGradientStyleValue final : public AbstractImageStyleValue {
 public:
-    static ValueComparingNonnullRefPtr<ConicGradientStyleValue const> create(Angle from_angle, ValueComparingNonnullRefPtr<PositionStyleValue const> position, Vector<AngularColorStopListElement> color_stop_list, GradientRepeating repeating, Optional<InterpolationMethod> interpolation_method)
+    static ValueComparingNonnullRefPtr<ConicGradientStyleValue const> create(ValueComparingRefPtr<StyleValue const> from_angle, ValueComparingNonnullRefPtr<PositionStyleValue const> position, Vector<AngularColorStopListElement> color_stop_list, GradientRepeating repeating, Optional<InterpolationMethod> interpolation_method)
     {
         VERIFY(!color_stop_list.is_empty());
         bool any_non_legacy = color_stop_list.find_first_index_if([](auto const& stop) { return !stop.color_stop.color->is_keyword() && stop.color_stop.color->as_color().color_syntax() == ColorSyntax::Modern; }).has_value();
-        return adopt_ref(*new (nothrow) ConicGradientStyleValue(from_angle, move(position), move(color_stop_list), repeating, interpolation_method, any_non_legacy ? ColorSyntax::Modern : ColorSyntax::Legacy));
+        return adopt_ref(*new (nothrow) ConicGradientStyleValue(move(from_angle), move(position), move(color_stop_list), repeating, move(interpolation_method), any_non_legacy ? ColorSyntax::Modern : ColorSyntax::Legacy));
     }
 
     virtual String to_string(SerializationMode) const override;
@@ -43,7 +44,7 @@ public:
         return InterpolationMethod { .color_space = InterpolationMethod::default_color_space(m_properties.color_syntax) };
     }
 
-    float angle_degrees() const;
+    float angle_degrees(CalculationResolutionContext const&) const;
 
     bool is_paintable() const override { return true; }
 
@@ -54,14 +55,14 @@ public:
     bool is_repeating() const { return m_properties.repeating == GradientRepeating::Yes; }
 
 private:
-    ConicGradientStyleValue(Angle from_angle, ValueComparingNonnullRefPtr<PositionStyleValue const> position, Vector<AngularColorStopListElement> color_stop_list, GradientRepeating repeating, Optional<InterpolationMethod> interpolation_method, ColorSyntax color_syntax)
+    ConicGradientStyleValue(ValueComparingRefPtr<StyleValue const> from_angle, ValueComparingNonnullRefPtr<PositionStyleValue const> position, Vector<AngularColorStopListElement> color_stop_list, GradientRepeating repeating, Optional<InterpolationMethod> interpolation_method, ColorSyntax color_syntax)
         : AbstractImageStyleValue(Type::ConicGradient)
-        , m_properties { .from_angle = from_angle, .position = move(position), .color_stop_list = move(color_stop_list), .repeating = repeating, .interpolation_method = interpolation_method, .color_syntax = color_syntax }
+        , m_properties { .from_angle = move(from_angle), .position = move(position), .color_stop_list = move(color_stop_list), .repeating = repeating, .interpolation_method = interpolation_method, .color_syntax = color_syntax }
     {
     }
 
     struct Properties {
-        Angle from_angle;
+        ValueComparingRefPtr<StyleValue const> from_angle;
         ValueComparingNonnullRefPtr<PositionStyleValue const> position;
         Vector<AngularColorStopListElement> color_stop_list;
         GradientRepeating repeating;

Libraries/LibWeb/Painting/GradientPainting.cpp

@@ -6,6 +6,7 @@
 
 #include <AK/Math.h>
 #include <LibGfx/Gradients.h>
+#include <LibWeb/CSS/CalculationResolutionContext.h>
 #include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LinearGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
@@ -132,7 +133,10 @@ ConicGradientData resolve_conic_gradient_data(Layout::NodeWithStyle const& node,
             return angle_percentage.resolved(node, one_turn).to_degrees() / one_turn.to_degrees();
         },
         conic_gradient.is_repeating());
-    return { conic_gradient.angle_degrees(), resolved_color_stops, conic_gradient.interpolation_method() };
+    CSS::CalculationResolutionContext context {
+        .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(node),
+    };
+    return { conic_gradient.angle_degrees(context), resolved_color_stops, conic_gradient.interpolation_method() };
 }
 
 RadialGradientData resolve_radial_gradient_data(Layout::NodeWithStyle const& node, CSSPixelSize gradient_size, CSS::RadialGradientStyleValue const& radial_gradient)

Tests/LibWeb/Ref/expected/wpt-import/css/css-images/gradient/conic-gradient-001-ref.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tests the maximum value of color stops in conic-gradient().</title>
+<style>
+    body {
+        background-color: lightblue;
+    }
+
+    .test {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    li {
+        width: 100px;
+        height: 100px;
+        margin-right: 30px;
+        margin-bottom: 30px;
+        outline: 1px solid black;
+        font-size: 14px;
+        text-align: center;
+        background: lime;
+    }
+</style>
+<p>Should be lime in the background of all boxes.</p>
+<ol class="test">
+    <li>0 999999999%</li>
+    <li>0 calc(Infinity * 0%)</li>
+    <li>0 calc(Infinity * 1%)</li>
+    <li>calc(Infinity * 0%) 100%</li>
+    <li>calc(Infinity * 1%) 100%</li>
+    <li>calc(Infinity * -1%) 100%</li>
+    <li>0% calc(Infinity * 1%)</li>
+    <li>from calc(Infinity * 1deg)</li>
+    <li>from calc(Infinity * 0deg)</li>
+</ol>

Tests/LibWeb/Ref/input/wpt-import/css/css-images/gradient/conic-gradient-001.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
+<link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
+<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+<link rel="match" href="../../../../../expected/wpt-import/css/css-images/gradient/conic-gradient-001-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-40000">
+<title>Tests the maximum value of color stops in conic-gradient().</title>
+<style>
+    body {
+        background-color: lightblue;
+    }
+
+    .test {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    li {
+        width: 100px;
+        height: 100px;
+        margin-right: 30px;
+        margin-bottom: 30px;
+        outline: 1px solid black;
+        font-size: 14px;
+        text-align: center;
+        background: red;
+    }
+
+    li:nth-child(1) {
+        background: conic-gradient(lime 0 999999999%);
+    }
+
+    li:nth-child(2) {
+        background: conic-gradient(in hsl, lime 0 calc(Infinity * 0%));
+    }
+
+    li:nth-child(3) {
+        background: conic-gradient(in lch, lime 0 calc(Infinity * 1%));
+    }
+
+    li:nth-child(4) {
+        background: conic-gradient(in oklab, lime calc(Infinity * 0%) 100%);
+    }
+
+    li:nth-child(5) {
+        background: conic-gradient(in srgb, lime calc(Infinity * 1%) 100%);
+    }
+
+    li:nth-child(6) {
+        background: conic-gradient(in srgb, lime calc(Infinity * -1%) 100%);
+    }
+
+    li:nth-child(7) {
+        background: conic-gradient(in srgb, lime 0 calc(Infinity * 1%));
+    }
+
+    li:nth-child(8) {
+        background: conic-gradient(from calc(Infinity * 1deg), lime 0 100%);
+    }
+
+    li:nth-child(9) {
+        background: conic-gradient(from calc(Infinity * 0deg), lime 0 100%);
+    }
+</style>
+
+<p>Should be lime in the background of all boxes.</p>
+<ol class="test">
+    <li>0 999999999%</li>
+    <li>0 calc(Infinity * 0%)</li>
+    <li>0 calc(Infinity * 1%)</li>
+    <li>calc(Infinity * 0%) 100%</li>
+    <li>calc(Infinity * 1%) 100%</li>
+    <li>calc(Infinity * -1%) 100%</li>
+    <li>0% calc(Infinity * 1%)</li>
+    <li>from calc(Infinity * 1deg)</li>
+    <li>from calc(Infinity * 0deg)</li>
+</ol>