LibWeb: Parse scroll() for the animation-timeline CSS property

Author: https://github.com/Calme1709
Commit: 7d70714eac
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CMakeLists.txt

@@ -268,6 +268,7 @@ set(SOURCES
     CSS/StyleValues/RectStyleValue.cpp
     CSS/StyleValues/RepeatStyleStyleValue.cpp
     CSS/StyleValues/ScrollbarColorStyleValue.cpp
+    CSS/StyleValues/ScrollFunctionStyleValue.cpp
     CSS/StyleValues/ShadowStyleValue.cpp
     CSS/StyleValues/ShorthandStyleValue.cpp
     CSS/StyleValues/StyleValue.cpp

Libraries/LibWeb/CSS/Enums.json

@@ -721,6 +721,11 @@
     "thin",
     "none"
   ],
+  "scroller": [
+    "root",
+    "nearest",
+    "self"
+  ],
   "shape-box": [
     "content-box",
     "padding-box",

Libraries/LibWeb/CSS/Keywords.json

@@ -450,6 +450,7 @@
   "revert-layer",
   "ridge",
   "right",
+  "root",
   "rotate-left",
   "rotate-right",
   "round",
@@ -480,6 +481,7 @@
   "searchfield",
   "selecteditem",
   "selecteditemtext",
+  "self",
   "self-block",
   "self-block-end",
   "self-block-start",

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -444,6 +444,7 @@ private:
     RefPtr<StyleValue const> parse_time_percentage_value(TokenStream<ComponentValue>&);
 
     RefPtr<StyleValue const> parse_view_timeline_inset_value(TokenStream<ComponentValue>&);
+    RefPtr<ScrollFunctionStyleValue const> parse_scroll_function_value(TokenStream<ComponentValue>&);
 
     using ParseFunction = AK::Function<RefPtr<StyleValue const>(TokenStream<ComponentValue>&)>;
     RefPtr<StyleValue const> parse_comma_separated_value_list(TokenStream<ComponentValue>&, ParseFunction);

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -248,6 +248,8 @@ Optional<Parser::PropertyAndValue> Parser::parse_css_value_for_properties(Readon
         return parsed.release_value();
     if (auto parsed = parse_for_type(ValueType::Rect); parsed.has_value())
         return parsed.release_value();
+    if (auto parsed = parse_for_type(ValueType::ScrollFunction); parsed.has_value())
+        return parsed.release_value();
     if (auto parsed = parse_for_type(ValueType::String); parsed.has_value())
         return parsed.release_value();
     if (auto parsed = parse_for_type(ValueType::TransformFunction); parsed.has_value())

Libraries/LibWeb/CSS/Parser/ValueParsing.cpp

@@ -64,6 +64,7 @@
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
+#include <LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StringStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
 #include <LibWeb/CSS/StyleValues/SuperellipseStyleValue.h>
@@ -1429,6 +1430,61 @@ RefPtr<StyleValue const> Parser::parse_keyword_value(TokenStream<ComponentValue>
     return nullptr;
 }
 
+// https://drafts.csswg.org/scroll-animations-1/#funcdef-scroll
+RefPtr<ScrollFunctionStyleValue const> Parser::parse_scroll_function_value(TokenStream<ComponentValue>& tokens)
+{
+    // <scroll()> = scroll( [ <scroller> || <axis> ]? )
+    auto transaction = tokens.begin_transaction();
+    auto const& function_token = tokens.consume_a_token();
+    if (!function_token.is_function("scroll"sv))
+        return nullptr;
+
+    Optional<Scroller> scroller;
+    Optional<Axis> axis;
+
+    auto argument_tokens = TokenStream { function_token.function().value };
+
+    while (argument_tokens.has_next_token()) {
+        tokens.discard_whitespace();
+
+        if (!argument_tokens.has_next_token())
+            break;
+
+        auto keyword_value = parse_keyword_value(argument_tokens);
+
+        if (!keyword_value)
+            return nullptr;
+
+        if (auto maybe_scroller = keyword_to_scroller(keyword_value->to_keyword()); maybe_scroller.has_value()) {
+            if (scroller.has_value())
+                return nullptr;
+
+            scroller = maybe_scroller;
+            continue;
+        }
+
+        if (auto maybe_axis = keyword_to_axis(keyword_value->to_keyword()); maybe_axis.has_value()) {
+            if (axis.has_value())
+                return nullptr;
+
+            axis = maybe_axis;
+            continue;
+        }
+
+        return nullptr;
+    }
+
+    // By default, scroll() references the block axis of the nearest ancestor scroll container.
+    if (!scroller.has_value())
+        scroller = Scroller::Nearest;
+
+    if (!axis.has_value())
+        axis = Axis::Block;
+
+    transaction.commit();
+    return ScrollFunctionStyleValue::create(scroller.value(), axis.value());
+}
+
 // https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
 RefPtr<StyleValue const> Parser::parse_rect_value(TokenStream<ComponentValue>& tokens)
 {
@@ -5074,6 +5130,8 @@ RefPtr<StyleValue const> Parser::parse_value(ValueType value_type, TokenStream<C
         return parse_rect_value(tokens);
     case ValueType::Resolution:
         return parse_resolution_value(tokens);
+    case ValueType::ScrollFunction:
+        return parse_scroll_function_value(tokens);
     case ValueType::String:
         return parse_string_value(tokens);
     case ValueType::Time:

Libraries/LibWeb/CSS/Properties.json

@@ -345,13 +345,14 @@
     "inherited": false,
     "initial": "auto",
     "valid-types": [
-      "dashed-ident"
+      "dashed-ident",
+      "scroll-function"
     ],
     "valid-identifiers": [
       "auto",
       "none"
     ],
-    "__comment": "FIXME: animation properties should be coordinating-lists, FIXME: support scroll() and view() functions",
+    "__comment": "FIXME: animation properties should be coordinating-lists, FIXME: support view() functions",
     "multiplicity": "single"
   },
   "animation-timing-function": {

Libraries/LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.cpp

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2025, Callum Law <callumlaw1709@outlook.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "ScrollFunctionStyleValue.h"
+
+namespace Web::CSS {
+
+String ScrollFunctionStyleValue::to_string(SerializationMode) const
+{
+    StringBuilder builder;
+    builder.append("scroll("sv);
+
+    if (m_scroller != Scroller::Nearest)
+        builder.append(CSS::to_string(m_scroller));
+
+    if (m_axis != Axis::Block) {
+        if (m_scroller != Scroller::Nearest)
+            builder.append(' ');
+        builder.append(CSS::to_string(m_axis));
+    }
+
+    builder.append(')');
+    return builder.to_string_without_validation();
+}
+
+}

Libraries/LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h

@@ -0,0 +1,40 @@
+/*
+ * 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 ScrollFunctionStyleValue final : public StyleValueWithDefaultOperators<ScrollFunctionStyleValue> {
+public:
+    static ValueComparingNonnullRefPtr<ScrollFunctionStyleValue const> create(Scroller scroller, Axis axis)
+    {
+        return adopt_ref(*new ScrollFunctionStyleValue(scroller, axis));
+    }
+    virtual ~ScrollFunctionStyleValue() override = default;
+
+    virtual String to_string(SerializationMode) const override;
+    bool properties_equal(ScrollFunctionStyleValue const& other) const { return m_scroller == other.m_scroller && m_axis == other.m_axis; }
+
+    Scroller scroller() const { return m_scroller; }
+    Axis axis() const { return m_axis; }
+
+private:
+    explicit ScrollFunctionStyleValue(Scroller scroller, Axis axis)
+        : StyleValueWithDefaultOperators(Type::ScrollFunction)
+        , m_scroller(scroller)
+        , m_axis(axis)
+    {
+    }
+
+    Scroller m_scroller;
+    Axis m_axis;
+};
+
+}

Libraries/LibWeb/CSS/StyleValues/StyleValue.cpp

@@ -59,6 +59,7 @@
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
+#include <LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>

Libraries/LibWeb/CSS/StyleValues/StyleValue.h

@@ -79,6 +79,7 @@ namespace Web::CSS {
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Resolution, resolution, ResolutionStyleValue)                                    \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(ScrollbarColor, scrollbar_color, ScrollbarColorStyleValue)                       \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(ScrollbarGutter, scrollbar_gutter, ScrollbarGutterStyleValue)                    \
+    __ENUMERATE_CSS_STYLE_VALUE_TYPE(ScrollFunction, scroll_function, ScrollFunctionStyleValue)                       \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Shadow, shadow, ShadowStyleValue)                                                \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(Shorthand, shorthand, ShorthandStyleValue)                                       \
     __ENUMERATE_CSS_STYLE_VALUE_TYPE(String, string, StringStyleValue)                                                \

Libraries/LibWeb/CSS/ValueType.cpp

@@ -67,6 +67,8 @@ Optional<ValueType> value_type_from_string(StringView string)
         return ValueType::Rect;
     if (string.equals_ignoring_ascii_case("resolution"sv))
         return ValueType::Resolution;
+    if (string.equals_ignoring_ascii_case("scroll-function"sv))
+        return ValueType::ScrollFunction;
     if (string.equals_ignoring_ascii_case("string"sv))
         return ValueType::String;
     if (string.equals_ignoring_ascii_case("time"sv))
@@ -147,6 +149,8 @@ StringView value_type_to_string(ValueType value_type)
         return "Rect"sv;
     case Web::CSS::ValueType::Resolution:
         return "Resolution"sv;
+    case Web::CSS::ValueType::ScrollFunction:
+        return "ScrollFunction"sv;
     case Web::CSS::ValueType::String:
         return "String"sv;
     case Web::CSS::ValueType::Time:

Libraries/LibWeb/CSS/ValueType.h

@@ -43,6 +43,7 @@ enum class ValueType : u8 {
     Ratio,
     Rect,
     Resolution,
+    ScrollFunction,
     String,
     Time,
     TimePercentage,

Libraries/LibWeb/Forward.h

@@ -366,6 +366,7 @@ class ShadowStyleValue;
 class ShorthandStyleValue;
 class Size;
 class ScrollbarColorStyleValue;
+class ScrollFunctionStyleValue;
 class StringStyleValue;
 class StyleComputer;
 class StylePropertyMap;

Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/animation-timeline-computed.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 44 tests
 
-13 Pass
+27 Pass
-31 Fail
+17 Fail
 Pass	Property animation-timeline value 'initial'
 Pass	Property animation-timeline value 'inherit'
 Pass	Property animation-timeline value 'unset'
@@ -19,20 +19,20 @@ Pass	Property animation-timeline value '--test1, --test2'
 Pass	Property animation-timeline value '--test1, --test2, none, --test3, auto'
 Pass	The animation-timeline property shows up in CSSStyleDeclaration enumeration
 Pass	The animation-timeline property shows up in CSSStyleDeclaration.cssText
-Fail	Property animation-timeline value 'scroll()'
+Pass	Property animation-timeline value 'scroll()'
-Fail	Property animation-timeline value 'scroll(block)'
+Pass	Property animation-timeline value 'scroll(block)'
-Fail	Property animation-timeline value 'scroll(inline)'
+Pass	Property animation-timeline value 'scroll(inline)'
-Fail	Property animation-timeline value 'scroll(x)'
+Pass	Property animation-timeline value 'scroll(x)'
-Fail	Property animation-timeline value 'scroll(y)'
+Pass	Property animation-timeline value 'scroll(y)'
-Fail	Property animation-timeline value 'scroll(root)'
+Pass	Property animation-timeline value 'scroll(root)'
-Fail	Property animation-timeline value 'scroll(nearest)'
+Pass	Property animation-timeline value 'scroll(nearest)'
-Fail	Property animation-timeline value 'scroll(self)'
+Pass	Property animation-timeline value 'scroll(self)'
-Fail	Property animation-timeline value 'scroll(self), scroll(nearest)'
+Pass	Property animation-timeline value 'scroll(self), scroll(nearest)'
-Fail	Property animation-timeline value 'scroll(inline nearest)'
+Pass	Property animation-timeline value 'scroll(inline nearest)'
-Fail	Property animation-timeline value 'scroll(nearest inline)'
+Pass	Property animation-timeline value 'scroll(nearest inline)'
-Fail	Property animation-timeline value 'scroll(block self)'
+Pass	Property animation-timeline value 'scroll(block self)'
-Fail	Property animation-timeline value 'scroll(self block)'
+Pass	Property animation-timeline value 'scroll(self block)'
-Fail	Property animation-timeline value 'scroll(y root)'
+Pass	Property animation-timeline value 'scroll(y root)'
 Fail	Property animation-timeline value 'view()'
 Fail	Property animation-timeline value 'view(block)'
 Fail	Property animation-timeline value 'view(inline)'

Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/animation-timeline-parsing.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 69 tests
 
-31 Pass
+45 Pass
-38 Fail
+24 Fail
 Pass	e.style['animation-timeline'] = "initial" should set the property value
 Pass	e.style['animation-timeline'] = "inherit" should set the property value
 Pass	e.style['animation-timeline'] = "unset" should set the property value
@@ -26,20 +26,20 @@ Pass	e.style['animation-timeline'] = "\"foo\" \"bar\"" should not set the proper
 Pass	e.style['animation-timeline'] = "rgb(1, 2, 3)" should not set the property value
 Pass	e.style['animation-timeline'] = "#fefefe" should not set the property value
 Pass	e.style['animation-timeline'] = "\"test\"" should not set the property value
-Fail	e.style['animation-timeline'] = "scroll()" should set the property value
+Pass	e.style['animation-timeline'] = "scroll()" should set the property value
-Fail	e.style['animation-timeline'] = " scroll() " should set the property value
+Pass	e.style['animation-timeline'] = " scroll() " should set the property value
-Fail	e.style['animation-timeline'] = "scroll(block)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(block)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(inline)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(inline)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(x)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(x)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(y)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(y)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(root)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(root)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(nearest)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(nearest)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(self)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(self)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(inline nearest)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(inline nearest)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(nearest inline)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(nearest inline)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(block self)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(block self)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(self block)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(self block)" should set the property value
-Fail	e.style['animation-timeline'] = "scroll(y root)" should set the property value
+Pass	e.style['animation-timeline'] = "scroll(y root)" should set the property value
 Pass	e.style['animation-timeline'] = "scroll(abc root)" should not set the property value
 Pass	e.style['animation-timeline'] = "scroll(abc)" should not set the property value
 Pass	e.style['animation-timeline'] = "scroll(y abc)" should not set the property value