1 files changed, 166 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/scroll-timeline-progress.tentative.html b/testing/web-platform/tests/web-animations/interfaces/Animation/scroll-timeline-progress.tentative.html
new file mode 100644
index 0000000000..b40e72482b
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/interfaces/Animation/scroll-timeline-progress.tentative.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Animation.progress</title>
+<link rel="help"
+href="https://drafts.csswg.org/web-animations-2/#the-progress-of-an-animation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<script src="../../../scroll-animations/scroll-timelines/testcommon.js"></script>
+<body>
+  <style>
+    .scroller {
+      overflow-x: hidden;
+      overflow-y: auto;
+      height: 200px;
+      width: 100px;
+      will-change: transform;
+    }
+    .contents {
+      height: 1200px;
+      width: 100%;
+    }
+    #target {
+      height:  100px;
+      width:  100px;
+      background-color: green;
+      margin-top: -1000px;
+    }
+  </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;
+
+  assert_equals(animation.currentTime, null,
+      "The current time is null in Idle state.");
+  assert_equals(animation.progress, null,
+      "The progress is null since the currentTime is unresolved.");
+
+  animation.play();
+  assert_true(animation.pending, "Animation is in the pending state.");
+  assert_equals(animation.currentTime, null,
+      "The current time remains null while in the pending state.");
+  assert_equals(animation.progress, null,
+      "The progress is null since the currentTime is unresolved.");
+
+  await animation.ready;
+  // Verify initial start and current times once ready.
+  assert_percents_equal(animation.currentTime, 0,
+      "The current time is resolved when ready.");
+  assert_equals(animation.progress, 0, "The progress is should be zero.");
+
+  scroller.scrollTop = 0.4 * maxScroll;
+
+  await waitForNextFrame();
+  assert_percents_equal(animation.currentTime, 40,
+      "currentTime reflects progress as a percentage");
+  assert_approx_equals(animation.progress, 0.4, 0.01,
+      "The progress is should match the scroll progress.");
+}, "animation.progress reflects the progress of a scroll animation as a "+
+   "number between 0 and 1");
+
+promise_test(async t => {
+  const animation = createScrollLinkedAnimation(t);
+  const scroller = animation.timeline.source;
+  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+  animation.play();
+  await animation.ready;
+  // Verify initial start and current times once ready.
+  assert_percents_equal(animation.currentTime, 0,
+      "The current time is resolved when ready.");
+  assert_equals(animation.progress, 0, "The progress is should be zero.");
+
+  scroller.scrollTop = 0.4 * maxScroll;
+  await waitForNextFrame();
+
+  let timing = animation.effect.getComputedTiming();
+  // iteration duration should be 100%, progress should reflect 40%.
+  assert_percents_equal(timing.duration, 100);
+  assert_percents_equal(animation.currentTime, 40,
+      "currentTime reflects progress as a percentage");
+  assert_approx_equals(animation.progress, 0.4, 0.01,
+      "The progress is should match the scroll progress.");
+      timing = animation.effect.getComputedTiming();
+
+  animation.effect.updateTiming({ iterations: 2 });
+
+  timing = animation.effect.getComputedTiming();
+  // iteration duration should be 50%, progress should still reflect 40%
+  // as it measures currentTime / effect endTime.
+  assert_percents_equal(timing.duration, 50);
+  assert_percents_equal(animation.currentTime, 40,
+      "currentTime reflects progress as a percentage");
+  assert_approx_equals(animation.progress, 0.4, 0.01,
+      "The progress is should match the scroll progress.");
+}, "animation.progress reflects the overall progress of a scroll animation " +
+   "with multiple iterations.");
+
+promise_test(async t => {
+  const scroller = createScroller(t);
+  const view_timeline = createViewTimeline(t);
+
+  const animation = createAnimation(t);
+  animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) };
+  animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) };
+  animation.timeline = view_timeline;
+
+  await animation.ready;
+
+  // Cover range is [0, 300]
+  // Contain range is [100, 200]
+  // rangeStart offset of 10% => 110px
+  // rangeEnd offset of 90% => 190px
+  const target_pct = 40;
+  const target_scroll_top = 110 + (target_pct / 100) * (190 - 110);
+  scroller.scrollTop = target_scroll_top;
+  await waitForNextFrame();
+
+  const start_time = 110 / 300 * 100;
+  const timeline_time = target_scroll_top / 300 * 100;
+  const expected_current_time = timeline_time - start_time;
+  assert_percents_equal(animation.currentTime, expected_current_time,
+      "currentTime reflects progress as a percentage");
+  assert_approx_equals(animation.progress, target_pct / 100, 0.01,
+    "progress should reflect fraction of view timeline range scroll through.");
+}, "animation.progress reflects the overall progress of a scroll animation " +
+   "that uses a view-timeline.");
+
+promise_test(async t => {
+  const scroller = createScroller(t);
+  const view_timeline = createViewTimeline(t);
+
+  const animation = createAnimation(t);
+  animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) };
+  animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) };
+  animation.timeline = view_timeline;
+
+  await animation.ready;
+
+  // Cover range is [0, 300]
+  // Contain range is [100, 200]
+  // rangeStart offset of 10% => 110px
+  // rangeEnd offset of 10% => 190px
+
+  scroller.scrollTop = 100;
+  await waitForNextFrame();
+  let timing = animation.effect.getComputedTiming();
+  assert_less_than(animation.currentTime.value, 0, "currentTime is negative");
+  assert_approx_equals(animation.progress, 0, 0.01, "progress is zero when " +
+    "scroll offset is less than range start.");
+
+  scroller.scrollTop = 200;
+  await waitForNextFrame();
+  assert_approx_equals(animation.currentTime.value, timing.endTime.value, 0.01,
+    "currentTime has reached endTime");
+  assert_approx_equals(animation.progress, 1, 0.01, "progress is one when " +
+    "scroll offset goes past than range end.");
+}, "progresss of a view-timeline is bounded between 0 and 1.");
+
+</script>
+</body>