[ScrollTimeline] Add timeline to Element.animate()

This patch adds a timeline option to Element.animate() function based on the recent spec change: w3c/csswg-drafts#5013. Change-Id: Ibf7e6f824f9e013f62da015cebdbc893255142dd Bug: 1080720 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2220352 Commit-Queue: Yi Gu <[email protected]> Reviewed-by: Majid Valipour <[email protected]> Cr-Commit-Position: refs/heads/master@{#773733}
web-platform-tests · Jun 1, 2020 · a0740be · a0740be
1 parent d3ea885
commit a0740be
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/scroll-animations/animation-with-animatable-interface.html b/scroll-animations/animation-with-animatable-interface.html
@@ -0,0 +1,70 @@
+<html class="reftest-wait">
+<title>Scroll-linked animation with Animatable interface</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
+<meta name="assert" content="ScrollTimeline should work with animatable
+interface">
+<link rel="match" href="animation-ref.html">
+
+<script src="/web-animations/testcommon.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+  #box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+
+  #covered {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  #scroller {
+    overflow: auto;
+    height: 100px;
+    width: 100px;
+    will-change: transform;
+    /* force compositing */
+  }
+
+  #contents {
+    height: 1000px;
+    width: 100%;
+  }
+</style>
+
+<div id="box"></div>
+<div id="covered"></div>
+<div id="scroller">
+  <div id="contents"></div>
+</div>
+
+<script>
+  const scroller = document.getElementById('scroller');
+  const scroll_timeline = new ScrollTimeline({
+    scrollSource: scroller,
+    timeRange: 1000
+  });
+  const box = document.getElementById('box');
+  const animation = box.animate(
+    [
+      { transform: 'translateY(0)', opacity: 1 },
+      { transform: 'translateY(200px)', opacity: 0 }
+    ], {
+      duration: 1000,
+      timeline: scroll_timeline
+    }
+  );
+
+  animation.ready.then(() => {
+    // Move the scroller to the halfway point.
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+    scroller.scrollTop = 0.5 * maxScroll;
+
+    waitForAnimationFrames(2).then(_ => {
+      takeScreenshot();
+    });
+  });
+</script>
diff --git 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
@@ -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' } },
 ];
+
+// There is currently only ScrollTimeline that can be constructed and used here
+// beyond document timeline. Given that ScrollTimeline is not stable as of yet
+// it's tested in scroll-animations/animation-with-animatable-interface.html.
+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'
+  },
+];