LibWeb/CSS: Allow non-StyleValueLists in animation properties

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -378,11 +378,20 @@ HashMap<PropertyID, StyleValueVector> ComputedProperties::assemble_coordinated_v
     // - If a coordinating list property has too few values specified, its value list is repeated to add more used
     //   values.
     // - The computed values of the coordinating list properties are not affected by such truncation or repetition.
+
+    // FIXME: This is required because our animation-* properties are not yet parsed as lists.
+    //        Once that is fixed, every value here will be a StyleValueList.
+    auto const get_property_value_as_list = [&](PropertyID property_id) {
+        auto const& value = property(property_id);
+
+        return value.is_value_list() ? value.as_value_list().values() : StyleValueVector { value };
+    };
+
     HashMap<PropertyID, StyleValueVector> coordinated_value_list;
 
-    for (size_t i = 0; i < property(base_property_id).as_value_list().size(); i++) {
+    for (size_t i = 0; i < get_property_value_as_list(base_property_id).size(); i++) {
         for (auto property_id : property_ids) {
-            auto const& list = property(property_id).as_value_list().values();
+            auto const& list = get_property_value_as_list(property_id);
 
             coordinated_value_list.ensure(property_id).append(list[i % list.size()]);
         }

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -2807,12 +2807,18 @@ static CSSPixels snap_a_length_as_a_border_width(double device_pixels_per_css_pi
 
 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)
 {
-    StyleValueVector computed_entries;
+    // FIXME: This is required because our animation-* properties are not yet parsed as lists.
+    //        Once that is fixed, every value here will be a StyleValueList.
+    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));
+        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 StyleValueList::create(move(computed_entries), StyleValueList::Separator::Comma);
+    }
+
+    return compute_entry(style_value);
 }
 
 NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(

Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/animation-name.txt

@@ -0,0 +1,39 @@
+Harness status: OK
+
+Found 33 tests
+
+32 Pass
+1 Fail
+Pass	Can set 'animation-name' to CSS-wide keywords: initial
+Pass	Can set 'animation-name' to CSS-wide keywords: inherit
+Pass	Can set 'animation-name' to CSS-wide keywords: unset
+Pass	Can set 'animation-name' to CSS-wide keywords: revert
+Pass	Can set 'animation-name' to var() references:  var(--A)
+Pass	Can set 'animation-name' to the 'none' keyword: none
+Fail	Can set 'animation-name' to the 'custom-ident' keyword: custom-ident
+Pass	Setting 'animation-name' to a length: 0px throws TypeError
+Pass	Setting 'animation-name' to a length: -3.14em throws TypeError
+Pass	Setting 'animation-name' to a length: 3.14cm throws TypeError
+Pass	Setting 'animation-name' to a length: calc(0px + 0em) throws TypeError
+Pass	Setting 'animation-name' to a percent: 0% throws TypeError
+Pass	Setting 'animation-name' to a percent: -3.14% throws TypeError
+Pass	Setting 'animation-name' to a percent: 3.14% throws TypeError
+Pass	Setting 'animation-name' to a percent: calc(0% + 0%) throws TypeError
+Pass	Setting 'animation-name' to a time: 0s throws TypeError
+Pass	Setting 'animation-name' to a time: -3.14ms throws TypeError
+Pass	Setting 'animation-name' to a time: 3.14s throws TypeError
+Pass	Setting 'animation-name' to a time: calc(0s + 0ms) throws TypeError
+Pass	Setting 'animation-name' to an angle: 0deg throws TypeError
+Pass	Setting 'animation-name' to an angle: 3.14rad throws TypeError
+Pass	Setting 'animation-name' to an angle: -3.14deg throws TypeError
+Pass	Setting 'animation-name' to an angle: calc(0rad + 0deg) throws TypeError
+Pass	Setting 'animation-name' to a flexible length: 0fr throws TypeError
+Pass	Setting 'animation-name' to a flexible length: 1fr throws TypeError
+Pass	Setting 'animation-name' to a flexible length: -3.14fr throws TypeError
+Pass	Setting 'animation-name' to a number: 0 throws TypeError
+Pass	Setting 'animation-name' to a number: -3.14 throws TypeError
+Pass	Setting 'animation-name' to a number: 3.14 throws TypeError
+Pass	Setting 'animation-name' to a number: calc(2 + 3) throws TypeError
+Pass	Setting 'animation-name' to a transform: translate(50%, 50%) throws TypeError
+Pass	Setting 'animation-name' to a transform: perspective(10em) throws TypeError
+Pass	Setting 'animation-name' to a transform: translate3d(0px, 1px, 2px) translate(0px, 1px) rotate3d(1, 2, 3, 45deg) rotate(45deg) scale3d(1, 2, 3) scale(1, 2) skew(1deg, 1deg) skewX(1deg) skewY(45deg) perspective(1px) matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16) matrix(1, 2, 3, 4, 5, 6) throws TypeError

Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/animation-name.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'animation-name' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runListValuedPropertyTests('animation-name', [
+  { syntax: 'none' },
+  // FIXME: This should be <custom-ident>, but the test harness doesn't
+  // currently support it.
+  { syntax: 'custom-ident' },
+]);
+
+</script>