Added tests for new animation-delay shorthand/animation-delay-start/animation-delay-end

css/css-animations/AnimationEffect-getComputedTiming.tentative.html

@@ -54,6 +54,54 @@
                 'Initial value of endDelay');
 }, 'endDelay of a new animation');
 
+test(t => {
+  const div = addDiv(t, { style: 'animation: moveAnimation 100s; animation-delay-start: 10s' });
+  const effect = div.getAnimations()[0].effect;
+  assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC,
+                'animation-delay-start maps to delay');
+}, 'animation-delay-start maps to delay');
+
+test(t => {
+  const div = addDiv(t, { style: 'animation: moveAnimation 100s; animation-delay-end: 5s' });
+  const effect = div.getAnimations()[0].effect;
+  assert_equals(effect.getComputedTiming().endDelay, 5 * MS_PER_SEC,
+                'animation-delay-end maps to endDelay');
+}, 'animation-delay-end maps to endDelay');
+
+test(t => {
+  const div = addDiv(t, { style: 'animation: moveAnimation 100s; animation-delay: 2s 8s' });
+  const effect = div.getAnimations()[0].effect;
+  assert_equals(effect.getComputedTiming().delay, 2 * MS_PER_SEC,
+                'Two-value animation-delay start component');
+  assert_equals(effect.getComputedTiming().endDelay, 8 * MS_PER_SEC,
+                'Two-value animation-delay end component');
+}, 'Two-value animation-delay maps to delay and endDelay');
+
+test(t => {
+  const div = addDiv(t, { style: 'animation: moveAnimation 100s; animation-delay-end: 5s' });
+  div.style.animationDelay = '2s';
+  const effect = div.getAnimations()[0].effect;
+  assert_equals(effect.getComputedTiming().delay, 2 * MS_PER_SEC,
+                'Single-value animation-delay updates delay');
+  assert_equals(effect.getComputedTiming().endDelay, 5 * MS_PER_SEC,
+                'Single-value animation-delay leaves endDelay unchanged');
+}, 'Single-value animation-delay updates start delay only');
+
+test(t => {
+  const div = addDiv(t, { style: 'animation: moveAnimation 100s; animation-delay-end: 20s' });
+  const effect = div.getAnimations()[0].effect;
+  assert_equals(effect.getComputedTiming().endTime, 120 * MS_PER_SEC,
+                'endTime includes positive endDelay');
+}, 'endTime includes positive endDelay');
+
+test(t => {
+  const div = addDiv(t, { style: 'animation: moveAnimation 100s; animation-delay-start: -5s' });
+  const effect = div.getAnimations()[0].effect;
+  const answer = (100 - 5) * MS_PER_SEC;
+  assert_equals(effect.getComputedTiming().endTime, answer,
+                'endTime reflects negative start delay');
+}, 'endTime reflects negative animation-delay-start');
+
 
 // --------------------
 // fill

css/css-animations/AnimationEffect-updateTiming.tentative.html

@@ -42,7 +42,8 @@
 //
 //   iterations - animation-iteration-count
 //   direction - animation-direction
-//   delay - animation-delay
+//   delay - animation-delay-start
+//   endDelay - animation-delay-end
 //   fill - animation-fill-mode
 //
 // Which we test in two batches, overriding two properties each time and using
@@ -117,7 +118,53 @@
     'Direction should be the value set by style'
   );
 }, 'AnimationEffect.updateTiming({ delay, fill }) causes changes to'
