From 08a2d007e5e4eb0b7d3351e06ecc054b4b53b5a5 Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv <maggotfish@gmail.com>
Date: Fri, 17 Jul 2026 19:30:30 +0300
Subject: [PATCH] Added tests for animation-delay shorthand,
 animation-delay-start, and animation-delay-end

---
 ...ionEffect-getComputedTiming.tentative.html | 48 +++++++++++++
 ...nimationEffect-updateTiming.tentative.html | 67 ++++++++++++++++---
 .../CSSAnimation-effect.tentative.html        | 21 +++++-
 ...-delay-end-liveness-reverse.tentative.html | 34 ++++++++++
 ...ion-delay-list-coordination.tentative.html | 39 +++++++++++
 .../animation-delay-start-012.tentative.html  | 21 ++++++
 ...on-delay-start-liveness-001.tentative.html | 33 +++++++++
 ...on-delay-start-liveness-002.tentative.html | 40 +++++++++++
 ...on-delay-start-liveness-003.tentative.html | 40 +++++++++++
 .../event-dispatch.tentative.html             | 40 +++++++++++
 css/css-animations/inheritance.html           |  2 +
 .../parsing/animation-computed.html           |  4 +-
 .../parsing/animation-delay-computed.html     |  6 +-
 ...nimation-delay-end-computed.tentative.html | 30 +++++++++
 ...animation-delay-end-invalid.tentative.html | 22 ++++++
 .../animation-delay-end-valid.tentative.html  | 22 ++++++
 .../parsing/animation-delay-invalid.html      |  4 +-
 .../animation-delay-shorthand.tentative.html  | 55 +++++++++++++++
 ...mation-delay-start-computed.tentative.html | 30 +++++++++
 ...imation-delay-start-invalid.tentative.html | 22 ++++++
 ...animation-delay-start-valid.tentative.html | 24 +++++++
 .../parsing/animation-delay-valid.html        |  7 +-
 .../parsing/animation-shorthand.html          |  8 +--
 .../parsing/animation-valid.html              |  2 +-
 .../parsing/keyframes-allowed-properties.html |  4 ++
 25 files changed, 603 insertions(+), 22 deletions(-)
 create mode 100644 css/css-animations/animation-delay-end-liveness-reverse.tentative.html
 create mode 100644 css/css-animations/animation-delay-list-coordination.tentative.html
 create mode 100644 css/css-animations/animation-delay-start-012.tentative.html
 create mode 100644 css/css-animations/animation-delay-start-liveness-001.tentative.html
 create mode 100644 css/css-animations/animation-delay-start-liveness-002.tentative.html
 create mode 100644 css/css-animations/animation-delay-start-liveness-003.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-end-computed.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-end-invalid.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-end-valid.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-shorthand.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-start-computed.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-start-invalid.tentative.html
 create mode 100644 css/css-animations/parsing/animation-delay-start-valid.tentative.html

diff --git a/css/css-animations/AnimationEffect-getComputedTiming.tentative.html b/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
index 46c26fcb99be0f..def5a6e8aa8b2f 100644
--- a/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
+++ b/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
diff --git a/css/css-animations/AnimationEffect-updateTiming.tentative.html b/css/css-animations/AnimationEffect-updateTiming.tentative.html
index e6556dac4bde9f..f01c2a37f3db6c 100644
--- a/css/css-animations/AnimationEffect-updateTiming.tentative.html
+++ b/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');
diff --git a/css/css-animations/CSSAnimation-effect.tentative.html b/css/css-animations/CSSAnimation-effect.tentative.html
index 591ffe770b65ed..32728cd9a37eda 100644
--- a/css/css-animations/CSSAnimation-effect.tentative.html
+++ b/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');
 
