[css-animations-2] Add testing coverage for animation-composition (#…

…32237)

Add testing coverage for the `animation-composition` property.

Note that this property is not part of the `animation` shorthand property per the current spec.

css/css-animations/CSSAnimation-effect.tentative.html

@@ -131,6 +131,14 @@
 }, 'After replacing a finished animation\'s effect with a longer one ' +
    'it fires an animationstart event');
 
+test(t => {
+  const div = addDiv(t);
+  div.style.animation = 'anim 100s';
+  div.style.animationComposition = 'add';
+  const animation = div.getAnimations()[0];
+  assert_equals(animation.effect.composite, 'add');
+}, 'Setting animation-composition sets the composite property on the effect');
+
 test(t => {
   const div = addDiv(t);
 
@@ -161,6 +169,7 @@
   div.style.animationDelay = '8s';
   div.style.animationFillMode = 'both';
   div.style.animationPlayState = 'paused';
+  div.style.animationComposition = 'add';
 
   // Update the keyframes
   keyframesRule.deleteRule(0);
@@ -197,6 +206,11 @@
     '200px',
     'keyframes should be the value set by the API'
   );
+  assert_equals(
+    animation.effect.composite,
+    'replace',
+    'composite should be the value set by the API'
+  );
 
   // Unlike the other properties animation-play-state maps to the Animation
   // not the KeyframeEffect so it should be overridden.

css/css-animations/KeyframeEffect-getKeyframes.tentative.html

@@ -37,7 +37,7 @@
 
 @keyframes anim-simple-timing {
   from { color: rgb(0, 0, 0); animation-timing-function: linear; }
-  50%  { color: rgb(0, 0, 255);  animation-timing-function: ease-in-out; }
+  50%  { color: rgb(0, 0, 255); animation-timing-function: ease-in-out; }
   to   { color: rgb(255, 255, 255); animation-timing-function: step-end; }
 }
 
@@ -47,6 +47,18 @@
   to   { color: rgb(255, 255, 255); }
 }
 
+@keyframes anim-simple-composite {
+  from { color: rgb(0, 0, 0); animation-composition: replace; }
+  50%  { color: rgb(0, 0, 255); animation-composition: add; }
+  to   { color: rgb(255, 255, 255); animation-composition: accumulate; }
+}
+
+@keyframes anim-simple-composite-some {
+  from { color: rgb(0, 0, 0); animation-composition: add; }
+  50%  { color: rgb(0, 0, 255); }
+  to   { color: rgb(255, 255, 255); }
+}
+
 @keyframes anim-simple-shorthand {
   from { margin: 8px; }
   to   { margin: 16px; }
@@ -182,6 +194,12 @@
   "cubic-bezier(0, 0.25, 0.75, 1)"
 ];
 
+const kCompositeValues = [
+  "replace",
+  "add",
+  "accumulate"
+];
+
 test(t => {
   const div = addDiv(t);
 
@@ -271,6 +289,58 @@
 }, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
    + ' values, when the easing is specified on some keyframes');
 
+test(t => {
+  for (const composite of kCompositeValues) {
+    const div = addDiv(t);
+
+    div.style.animation = 'anim-simple-three 100s';
+    div.style.animationComposition = composite;
+    const frames = getKeyframes(div);
+
+    assert_equals(frames.length, 3, "number of frames");
+
+    for (let i = 0; i < frames.length; i++) {
+      assert_equals(frames[i].composite, "auto",
+                    "value for 'composite' on ComputedKeyframe #" + i);
+    }
+  }
+}, 'KeyframeEffect.getKeyframes() returns frames with expected composite'
+   + ' values, when the composite is set on the effect using animation-composition on the'
+   + ' element');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.animation = 'anim-simple-composite 100s';
+  const frames = getKeyframes(div);
+
+  assert_equals(frames.length, 3, "number of frames");
+  assert_equals(frames[0].composite, "replace",
+                "value of 'composite' on ComputedKeyframe #0");
+  assert_equals(frames[1].composite, "add",
+                "value of 'composite' on ComputedKeyframe #1");
+  assert_equals(frames[2].composite, "accumulate",
+                "value of 'composite' on ComputedKeyframe #2");
+}, 'KeyframeEffect.getKeyframes() returns frames with expected composite'
+   + ' values, when the composite is specified on each keyframe');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.animation = 'anim-simple-composite-some 100s';
+  div.style.animationComposition = 'accumulate';
+  const frames = getKeyframes(div);
+
+  assert_equals(frames.length, 3, "number of frames");
+  assert_equals(frames[0].composite, "add",
+                "value of 'composite' on ComputedKeyframe #0");
+  assert_equals(frames[1].composite, "auto",
+                "value of 'composite' on ComputedKeyframe #1");
+  assert_equals(frames[2].composite, "auto",
+                "value of 'composite' on ComputedKeyframe #2");
+}, 'KeyframeEffect.getKeyframes() returns frames with expected composite'
+   + ' values, when the composite is specified on some keyframes');
+
 test(t => {
   const div = addDiv(t);
   div.style.animation = 'anim-simple-shorthand 100s';

css/css-animations/parsing/animation-composition-computed.tentative.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationComposition</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-composition", "replace, add, accumulate");
+</script>
+</body>
+</html>

css/css-animations/parsing/animation-composition-invalid.tentative.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-composition with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition supports only the grammar '<single-animation-composition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-composition", "auto");
+test_invalid_value("animation-composition", "add replace");
+
+test_invalid_value("animation-composition", "add, initial");
+test_invalid_value("animation-composition", "initial, add");
+</script>
+</body>
+</html>

css/css-animations/parsing/animation-composition-valid.tentative.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-composition with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition supports the full grammar '<single-animation-composition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-composition", "replace");
+test_valid_value("animation-composition", "add");
+test_valid_value("animation-composition", "accumulate");
+test_valid_value("animation-composition", "replace, add, accumulate");
+</script>
+</body>
+</html>

css/css-pseudo/parsing/marker-supported-properties.html

@@ -61,6 +61,7 @@
 test_pseudo_computed_value("::marker", "animation-name", "anim");
 test_pseudo_computed_value("::marker", "animation-play-state", "paused");
 test_pseudo_computed_value("::marker", "animation-timing-function", "linear");
+test_pseudo_computed_value("::marker", "animation-composition", "add");
 
 // ::marker supports transition properties.
 test_pseudo_computed_value("::marker", "transition", "display 1s linear 2s");