1 files changed, 143 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/scroll-animations/multiple-scroll-offsets.html b/tests/wpt/web-platform-tests/scroll-animations/multiple-scroll-offsets.html
new file mode 100644
index 00000000000..026b2e7673c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/scroll-animations/multiple-scroll-offsets.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>ScrollTimeline current time algorithm</title>
+<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="./resources/scrolltimeline-utils.js"></script>
+
+<body></body>
+
+<script>
+'use strict';
+
+promise_test(async t => {
+  const scroller = setupScrollTimelineTest();
+  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
+
+  const scrollTimeline = new ScrollTimeline({
+    scrollSource: scroller,
+    timeRange: scrollerSize,
+    orientation: 'block',
+    scrollOffsets: [CSS.px(10), CSS.px(20), CSS.px(40), CSS.px(70), CSS.px(90)],
+  });
+
+  var offset = 0;
+  var w = 1 / 4; // offset weight
+  var p = 0;     // progress within the offset
+
+  scroller.scrollTop = 10;
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  p = (12 - 10) / (20 - 10);
+  scroller.scrollTop = 12;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  offset = 1;
+  p = 0;
+  scroller.scrollTop = 20;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  p = (35 - 20) / (40 - 20);
+  scroller.scrollTop = 35;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  offset = 2;
+  p = 0;
+  scroller.scrollTop = 40;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  p = (60 - 40) / (70 - 40);
+  scroller.scrollTop = 60;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  offset = 3;
+  p = 0;
+  scroller.scrollTop = 70;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  p = (80 - 70) / (90 - 70);
+  scroller.scrollTop = 80;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  scroller.scrollTop = 90;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+}, 'currentTime calculations when multiple scroll offsets are specified');
+
+promise_test(async t => {
+  const scroller = setupScrollTimelineTest();
+  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
+
+  var scrollTimeline = new ScrollTimeline({
+    scrollSource: scroller,
+    timeRange: scrollerSize,
+    orientation: 'block',
+    scrollOffsets: [CSS.px(300), CSS.px(200), CSS.px(10)],
+  });
+
+  scroller.scrollTop = 250;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, 0,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  scroller.scrollTop = 400;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  scrollTimeline = new ScrollTimeline({
+    scrollSource: scroller,
+    timeRange: scrollerSize,
+    orientation: 'block',
+    scrollOffsets: [CSS.px(0), CSS.px(400), CSS.px(200)],
+  });
+
+  scroller.scrollTop = 100;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, 0.25 * 0.5 * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+
+  scrollTimeline = new ScrollTimeline({
+    scrollSource: scroller,
+    timeRange: scrollerSize,
+    orientation: 'block',
+    scrollOffsets: [CSS.px(200), CSS.px(0), CSS.px(400)],
+  });
+
+  scroller.scrollTop = 200;
+  await waitForNextFrame();
+  assert_times_equal(
+    scrollTimeline.currentTime, 0.5 * scrollerSize + 0.5 * 0.5 * scrollerSize,
+    "current time calculation when scroll = " + scroller.scrollTop);
+}, 'currentTime calculations when overlapping scroll offsets are specified');
+</script>