LibWeb: Promote animation-composition values to enum

This brings us in line with the other `animation-*` enum properties
(`animation-play-state` and `animation-fill-mode`)

Libraries/LibWeb/Animations/KeyframeEffect.cpp

@@ -936,4 +936,18 @@ void KeyframeEffect::update_computed_properties(AnimationUpdateContext& context)
     target->document().style_computer().collect_animation_into(abstract_element, *this, *computed_properties);
 }
 
+Bindings::CompositeOperation css_animation_composition_to_bindings_composite_operation(CSS::AnimationComposition composition)
+{
+    switch (composition) {
+    case CSS::AnimationComposition::Accumulate:
+        return Bindings::CompositeOperation::Accumulate;
+    case CSS::AnimationComposition::Add:
+        return Bindings::CompositeOperation::Add;
+    case CSS::AnimationComposition::Replace:
+        return Bindings::CompositeOperation::Replace;
+    default:
+        VERIFY_NOT_REACHED();
+    }
+}
+
 }

Libraries/LibWeb/Animations/KeyframeEffect.h

@@ -25,6 +25,8 @@ struct KeyframeEffectOptions : public EffectTiming {
     Optional<String> pseudo_element {};
 };
 
+Bindings::CompositeOperation css_animation_composition_to_bindings_composite_operation(CSS::AnimationComposition composition);
+
 // https://www.w3.org/TR/web-animations-1/#dictdef-basepropertyindexedkeyframe
 // Note: This is an intermediate structure used only when parsing Keyframes provided by the caller in a slightly
 //       different format. It is converted to BaseKeyframe, which is why it doesn't need to store the parsed properties

Libraries/LibWeb/CSS/Enums.json

@@ -71,6 +71,11 @@
     "self-inline",
     "width"
   ],
+  "animation-composition": [
+    "replace",
+    "add",
+    "accumulate"
+  ],
   "animation-direction": [
     "alternate",
     "alternate-reverse",

Libraries/LibWeb/CSS/Properties.json

@@ -237,10 +237,8 @@
     "animation-type": "none",
     "inherited": false,
     "initial": "replace",
-    "valid-identifiers": [
+    "valid-types": [
-      "replace",
+      "animation-composition"
-      "add",
-      "accumulate"
     ]
   },
   "animation-delay": {

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -1247,18 +1247,10 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
     if (auto timing_property = cascaded_properties.property(PropertyID::AnimationTimingFunction); timing_property && (timing_property->is_easing() || (timing_property->is_keyword() && !timing_property->is_css_wide_keyword())))
         timing_function = EasingFunction::from_style_value(timing_property.release_nonnull());
 
-    Bindings::CompositeOperation composite_operation { Bindings::CompositeOperation::Replace };
+    AnimationComposition animation_composition { AnimationComposition::Replace };
     if (auto composite_property = cascaded_properties.property(PropertyID::AnimationComposition); composite_property) {
-        switch (composite_property->to_keyword()) {
+        if (auto animation_composition_value = keyword_to_animation_composition(composite_property->to_keyword()); animation_composition_value.has_value())
-        case Keyword::Add:
+            animation_composition = *animation_composition_value;
-            composite_operation = Bindings::CompositeOperation::Add;
-            break;
-        case Keyword::Accumulate:
-            composite_operation = Bindings::CompositeOperation::Accumulate;
-            break;
-        default:
-            break;
-        }
     }
 
     auto iteration_duration = duration.has_value()
@@ -1270,7 +1262,7 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
     effect.set_timing_function(move(timing_function));
     effect.set_fill_mode(Animations::css_fill_mode_to_bindings_fill_mode(fill_mode));
     effect.set_playback_direction(Animations::css_animation_direction_to_bindings_playback_direction(direction));
-    effect.set_composite(composite_operation);
+    effect.set_composite(Animations::css_animation_composition_to_bindings_composite_operation(animation_composition));
 
     if (play_state != effect.last_css_animation_play_state()) {
         if (play_state == CSS::AnimationPlayState::Running && animation.play_state() != Bindings::AnimationPlayState::Running) {