From 9210d2c7151442c99c32bbd8d154c6a87946c6fe Mon Sep 17 00:00:00 2001
From: Yi Gu <yigu@chromium.org>
Date: Thu, 28 May 2020 15:08:26 -0700
Subject: [PATCH] [ScrollTimeline] Add timeline to Element.animate()

This patch adds a timeline option to Element.animate() function based on
the recent spec change: https://github.com/w3c/csswg-drafts/issues/5013.

Change-Id: Ibf7e6f824f9e013f62da015cebdbc893255142dd
Bug: 1080720
---
 .../interfaces/Animatable/animate.html        | 12 +++++++
 web-animations/resources/keyframe-tests.js    | 33 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/web-animations/interfaces/Animatable/animate.html b/web-animations/interfaces/Animatable/animate.html
index 00e68b429621f65..dad633ba9a2ca0e 100644
--- a/web-animations/interfaces/Animatable/animate.html
+++ b/web-animations/interfaces/Animatable/animate.html
@@ -202,6 +202,18 @@
 }, 'Element.animate() correctly sets the Animation\'s timeline when ' +
    'triggered on an element in a different document');
 
+for (const subtest of gAnimationTimelineTests) {
+  test(t => {
+    const anim = createDiv(t).animate(null, { timeline: subtest.timeline });
+    assert_not_equals(anim, null,
+                      'An animation sohuld be created');
+    assert_equals(anim.timeline, subtest.expectedTimeline,
+                  'Animation timeline should be '+
+                  subtest.expectedTimelineDescription);
+  }, 'Element.animate() correctly sets the Animation\'s timeline '
+     + subtest.description + ' in KeyframeAnimationOptions.');
+}
+
 test(t => {
   const anim = createDiv(t).animate(null, 2000);
   assert_equals(anim.playState, 'running');
diff --git a/web-animations/resources/keyframe-tests.js b/web-animations/resources/keyframe-tests.js
index 3cf3cf22bf8666a..a5339dc29093f41 100644
--- a/web-animations/resources/keyframe-tests.js
+++ b/web-animations/resources/keyframe-tests.js
@@ -796,3 +796,36 @@ const gInvalidKeyframeEffectOptionTests = [
   { desc: 'a variable easing', input: { easing: 'var(--x)' } },
   { desc: 'a multi-value easing', input: { easing: 'ease-in-out, ease-out' } },
 ];
+
+const scroll_timeline = new ScrollTimeline({ timeRange: 100 });
+const gAnimationTimelineTests = [
+  {
+    expectedTimeline: document.timeline,
+    expectedTimelineDescription: 'document.timeline',
+    description: 'with no timeline parameter'
+  },
+  {
+    timeline: undefined,
+    expectedTimeline: document.timeline,
+    expectedTimelineDescription: 'document.timeline',
+    description: 'with undefined timeline'
+  },
+  {
+    timeline: null,
+    expectedTimeline: null,
+    expectedTimelineDescription: 'null',
+    description: 'with null timeline'
+  },
+  {
+    timeline: document.timeline,
+    expectedTimeline: document.timeline,
+    expectedTimelineDescription: 'document.timeline',
+    description: 'with DocumentTimeline'
+  },
+  {
+    timeline: scroll_timeline,
+    expectedTimeline: scroll_timeline,
+    expectedTimelineDescription: 'ScrollTimeline',
+    description: 'with ScrollTimeline'
+  },
+];
\ No newline at end of file