diff --git a/css/css-animations/animation-delay-end-liveness-reverse.tentative.html b/css/css-animations/animation-delay-end-liveness-reverse.tentative.html
new file mode 100644
index 00000000000000..81fa0ea12fbc2f
--- /dev/null
+++ b/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>
diff --git a/css/css-animations/animation-delay-list-coordination.tentative.html b/css/css-animations/animation-delay-list-coordination.tentative.html
new file mode 100644
index 00000000000000..17e26d17e95773
--- /dev/null
+++ b/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>
diff --git a/css/css-animations/animation-delay-start-012.tentative.html b/css/css-animations/animation-delay-start-012.tentative.html
new file mode 100644
index 00000000000000..934e139ae85fa2
--- /dev/null
+++ b/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>
diff --git a/css/css-animations/animation-delay-start-liveness-001.tentative.html b/css/css-animations/animation-delay-start-liveness-001.tentative.html
new file mode 100644
index 00000000000000..53059cb3d92fa0
--- /dev/null
+++ b/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>
diff --git a/css/css-animations/animation-delay-start-liveness-002.tentative.html b/css/css-animations/animation-delay-start-liveness-002.tentative.html
new file mode 100644
index 00000000000000..3320087f8f21ad
--- /dev/null
+++ b/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>
diff --git a/css/css-animations/animation-delay-start-liveness-003.tentative.html b/css/css-animations/animation-delay-start-liveness-003.tentative.html
new file mode 100644
index 00000000000000..a15c82514e0f26
--- /dev/null
+++ b/css/css-animations/animation-delay-start-liveness-003.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 animationstart</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<meta name="assert" content="Check that extending the animation-delay-start triggers
+an animationstart event">
+<meta name="flags" content="dom">
+<link rel="match" href="animation-common-ref.html">
+<style>
+@keyframes all-orange {
+  from { background-color: orange }
+  to   { background-color: orange }
+}
+div {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+</style>
+<div></div>
+<script>
+var div = document.querySelector('div');
+div.style.animation = 'all-orange 1000s';
+div.style.animationDelayStart = '-999.99s';
+
+div.addEventListener('animationend', function() {
+  div.addEventListener('animationstart', function() {
+    div.style.animation = 'none';
+    div.style.backgroundColor = 'green';
+  });
+
+  div.style.animationDelayStart = '0s';
+
+  window.requestAnimationFrame(function() {
+    document.documentElement.removeAttribute('class');
+  });
+});
+</script>
+</html>
diff --git a/css/css-animations/event-dispatch.tentative.html b/css/css-animations/event-dispatch.tentative.html
index 8c5b7e3ae15e2a..765493caaea5f3 100644
--- a/css/css-animations/event-dispatch.tentative.html
+++ b/css/css-animations/event-dispatch.tentative.html
@@ -281,6 +281,46 @@
   assert_equals(animation.playState, 'running'); // delay
 }, 'Negative playbackRate sanity test(Before -> Active -> Before)');
 
+promise_test(async t => {
+  const div = addDiv(t, {
+    style: 'animation: anim 100s paused; animation-delay-end: 50s'
+  });
+  const animation = div.getAnimations()[0];
+  const timeoutPromise = armTimeoutWhenReady(animation, fastEventsTimeout);
+  const watcher = new EventWatcher(t, div, ['animationstart', 'animationend'],
+                                   timeoutPromise);
+
+  await animation.ready;
+  animation.finish();
+
+  const events = await watcher.wait_for(['animationstart', 'animationend'], {
+    record: 'all',
+  });
+  assert_equals(events[1].elapsedTime, 100.0,
+                'animationend elapsedTime is active duration, not including end delay');
+
+  await waitForAnimationFrames(2);
+}, 'animationend fires at active duration regardless of end delay');
+
+promise_test(async t => {
+  const div = addDiv(t, {
+    style: 'animation: anim 100s reverse 100s paused; animation-delay-end: 50s'
+  });
+  const animation = div.getAnimations()[0];
+  const timeoutPromise = armTimeoutWhenReady(animation, fastEventsTimeout);
+  const watcher = new EventWatcher(t, div, ['animationstart', 'animationend'],
+                                   timeoutPromise);
+
+  await animation.ready;
+  animation.finish();
+  await watcher.wait_for(['animationstart', 'animationend']);
+
+  animation.playbackRate = -1;
+
+  const evt = await watcher.wait_for('animationstart');
+  assert_equals(evt.elapsedTime, 100.0);
+}, 'Reverse playback with end delay dispatches animationstart when entering active phase');
+
 promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
 
diff --git a/css/css-animations/inheritance.html b/css/css-animations/inheritance.html
index 6e7697b9d81db6..42c9dd74b8877c 100644
--- a/css/css-animations/inheritance.html
+++ b/css/css-animations/inheritance.html
@@ -16,6 +16,8 @@
 </div>
 <script>
 assert_not_inherited('animation-delay', '0s', '2s');
+assert_not_inherited('animation-delay-start', '0s', '2s');
+assert_not_inherited('animation-delay-end', '0s', '2s');
 assert_not_inherited('animation-direction', 'normal', 'reverse');
 assert_not_inherited('animation-duration', '0s', '3s');
 assert_not_inherited('animation-fill-mode', 'none', 'forwards');