-   + ' the animation-delay and animation-fill-mode to be ignored');
+   + ' the animation-delay-start and animation-fill-mode to be ignored');
+
+test(t => {
+  const div = addDiv(t);
+  div.style.animation = 'anim-empty 100s';
+
+  const animation = div.getAnimations()[0];
+  animation.effect.updateTiming({ endDelay: 2 * MS_PER_SEC });
+
+  div.style.animationDelayEnd = '4s';
+  div.style.animationDelayStart = '6s';
+
+  assert_equals(
+    animation.effect.getTiming().endDelay,
+    2 * MS_PER_SEC,
+    'End delay should be the value set by the API'
+  );
+  assert_equals(
+    animation.effect.getTiming().delay,
+    6 * MS_PER_SEC,
+    'Start delay should be the value set by style'
+  );
+}, 'AnimationEffect.updateTiming({ endDelay }) causes changes to'
+   + ' the animation-delay-end to be ignored');
+
+test(t => {
+  const div = addDiv(t);
+  div.style.animation = 'anim-empty 100s';
+
+  const animation = div.getAnimations()[0];
+  animation.effect.updateTiming({ delay: 2 * MS_PER_SEC });
+
+  div.style.animationDelayStart = '4s';
+  div.style.animationDelayEnd = '6s';
+
+  assert_equals(
+    animation.effect.getTiming().delay,
+    2 * MS_PER_SEC,
+    'Start delay should be the value set by the API'
+  );
+  assert_equals(
+    animation.effect.getTiming().endDelay,
+    6 * MS_PER_SEC,
+    'End delay should be the value set by style'
+  );
+}, 'AnimationEffect.updateTiming({ delay }) causes changes to'
+   + ' the animation-delay-start to be ignored');
 
 test(t => {
   const div = addDiv(t);
@@ -145,27 +192,27 @@
   const animation = div.getAnimations()[0];
   animation.effect.updateTiming({
     easing: 'steps(4)',
-    endDelay: 2 * MS_PER_SEC,
     iterationStart: 4,
   });
 
   div.style.animationDuration = '6s';
   div.style.animationTimingFunction = 'ease-in';
+  div.style.animationDelayEnd = '8s';
 
   assert_equals(
     animation.effect.getTiming().easing,
     'steps(4)',
-    'endDelay should be the value set by the API'
-  );
-  assert_equals(
-    animation.effect.getTiming().endDelay,
-    2 * MS_PER_SEC,
-    'endDelay should be the value set by the API'
+    'easing should be the value set by the API'
   );
   assert_equals(
     animation.effect.getTiming().iterationStart,
     4,
-    'iterationStart should be the value set by style'
+    'iterationStart should be the value set by the API'
+  );
+  assert_equals(
+    animation.effect.getTiming().endDelay,
+    8 * MS_PER_SEC,
+    'endDelay should be the value set by style'
   );
 }, 'AnimationEffect properties that do not map to animation-* properties'
    + ' should not be changed when animation-* style is updated');

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

@@ -166,7 +166,8 @@
   div.style.animationDuration = '4s';
   div.style.animationIterationCount = '6';
   div.style.animationDirection = 'reverse';
-  div.style.animationDelay = '8s';
+  div.style.animationDelayStart = '8s';
+  div.style.animationDelayEnd = '12s';
   div.style.animationFillMode = 'both';
   div.style.animationPlayState = 'paused';
   div.style.animationComposition = 'add';
@@ -197,6 +198,11 @@
     0,
     'delay should be the value set by the API'
   );
+  assert_equals(
+    animation.effect.getTiming().endDelay,
+    0,
+    'endDelay should be the value set by the API'
+  );
   assert_equals(
     animation.effect.getTiming().fill,
     'auto',
@@ -225,6 +231,19 @@
     null,
     'timeline should be the value set by style'
   );
+
+  div.style.animationDelayStart = '99s';
+  div.style.animationDelayEnd = '99s';
+  assert_equals(
+    animation.effect.getTiming().delay,
+    0,
+    'delay should remain the value set by the API after style change'
+  );
+  assert_equals(
+    animation.effect.getTiming().endDelay,
+    0,
+    'endDelay should remain the value set by the API after style change'
+  );
 }, 'Replacing the effect of a CSSAnimation causes subsequent changes to'
    + ' corresponding animation-* properties to be ignored');
 

