style: Implement CSS animation-composition longhand in style system

This patch introduces animation-composition longhand but we don't
accept it in @keyframe rule for now. I will support this for @keyframe
in the patch series.

Besides, the shorthand of animation doesn't include animation-composition.
The spec issue is: https://github.com/w3c/csswg-drafts/issues/6946.
We could fix the shorthand once this spec issue gets updated.

Differential Revision: https://phabricator.services.mozilla.com/D150299

components/style/properties/gecko.mako.rs

@@ -1731,7 +1731,7 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
 <% skip_ui_longhands = """animation-name animation-delay animation-duration
                           animation-direction animation-fill-mode
                           animation-play-state animation-iteration-count
-                          animation-timeline animation-timing-function
+                          animation-timing-function animation-composition animation-timeline
                           transition-duration transition-delay
                           transition-timing-function transition-property""" %>
 
@@ -1863,6 +1863,8 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
             && self.gecko.mAnimationIterationCountCount == other.gecko.mAnimationIterationCountCount
             && self.gecko.mAnimationPlayStateCount == other.gecko.mAnimationPlayStateCount
             && self.gecko.mAnimationTimingFunctionCount == other.gecko.mAnimationTimingFunctionCount
+            && self.gecko.mAnimationCompositionCount == other.gecko.mAnimationCompositionCount
+            && self.gecko.mAnimationTimelineCount == other.gecko.mAnimationTimelineCount
             && unsafe { bindings::Gecko_StyleAnimationsEquals(&self.gecko.mAnimations, &other.gecko.mAnimations) }
     }
 
@@ -1907,6 +1909,8 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
                              data.longhands_by_name["animation-fill-mode"].keyword)}
     ${impl_animation_keyword('play_state', 'PlayState',
                              data.longhands_by_name["animation-play-state"].keyword)}
+    ${impl_animation_keyword('composition', 'Composition',
+                             data.longhands_by_name["animation-composition"].keyword)}
 
     pub fn set_animation_iteration_count<I>(&mut self, v: I)
     where

components/style/properties/longhands/ui.mako.rs

@@ -276,6 +276,20 @@ ${helpers.single_keyword(
     rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
 )}
 
+${helpers.single_keyword(
+    "animation-composition",
+    "replace add accumulate",
+    engines="gecko",
+    need_index=True,
+    animation_value_type="none",
+    vector=True,
+    gecko_enum_prefix="CompositeOperation",
+    gecko_inexhaustive=True,
+    gecko_pref="layout.css.animation-composition.enabled",
+    spec="https://drafts.csswg.org/css-animations-2/#animation-composition",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
 ${helpers.predefined_type(
     "animation-delay",
     "Time",