Bug 1641870 [wpt PR 23847] - [ScrollTimeline] Add timeline to Element.animate(), a=testonly
authorYi Gu <yigu@chromium.org>
Thu, 04 Jun 2020 16:05:15 +0000
changeset 533935 136d98c9f8f7bccf3ba0c3dd9688f36734b0c7e5
parent 533934 87dddc685945a32d4f25ed24f1b9515c88a2674f
child 533936 da92a64f3273ed26c1660fd059723c19df96bfdc
push id37480
push userncsoregi@mozilla.com
push dateThu, 04 Jun 2020 22:00:12 +0000
treeherdermozilla-central@e33aea19d0c5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1641870, 23847, 1080720, 2220352, 773733
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1641870 [wpt PR 23847] - [ScrollTimeline] Add timeline to Element.animate(), a=testonly Automatic update from web-platform-tests [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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2220352 Commit-Queue: Yi Gu <yigu@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Cr-Commit-Position: refs/heads/master@{#773733} -- wpt-commits: a0740be4f6a5f18e016abd3dcadef53177dde234 wpt-pr: 23847 Differential Revision: https://phabricator.services.mozilla.com/D78334
testing/web-platform/tests/scroll-animations/animation-with-animatable-interface.html
testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
testing/web-platform/tests/web-animations/resources/keyframe-tests.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
\ No newline at end of file
--- a/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
+++ b/testing/web-platform/tests/web-animations/interfaces/Animatable/animate.html
@@ -197,16 +197,28 @@ async_test(t => {
     iframe.remove();
     t.done();
   }));
 
   document.body.appendChild(iframe);
 }, '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');
 }, 'Element.animate() calls play on the Animation');
 
 promise_test(async t => {
   const div = createDiv(t);
 
--- a/testing/web-platform/tests/web-animations/resources/keyframe-tests.js
+++ b/testing/web-platform/tests/web-animations/resources/keyframe-tests.js
@@ -791,8 +791,37 @@ const gInvalidKeyframeEffectOptionTests 
   { desc: 'a negative iterations', input: { iterations: -1 } },
   { desc: 'a blank easing', input: { easing: '' } },
   { desc: 'an unrecognized easing', input: { easing: 'unrecognised' } },
   { desc: 'an \'initial\' easing', input: { easing: 'initial' } },
   { desc: 'an \'inherit\' easing', input: { easing: 'inherit' } },
   { 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'
+  },
+];
\ No newline at end of file