From 8f530bde4ba2fe6b36a894e76623a3f2d4905970 Mon Sep 17 00:00:00 2001 From: Yi Gu Date: Mon, 1 Jun 2020 08:05:43 -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 --- .../animation-with-animatable-interface.html | 70 +++++++++++++++++++ .../interfaces/Animatable/animate.html | 12 ++++ web-animations/resources/keyframe-tests.js | 29 ++++++++ 3 files changed, 111 insertions(+) create mode 100644 scroll-animations/animation-with-animatable-interface.html diff --git a/scroll-animations/animation-with-animatable-interface.html b/scroll-animations/animation-with-animatable-interface.html new file mode 100644 index 000000000000000..4c3fa027fd073e5 --- /dev/null +++ b/scroll-animations/animation-with-animatable-interface.html @@ -0,0 +1,70 @@ + +Scroll-linked animation with Animatable interface + + + + + + + + + +
+
+
+
+
+ + \ No newline at end of file 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..cffb1ef31f1dc2d 100644 --- a/web-animations/resources/keyframe-tests.js +++ b/web-animations/resources/keyframe-tests.js @@ -796,3 +796,32 @@ const gInvalidKeyframeEffectOptionTests = [ { desc: 'a variable easing', input: { easing: 'var(--x)' } }, { desc: 'a multi-value easing', input: { easing: 'ease-in-out, ease-out' } }, ]; + +// For timelines that cannot be constructed here we test them separately. e.g. +// external/wpt/scroll-animations/animation-with-animatable-interface.html tests +// ScrollTimeline. +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' + }, +]; \ No newline at end of file