LibWeb: Parse the scroll driven animation CSS properties

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
@@ -279,6 +280,7 @@ set(SOURCES
     CSS/StyleValues/TreeCountingFunctionStyleValue.cpp
     CSS/StyleValues/UnicodeRangeStyleValue.cpp
     CSS/StyleValues/UnresolvedStyleValue.cpp
+    CSS/StyleValues/ViewFunctionStyleValue.cpp
     CSS/Supports.cpp
     CSS/SyntaxHighlighter/SyntaxHighlighter.cpp
     CSS/SystemColor.cpp

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -21,6 +21,7 @@
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
+#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
@@ -870,6 +871,38 @@ RefPtr<StyleValue const> CSSStyleProperties::style_value_for_computed_property(L
             return TransformationStyleValue::create(PropertyID::Transform, TransformFunction::Matrix3d, move(parameters));
         }
     }
+    case PropertyID::AnimationDuration: {
+        // https://drafts.csswg.org/css-animations-2/#animation-duration
+        // For backwards-compatibility with Level 1, when the computed value of animation-timeline is auto (i.e. only
+        // one list value, and that value being auto), the resolved value of auto for animation-duration is 0s whenever
+        // its used value would also be 0s.
+        auto const& animation_timeline_computed_value = get_computed_value(PropertyID::AnimationTimeline);
+        auto const& animation_duration_computed_value = get_computed_value(PropertyID::AnimationDuration);
+
+        if (animation_timeline_computed_value.to_keyword() == Keyword::Auto) {
+
+            // FIXME: We can remove these two branches once parse_comma_separated_value_list always returns StyleValueList.
+            if (animation_duration_computed_value.to_keyword() == Keyword::Auto)
+                return TimeStyleValue::create(Time::make_seconds(0));
+
+            if (!animation_duration_computed_value.is_value_list())
+                return animation_duration_computed_value;
+
+            StyleValueVector resolved_durations;
+
+            for (auto const& duration : animation_duration_computed_value.as_value_list().values()) {
+                if (duration->to_keyword() == Keyword::Auto) {
+                    resolved_durations.append(TimeStyleValue::create(Time::make_seconds(0)));
+                } else {
+                    resolved_durations.append(duration);
+                }
+            }
+
+            return StyleValueList::create(move(resolved_durations), StyleValueList::Separator::Comma);
+        }
+
+        return animation_duration_computed_value;
+    }
 
         // -> Any other property
         //    The resolved value is the computed value.

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -2287,7 +2287,27 @@ Vector<ComputedProperties::AnimationProperties> ComputedProperties::animations()
         auto animation_fill_mode_style_value = coordinated_properties.get(PropertyID::AnimationFillMode).value()[i];
         auto animation_composition_style_value = coordinated_properties.get(PropertyID::AnimationComposition).value()[i];
 
-        auto duration = Time::from_style_value(animation_duration_style_value, {}).to_milliseconds();
+        // https://drafts.csswg.org/css-animations-2/#animation-duration
+        auto duration = [&] -> Variant<double, String> {
+            // auto
+            if (animation_duration_style_value->to_keyword() == Keyword::Auto) {
+                // For time-driven animations, equivalent to 0s.
+                return 0;
+
+                // FIXME: For scroll-driven animations, equivalent to the duration necessary to fill the timeline in
+                //        consideration of animation-range, animation-delay, and animation-iteration-count. See
+                //        Scroll-driven Animations § 4.1 Finite Timeline Calculations.
+            }
+
+            // <time [0s,∞]>
+
+            // FIXME: For scroll-driven animations, treated as auto.
+
+            // For time-driven animations, specifies the length of time that an animation takes to complete one cycle.
+            // A negative <time> is invalid.
+            return Time::from_style_value(animation_duration_style_value, {}).to_milliseconds();
+        }();
+
         auto timing_function = EasingFunction::from_style_value(animation_timing_function_style_value);
 
         auto iteration_count = [&] {

Libraries/LibWeb/CSS/Enums.json

@@ -110,6 +110,12 @@
     "textarea",
     "textfield"
   ],
+  "axis": [
+    "block",
+    "inline",
+    "x",
+    "y"
+  ],
   "background-attachment": [
     "fixed",
     "local",
@@ -715,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",
@@ -628,13 +630,15 @@
   "windowtext",
   "wrap",
   "wrap-reverse",
+  "x",
   "x-end",
   "x-large",
   "x-start",
   "x-small",
   "xx-large",
   "xx-small",
   "xxx-large",
+  "y",
   "y-end",
   "y-start",
   "zoom-in",

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -443,10 +443,14 @@ class Parser {
     RefPtr<StyleValue const> parse_time_value(TokenStream<ComponentValue>&);
     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>&);
+    RefPtr<ViewFunctionStyleValue const> parse_view_function_value(TokenStream<ComponentValue>&);
+
     using ParseFunction = AK::Function<RefPtr<StyleValue const>(TokenStream<ComponentValue>&)>;
     RefPtr<StyleValue const> parse_comma_separated_value_list(TokenStream<ComponentValue>&, ParseFunction);
     RefPtr<StyleValue const> parse_simple_comma_separated_value_list(PropertyID, TokenStream<ComponentValue>&);
-    RefPtr<StyleValue const> parse_coordinating_value_list_shorthand(TokenStream<ComponentValue>&, PropertyID shorthand_id, Vector<PropertyID> const& longhand_ids);
+    RefPtr<StyleValue const> parse_coordinating_value_list_shorthand(TokenStream<ComponentValue>&, PropertyID shorthand_id, Vector<PropertyID> const& longhand_ids, Vector<PropertyID> const& reset_only_longhand_ids);
     RefPtr<StyleValue const> parse_all_as_single_keyword_value(TokenStream<ComponentValue>&, Keyword);
 
     RefPtr<StyleValue const> parse_anchor_name_value(TokenStream<ComponentValue>&);
@@ -499,6 +503,7 @@ class Parser {
     RefPtr<StyleValue const> parse_position_visibility_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_quotes_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_single_repeat_style_value(PropertyID, TokenStream<ComponentValue>&);
+    RefPtr<StyleValue const> parse_scroll_timeline_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_scrollbar_color_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_scrollbar_gutter_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_shadow_value(TokenStream<ComponentValue>&, ShadowStyleValue::ShadowType);
@@ -529,6 +534,7 @@ class Parser {
     RefPtr<StyleValue const> parse_grid_area_shorthand_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_grid_shorthand_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_touch_action_value(TokenStream<ComponentValue>&);
+    RefPtr<StyleValue const> parse_view_timeline_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_white_space_shorthand(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_white_space_trim_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_will_change_value(TokenStream<ComponentValue>&);