diff --git a/css/css-animations/parsing/animation-computed.html b/css/css-animations/parsing/animation-computed.html
index 2a70585aadcd14..1f184c37d12a43 100644
--- a/css/css-animations/parsing/animation-computed.html
+++ b/css/css-animations/parsing/animation-computed.html
@@ -12,7 +12,7 @@
 <body>
 <div id="target"></div>
 <script>
-// <single-animation> = <time> || <easing-function> || <time> ||
+// <single-animation> = <time> || <easing-function> || <'animation-delay-start'> ||
 // <single-animation-iteration-count> || <single-animation-direction> ||
 // <single-animation-fill-mode> || <single-animation-play-state> ||
 // [ none | <keyframes-name> ]
@@ -45,6 +45,8 @@
   target.style.animation = "initial";
   target.style.animationDelay = "1s";
   assert_equals(getComputedStyle(target).animation, "0s 1s");
+  assert_equals(getComputedStyle(target).getPropertyValue('animation-delay-start'), "1s");
+  assert_equals(getComputedStyle(target).getPropertyValue('animation-delay-end'), "0s");
 }, "Animation with a delay but no duration");
 
 </script>
diff --git a/css/css-animations/parsing/animation-delay-computed.html b/css/css-animations/parsing/animation-delay-computed.html
index ba544232abdcba..edee92f3b7df7c 100644
--- a/css/css-animations/parsing/animation-delay-computed.html
+++ b/css/css-animations/parsing/animation-delay-computed.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <title>CSS Animations: getComputedStyle().animationDelay</title>
-<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay">
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay">
 <meta name="assert" content="animation-delay converts to seconds.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -24,6 +24,10 @@
 test_computed_value("animation-delay", "calc(2 * 3s)", "6s");
 test_computed_value("animation-delay", "20s, 10s");
 test_computed_value("animation-delay", 'calc(10s + (sign(2cqw - 10px) * 5s))', '5s');
+test_computed_value("animation-delay", "1s 2s");
+test_computed_value("animation-delay", "1s 2s, 3s 4s");
+test_computed_value("animation-delay-start", "-500ms", "-0.5s");
+test_computed_value("animation-delay-end", "500ms", "0.5s");
 </script>
 </body>
 </html>
diff --git a/css/css-animations/parsing/animation-delay-end-computed.tentative.html b/css/css-animations/parsing/animation-delay-end-computed.tentative.html
new file mode 100644
index 00000000000000..d9f25bc60718eb
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-end-computed.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationDelayEnd</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-end">
+<meta name="assert" content="animation-delay-end converts to seconds.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 100px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value("animation-delay-end", "initial", "0s");
+test_computed_value("animation-delay-end", "500ms", "0.5s");
+test_computed_value("animation-delay-end", "calc(2 * 3s)", "6s");
+test_computed_value("animation-delay-end", "20s, 10s");
+test_computed_value("animation-delay-end", 'calc(10s + (sign(2cqw - 10px) * 5s))', '5s');
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-end-invalid.tentative.html b/css/css-animations/parsing/animation-delay-end-invalid.tentative.html
new file mode 100644
index 00000000000000..e46d717efc592f
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-end-invalid.tentative.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-delay-end with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-end">
+<meta name="assert" content="animation-delay-end supports only the grammar '<time [0s,∞]> #'.">
+<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-delay-end", "infinite");
+test_invalid_value("animation-delay-end", "0");
+test_invalid_value("animation-delay-end", "1s 2s");
+test_invalid_value("animation-delay-end", "1s 2s 3s");
+test_invalid_value("animation-delay-end", "initial, 3s");
+test_invalid_value("animation-delay-end", "3s, initial");
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-end-valid.tentative.html b/css/css-animations/parsing/animation-delay-end-valid.tentative.html
new file mode 100644
index 00000000000000..ddd9ddc89d4429
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-end-valid.tentative.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-delay-end with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-end">
+<meta name="assert" content="animation-delay-end supports the full grammar '<time [0s,∞]> #'.">
+<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-delay-end", "0s");
+test_valid_value("animation-delay-end", "10s");
+test_valid_value("animation-delay-end", "20s, 10s");
+test_valid_value("animation-delay-end", "calc(2 * 3s)");
+test_valid_value("animation-delay-end", "initial");
+test_valid_value("animation-delay-end", "inherit");
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-invalid.html b/css/css-animations/parsing/animation-delay-invalid.html
index 1569497bb6a452..4aaed10760f1a9 100644
--- a/css/css-animations/parsing/animation-delay-invalid.html
+++ b/css/css-animations/parsing/animation-delay-invalid.html
@@ -3,8 +3,8 @@
 <head>
 <meta charset="utf-8">
 <title>CSS Animations: parsing animation-delay with invalid values</title>
