1 files changed, 216 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation.html b/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation.html
new file mode 100644
index 0000000000..bc7ab4a476
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test basic functionality of scroll linked animation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="testcommon.js"></script>
+<style>
+  .scroller {
+    overflow: auto;
+    height: 100px;
+    width: 100px;
+    will-change: transform;
+  }
+  .contents {
+    height: 1000px;
+    width: 100%;
+  }
+</style>
+<div id="log"></div>
+<script>
+  'use strict';
+  promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.source;
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+
+    // Verify initial start and current times in Idle state.
+    assert_equals(animation.currentTime, null,
+      "The current time is null in Idle state.");
+    assert_equals(animation.startTime, null,
+      "The start time is null in Idle state.");
+    animation.play();
+    assert_true(animation.pending, "Animation is in pending state.");
+    // Verify initial start and current times in Pending state.
+    assert_percents_equal(animation.currentTime, 0,
+      "The current time is zero in Pending state.");
+    assert_percents_equal(animation.startTime, 0,
+      "The start time is zero in Pending state.");
+
+    await animation.ready;
+    // Verify initial start and current times in Playing state.
+    assert_percents_equal(animation.currentTime, 0,
+      "The current time is zero in Playing state.");
+    assert_percents_equal(animation.startTime, 0,
+      "The start time is zero in Playing state.");
+
+    // Now do some scrolling and make sure that the Animation current time is
+    // correct.
+    scroller.scrollTop = 0.4 * maxScroll;
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    assert_percents_equal(animation.currentTime, animation.timeline.currentTime,
+      "The current time corresponds to the scroll position of the scroller.");
+    assert_times_equal(
+      animation.effect.getComputedTiming().progress,
+      // Division by 100 is temporary, it will be removed when progress returns
+      // a CSSNumericValue instead of a double 0-1
+      animation.timeline.currentTime.value / 100,
+      'Effect progress corresponds to the scroll position of the scroller.');
+}, 'Animation start and current times are correct for each animation state.');
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.source;
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+    // Advance the scroller.
+    scroller.scrollTop = 0.2 * maxScroll;
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+
+    // Verify initial start and current times in Idle state.
+    assert_equals(animation.currentTime, null,
+      "The current time is null in Idle state.");
+    assert_equals(animation.startTime, null,
+      "The start time is null in Idle state.");
+    animation.play();
+    // Verify initial start and current times in Pending state.
+    assert_percents_equal(animation.currentTime, animation.timeline.currentTime,
+      "The current time is a hold time in Pending state.");
+    assert_percents_equal(animation.startTime, 0,
+      "The start time is zero in Pending state.");
+
+    await animation.ready;
+    // Verify initial start and current times in Playing state.
+    assert_percents_equal(animation.currentTime, animation.timeline.currentTime,
+      "The current corresponds to the scroll position of the scroller.");
+      assert_percents_equal(animation.startTime, 0,
+      "The start time is zero in Playing state.");
+}, 'Animation start and current times are correct for each animation state' +
+    ' when the animation starts playing with advanced scroller.');
+
+promise_test(async t => {
+    const timeline = createScrollTimeline(t);
+    const animation1 = createScrollLinkedAnimation(t, timeline);
+    const animation2 = createScrollLinkedAnimation(t, timeline);
+    const scroller = timeline.source;
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+    // Advance the scroller.
+    scroller.scrollTop = 0.4 * maxScroll;
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+
+    // Verify initial start and current times in Idle state.
+    assert_equals(animation1.currentTime, null,
+      "The current time is null in Idle state.");
+    assert_equals(animation1.startTime, null,
+      "The start time is null in Idle state.");
+    assert_equals(animation2.currentTime, null,
+      "The current time is null in Idle state.");
+    assert_equals(animation2.startTime, null,
+      "The start time is null in Idle state.");
+    animation1.play();
+    animation2.play();
+    // Verify initial start and current times in Pending state.
+    assert_percents_equal(animation1.currentTime, timeline.currentTime,
+      "The current time corresponds to the scroll position of the scroller" +
+        " in Pending state.");
+    assert_percents_equal(animation1.startTime, 0,
+      "The start time is zero in Pending state.");
+    assert_percents_equal(animation2.currentTime, timeline.currentTime,
+      "The current time corresponds to the scroll position of the scroller" +
+        " in Pending state.");
+    assert_percents_equal(animation2.startTime, 0,
+      "The start time is zero in Pending state.");
+
+    await animation1.ready;
+    await animation2.ready;
+    // Verify initial start and current times in Playing state.
+    assert_percents_equal(animation1.currentTime, timeline.currentTime,
+      "The current corresponds to the scroll position of the scroller.");
+    assert_percents_equal(animation1.startTime, 0,
+      "The start time is zero in Playing state.");
+    assert_percents_equal(animation2.currentTime, timeline.currentTime,
+      "The current corresponds to the scroll position of the scroller.");
+    assert_percents_equal(animation2.startTime, 0,
+      "The start time is zero in Playing state.");
+}, 'Animation start and current times are correct when multiple animations' +
+    ' are attached to the same timeline.');
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.source;
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+    animation.play();
+    await animation.ready;
+    // Advance the scroller to max position.
+    scroller.scrollTop = maxScroll;
+
+    await animation.finished;
+
+    assert_equals(animation.playState, 'finished',
+      'Animation state is in finished state.');
+      assert_percents_equal(animation.currentTime, 100,
+        'Animation current time is at 100% on reverse scrolling.');
+
+    // Scroll back.
+    scroller.scrollTop = 0.2 * maxScroll;
+
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    // Verify animation state and current time on reverse scrolling.
+    assert_equals(animation.playState, 'running',
+      'Animation state is playing on reverse scrolling.');
+    assert_percents_equal(animation.currentTime, 20,
+      'Animation current time is updated on reverse scrolling.');
+}, 'Finished animation plays on reverse scrolling.');
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.source;
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+    animation.play();
+    await animation.ready;
+
+    // Advance the scroller to max position.
+    scroller.scrollTop =  maxScroll;
+    await animation.finished;
+
+    var sent_finish_event = false;
+    animation.onfinish = function() {
+      sent_finish_event = true;
+    };
+
+    // Scroll back.
+    scroller.scrollTop = 0.2 * maxScroll;
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    assert_false(sent_finish_event,
+                 "No animation finished event is sent on reverse scroll.");
+
+    scroller.scrollTop = maxScroll;
+    await animation.finished;
+
+    // Wait for next frame to allow the animation to send finish events. The
+    // finished promise fires before events are sent.
+    await waitForNextFrame();
+
+    assert_true(sent_finish_event,
+                 "Animation finished event is sent on reaching max scroll.");
+}, 'Sending animation finished events by finished animation on reverse ' +
+   'scrolling.');
+</script>