css/css-animations/animation-delay-end-liveness-reverse.tentative.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Animations: animation-delay-end liveness with reverse playback</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-end">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@keyframes anim {
+  from { margin-left: 0px; }
+  to { margin-left: 100px; }
+}
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(t => {
+  const div = addDiv(t, {
+    style: 'animation: anim 100s reverse paused; animation-delay-end: 50s'
+  });
+  const animation = div.getAnimations()[0];
+  assert_equals(animation.effect.getComputedTiming().endDelay, 50 * MS_PER_SEC,
+                'animation-delay-end maps to endDelay');
+
+  animation.finish();
+  assert_equals(animation.effect.getComputedTiming().endDelay, 50 * MS_PER_SEC,
+                'endDelay unchanged after finish');
+
+  div.style.animationDelayEnd = '10s';
+  assert_equals(animation.effect.getComputedTiming().endDelay, 10 * MS_PER_SEC,
+                'Changing animation-delay-end updates endDelay on running animation');
+}, 'animation-delay-end is live on a running reverse animation');
+</script>

css/css-animations/animation-delay-list-coordination.tentative.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Animations: animation-delay list coordination</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start"/>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-end"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@keyframes anim1 {
+  from { margin-left: 0px; }
+  to { margin-left: 10px; }
+}
+@keyframes anim2 {
+  from { margin-top: 0px; }
+  to { margin-top: 10px; }
+}
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(t => {
+  const div = addDiv(t, {
+    style: 'animation: anim1 100s, anim2 100s; animation-delay: 2s 8s, 3s 12s'
+  });
+  const animations = div.getAnimations();
+  assert_equals(animations.length, 2);
+
+  assert_equals(animations[0].effect.getTiming().delay, 2 * MS_PER_SEC,
+                'First animation start delay');
+  assert_equals(animations[0].effect.getTiming().endDelay, 8 * MS_PER_SEC,
+                'First animation end delay');
+  assert_equals(animations[1].effect.getTiming().delay, 3 * MS_PER_SEC,
+                'Second animation start delay');
+  assert_equals(animations[1].effect.getTiming().endDelay, 12 * MS_PER_SEC,
+                'Second animation end delay');
+}, 'Comma-separated animation-delay values coordinate with animation-name list');
+</script>

css/css-animations/animation-delay-start-012.tentative.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Animations Test: huge negative animation-delay-start</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<link rel="match" href="../reference/ref-filled-green-200px-square.html">
+
+<style>
+@keyframes keyframes {
+  from { background: green }
+  to { background: red }
+}
+#test {
+  animation: 1s infinite paused keyframes;
+  animation-delay-start: -1e16s;
+  height: 200px;
+  width: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="test"></div>

css/css-animations/animation-delay-start-liveness-001.tentative.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Animations Test: animation-delay-start - liveness</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<meta name="assert" content="Check that changes to animation-delay-start on a running
+animation are reflected in output">
+<meta name="flags" content="dom">
+<link rel="match" href="animation-common-ref.html">
+<style>
+@keyframes two-step {
+  from { background-color: red }
+  50% { background-color: green }
+  to { background-color: green }
+}
+div {
+  width: 100px;
+  height: 100px;
+  background-color: orange;
+}
+</style>
+<div></div>
+<script>
+var div = document.querySelector('div');
+div.style.animation = 'two-step 200s steps(1)';
+window.getComputedStyle(div).animation;
+
+window.requestAnimationFrame(function() {
+  div.style.animationDelayStart = '-100s';
+  document.documentElement.removeAttribute('class');
+});
+</script>
+</html>

css/css-animations/animation-delay-start-liveness-002.tentative.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Animations Test: animation-delay-start - liveness with animationend</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<meta name="assert" content="Check that shortening the animation-delay-start triggers
+an animationend event">
+<meta name="flags" content="dom">
+<link rel="match" href="animation-common-ref.html">
+<style>
+@keyframes all-red {
+  from { background-color: red }
+  to   { background-color: red }
+}
+div {
+  width: 100px;
+  height: 100px;
+  background-color: orange;
+}
+</style>
+<div></div>
+<script>
+var div = document.querySelector('div');
+div.style.animation = 'all-red 1000s';
+window.getComputedStyle(div).animation;
+
+div.addEventListener('animationend', function() {
+  div.style.animation = 'none';
+  div.style.backgroundColor = 'green';
+});
+
+window.requestAnimationFrame(function() {
+  div.style.animationDelayStart = '-1000s';
+
+  window.requestAnimationFrame(function() {
+    document.documentElement.removeAttribute('class');
+  });
+});
+</script>
+</html>