-<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay">
-<meta name="assert" content="animation-delay supports only the grammar '<single-animation-play-state> #'.">
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay">
+<meta name="assert" content="animation-delay rejects values outside the Level 2 shorthand grammar.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
diff --git a/css/css-animations/parsing/animation-delay-shorthand.tentative.html b/css/css-animations/parsing/animation-delay-shorthand.tentative.html
new file mode 100644
index 00000000000000..2fdaf317bcb27e
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-shorthand.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: animation-delay shorthand</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_valid_value("animation-delay", "-5ms");
+test_valid_value("animation-delay", "0s");
+test_valid_value("animation-delay", "10s");
+test_valid_value("animation-delay", "20s, 10s");
+test_valid_value("animation-delay", "1s 2s");
+test_valid_value("animation-delay", "1s 2s, 3s 4s");
+
+test_computed_value("animation-delay", "-500ms", "-0.5s");
+test_computed_value("animation-delay", "calc(2 * 3s)", "6s");
+test_computed_value("animation-delay", "20s, 10s");
+test_computed_value("animation-delay", "1s 2s");
+test_computed_value("animation-delay", "1s 2s, 3s 4s");
+
+test_invalid_value("animation-delay", "infinite");
+test_invalid_value("animation-delay", "0");
+test_invalid_value("animation-delay", "1s 2s 3s");
+test_invalid_value("animation-delay", "initial, -3s");
+test_invalid_value("animation-delay", "-3s, initial");
+
+test_shorthand_value('animation-delay', '1s 2s', {
+  'animation-delay-start': '1s',
+  'animation-delay-end': '2s',
+});
+
+test_shorthand_value('animation-delay', '20s, 10s', {
+  'animation-delay-start': '20s, 10s',
+});
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style.animationDelayEnd = '5s';
+  target.style.animationDelay = '2s';
+  assert_equals(getComputedStyle(target).getPropertyValue('animation-delay-start'), '2s');
+  assert_equals(getComputedStyle(target).getPropertyValue('animation-delay-end'), '5s');
+  target.style.animationDelay = '';
+  target.style.animationDelayEnd = '';
+}, 'Single-value animation-delay sets start only and leaves end unchanged');
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-start-computed.tentative.html b/css/css-animations/parsing/animation-delay-start-computed.tentative.html
new file mode 100644
index 00000000000000..47ce2edcb79881
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-start-computed.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().animationDelayStart</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<meta name="assert" content="animation-delay-start converts to seconds.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 100px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value("animation-delay-start", "initial", "0s");
+test_computed_value("animation-delay-start", "-500ms", "-0.5s");
+test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s");
+test_computed_value("animation-delay-start", "20s, 10s");
+test_computed_value("animation-delay-start", 'calc(10s + (sign(2cqw - 10px) * 5s))', '5s');
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-start-invalid.tentative.html b/css/css-animations/parsing/animation-delay-start-invalid.tentative.html
new file mode 100644
index 00000000000000..7f1a70282fdf14
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-start-invalid.tentative.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-delay-start with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<meta name="assert" content="animation-delay-start supports only the grammar '<time> #'.">
+<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-delay-start", "infinite");
+test_invalid_value("animation-delay-start", "0");
+test_invalid_value("animation-delay-start", "1s 2s");
+test_invalid_value("animation-delay-start", "1s 2s 3s");
+test_invalid_value("animation-delay-start", "initial, -3s");
+test_invalid_value("animation-delay-start", "-3s, initial");
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-start-valid.tentative.html b/css/css-animations/parsing/animation-delay-start-valid.tentative.html
new file mode 100644
index 00000000000000..51396a7dec9ca8
--- /dev/null
+++ b/css/css-animations/parsing/animation-delay-start-valid.tentative.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-delay-start with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay-start">
+<meta name="assert" content="animation-delay-start supports the full grammar '<time> #'.">
+<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-delay-start", "-5ms");
+test_valid_value("animation-delay-start", "0s");
+test_valid_value("animation-delay-start", "10s");
+test_valid_value("animation-delay-start", "1000ms");
+test_valid_value("animation-delay-start", "20s, 10s");
+test_valid_value("animation-delay-start", "calc(2 * 3s)");
+test_valid_value("animation-delay-start", "initial");
+test_valid_value("animation-delay-start", "inherit");
+</script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/animation-delay-valid.html b/css/css-animations/parsing/animation-delay-valid.html
index 5ff0416cc64241..d9d2b465ed398e 100644
--- a/css/css-animations/parsing/animation-delay-valid.html
+++ b/css/css-animations/parsing/animation-delay-valid.html
@@ -3,8 +3,8 @@
 <head>
 <meta charset="utf-8">
 <title>CSS Animations: parsing animation-delay with valid values</title>
