LibWeb: Store animation-name in ComputedProperties in computed form

Author: https://github.com/Calme1709
Commit: ce4a24eec5
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6267
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/tcl3 ✅

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -3174,9 +3174,25 @@ static CSSPixels snap_a_length_as_a_border_width(double device_pixels_per_css_pi
     return length;
 }
 
+static NonnullRefPtr<StyleValue const> compute_style_value_list(NonnullRefPtr<StyleValue const> const& style_value, Function<NonnullRefPtr<StyleValue const>(NonnullRefPtr<StyleValue const> const&)> const& compute_entry)
+{
+    if (style_value->is_value_list()) {
+        StyleValueVector computed_entries;
+
+        for (auto const& entry : style_value->as_value_list().values())
+            computed_entries.append(compute_entry(entry));
+
+        return StyleValueList::create(move(computed_entries), StyleValueList::Separator::Comma);
+    }
+
+    return compute_entry(style_value);
+}
+
 NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(PropertyID property_id, NonnullRefPtr<StyleValue const> const& specified_value, Function<NonnullRefPtr<StyleValue const>(PropertyID)> const& get_property_specified_value, PropertyValueComputationContext const& computation_context)
 {
     switch (property_id) {
+    case PropertyID::AnimationName:
+        return compute_animation_name(specified_value, computation_context);
     case PropertyID::BorderBottomWidth:
         return compute_border_or_outline_width(specified_value, get_property_specified_value(PropertyID::BorderBottomStyle), computation_context);
     case PropertyID::BorderLeftWidth:
@@ -3208,6 +3224,31 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(Propert
     VERIFY_NOT_REACHED();
 }
 
+NonnullRefPtr<StyleValue const> StyleComputer::compute_animation_name(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const&)
+{
+    // https://drafts.csswg.org/css-animations-1/#animation-name
+    // list, each item either a case-sensitive css identifier or the keyword none
+
+    return compute_style_value_list(specified_value, [](NonnullRefPtr<StyleValue const> const& entry) -> NonnullRefPtr<StyleValue const> {
+        // none | <custom-ident>
+        if (entry->to_keyword() == Keyword::None || entry->is_custom_ident())
+            return entry;
+
+        // <string>
+        if (entry->is_string()) {
+            auto const& string_value = entry->as_string().string_value();
+
+            // AD-HOC: We shouldn't convert strings that aren't valid <custom-ident>s
+            if (is_css_wide_keyword(string_value) || string_value.is_one_of_ignoring_ascii_case("default"sv, "none"sv))
+                return entry;
+
+            return CustomIdentStyleValue::create(entry->as_string().string_value());
+        }
+
+        VERIFY_NOT_REACHED();
+    });
+}
+
 NonnullRefPtr<StyleValue const> StyleComputer::compute_border_or_outline_width(NonnullRefPtr<StyleValue const> const& specified_value, NonnullRefPtr<StyleValue const> const& style_specified_value, PropertyValueComputationContext const& computation_context)
 {
     // https://drafts.csswg.org/css-backgrounds/#border-width

Libraries/LibWeb/CSS/StyleComputer.h

@@ -203,6 +203,7 @@ public:
         double device_pixels_per_css_pixel;
     };
     static NonnullRefPtr<StyleValue const> compute_value_of_property(PropertyID, NonnullRefPtr<StyleValue const> const& specified_value, Function<NonnullRefPtr<StyleValue const>(PropertyID)> const& get_property_specified_value, PropertyValueComputationContext const&);
+    static NonnullRefPtr<StyleValue const> compute_animation_name(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const&);
     static NonnullRefPtr<StyleValue const> compute_border_or_outline_width(NonnullRefPtr<StyleValue const> const& specified_value, NonnullRefPtr<StyleValue const> const& style_specified_value, PropertyValueComputationContext const&);
     static NonnullRefPtr<StyleValue const> compute_font_size(NonnullRefPtr<StyleValue const> const& specified_value, int computed_math_depth, CSSPixels inherited_font_size, int inherited_math_depth, Length::ResolutionContext const& parent_length_resolution_context);
     static NonnullRefPtr<StyleValue const> compute_font_style(NonnullRefPtr<StyleValue const> const& specified_value, Length::ResolutionContext const& parent_length_resolution_context);

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/parsing/animation-name-computed.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 27 tests
 
-24 Pass
+25 Pass
-3 Fail
+2 Fail
 Pass	Property animation-name value 'none'
 Pass	Property animation-name value 'NONE'
 Pass	Property animation-name value 'foo'
@@ -12,7 +12,7 @@ Pass	Property animation-name value 'ease-in'
 Pass	Property animation-name value 'infinite'
 Pass	Property animation-name value 'paused'
 Pass	Property animation-name value 'first, second, third'
-Fail	Property animation-name value '"something"'
+Pass	Property animation-name value '"something"'
 Fail	Property animation-name value '"---\22---"'
 Fail	Property animation-name value '"multi word string"'
 Pass	Property animation-name value '"none"'