-<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay">
-<meta name="assert" content="animation-delay supports the full grammar '<single-animation-play-state> #'.">
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-delay">
+<meta name="assert" content="animation-delay supports the Level 2 shorthand grammar for start and end delays.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
@@ -15,6 +15,9 @@
 test_valid_value("animation-delay", "0s");
 test_valid_value("animation-delay", "10s");
 test_valid_value("animation-delay", "20s, 10s");
+test_valid_value("animation-delay", "1s 2s");
+test_valid_value("animation-delay", "1s 2s, 3s 4s");
+test_valid_value("animation-delay", "-50ms 2s, -300ms 4s");
 </script>
 </body>
 </html>
diff --git a/css/css-animations/parsing/animation-shorthand.html b/css/css-animations/parsing/animation-shorthand.html
index 0856ab24a04634..5381964d2cde09 100644
--- a/css/css-animations/parsing/animation-shorthand.html
+++ b/css/css-animations/parsing/animation-shorthand.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <title>CSS Animations: animation sets longhands</title>
-<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation">
 <meta name="assert" content="animation supports the full grammar '<single-animation> #'.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -14,7 +14,7 @@
 test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
   'animation-duration': '1s',
   'animation-timing-function': 'cubic-bezier(0, -2, 1, 3)',
-  'animation-delay': '-3s',
+  'animation-delay-start': '-3s',
   'animation-iteration-count': '4',
   'animation-direction': 'reverse',
   'animation-fill-mode': 'both',
@@ -28,7 +28,7 @@
 test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
   'animation-duration': 'auto, 1s',
   'animation-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)',
-  'animation-delay': '0s, -3s',
+  'animation-delay-start': '0s, -3s',
   'animation-iteration-count': '1, 4',
   'animation-direction': 'reverse, normal',
   'animation-fill-mode': 'both, none',
@@ -42,7 +42,7 @@
 test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', {
   'animation-duration': '1s, auto',
   'animation-timing-function': 'cubic-bezier(0, -2, 1, 3), ease',
-  'animation-delay': '-3s, 0s',
+  'animation-delay-start': '-3s, 0s',
   'animation-iteration-count': '4, 1',
   'animation-direction': 'normal, reverse',
   'animation-fill-mode': 'none, both',
diff --git a/css/css-animations/parsing/animation-valid.html b/css/css-animations/parsing/animation-valid.html
index e0b54dca2f2655..df3332780ce417 100644
--- a/css/css-animations/parsing/animation-valid.html
+++ b/css/css-animations/parsing/animation-valid.html
@@ -11,7 +11,7 @@
 </head>
 <body>
 <script>
-// <single-animation> = <time> || <easing-function> || <time> ||
+// <single-animation> = <time> || <easing-function> || <'animation-delay-start'> ||
 // <single-animation-iteration-count> || <single-animation-direction> ||
 // <single-animation-fill-mode> || <single-animation-play-state> ||
 // [ none | <keyframes-name> ]
diff --git a/css/css-animations/parsing/keyframes-allowed-properties.html b/css/css-animations/parsing/keyframes-allowed-properties.html
index f682920b35769e..2eab83d47bdb17 100644
--- a/css/css-animations/parsing/keyframes-allowed-properties.html
+++ b/css/css-animations/parsing/keyframes-allowed-properties.html
@@ -11,6 +11,8 @@
     margin-top: 10px;
     /* animation-timing-function is specially allowed */
     animation-timing-function: ease;
+    /* animation-composition is specially allowed */
+    animation-composition: add;
     /* All other animation properties are not allowed */
     animation-name: none;
     animation-duration: 1s;
@@ -18,6 +20,8 @@
     animation-direction: normal;
     animation-play-state: running;
     animation-delay: 0s;
+    animation-delay-start: 0s;
+    animation-delay-end: 0s;
     animation-fill-mode: none;
     /* The animation shorthand is also not allowed */
     animation: bar 1s infinite;