1 files changed, 144 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-delay-animation.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-delay-animation.html
new file mode 100644
index 0000000000..dfb0e59f5d
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-delay-animation.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<title>Animations using named timeline ranges</title>
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+  @keyframes anim {
+    from { z-index: 0; background-color: skyblue;}
+    to { z-index: 100; background-color: coral; }
+  }
+  #scroller {
+    border:  10px solid lightgray;
+    overflow-y: scroll;
+    width: 200px;
+    height: 200px;
+  }
+  #target {
+    margin: 800px 0px;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+    background-color: green;
+  }
+</style>
+<main id=main>
+</main>
+<template>
+  <div id=scroller>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  setup(assert_implements_animation_timeline);
+
+  function inflate(t, template) {
+    t.add_cleanup(() => main.replaceChildren());
+    main.append(template.content.cloneNode(true));
+  }
+  async function scrollTop(e, value) {
+    e.scrollTop = value;
+    await waitForNextFrame();
+  }
+  async function waitForAnimationReady(target) {
+    await waitForNextFrame();
+    await Promise.all(target.getAnimations().map(x => x.promise));
+  }
+  async function assertValueAt(scroller, target, args) {
+    await waitForAnimationReady(target);
+    await scrollTop(scroller, args.scrollTop);
+    assert_equals(getComputedStyle(target).zIndex, args.expected.toString());
+  }
+  function test_animation_delay(options) {
+    promise_test(async (t) => {
+      inflate(t, document.querySelector('template'));
+      let scroller = main.querySelector('#scroller');
+      let target = main.querySelector('#target');
+
+      target.style.viewTimeline = 't1 block';
+      // TODO(crbug.com/1375998): Create the timeline in a separate frame to
+      // work around a bug.
+      await waitForNextFrame();
+
+      target.style.animation = 'anim 10s linear';
+      target.style.animationTimeline = 't1';
+      target.style.animationDelayStart = options.startDelay;
+      target.style.animationDelayEnd = options.endDelay;
+
+      // Accommodates floating point precision errors at the endpoints.
+      target.style.animationFillMode = 'both';
+
+      // 0%
+      await assertValueAt(scroller, target,
+          { scrollTop: options.rangeStart, expected: 0 });
+      // 50%
+      await assertValueAt(scroller, target,
+          { scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 });
+      // 100%
+      await assertValueAt(scroller, target,
+          { scrollTop: options.rangeEnd, expected: 100 });
+
+      // Test before/after phases (need to clear the fill mode for that).
+      target.style.animationFillMode = 'initial';
+      await assertValueAt(scroller, target,
+          { scrollTop: options.rangeStart - 10, expected: -1 });
+      await assertValueAt(scroller, target,
+          { scrollTop: options.rangeEnd + 10, expected: -1 });
+      // Check 50% again without fill mode.
+      await assertValueAt(scroller, target,
+          { scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 });
+
+    }, `Animation with delays [${options.startDelay}, ${options.endDelay}]`);
+  }
+
+  test_animation_delay({
+    startDelay: 'initial',
+    endDelay: 'initial',
+    rangeStart: 600,
+    rangeEnd: 900
+  });
+
+  test_animation_delay({
+    startDelay: 'cover 0%',
+    endDelay: 'cover 100%',
+    rangeStart: 600,
+    rangeEnd: 900
+  });
+
+  test_animation_delay({
+    startDelay: 'contain 0%',
+    endDelay: 'contain 100%',
+    rangeStart: 700,
+    rangeEnd: 800
+  });
+
+  test_animation_delay({
+    startDelay: 'enter 0%',
+    endDelay: 'enter 100%',
+    rangeStart: 600,
+    rangeEnd: 700
+  });
+
+  test_animation_delay({
+    startDelay: 'exit 0%',
+    endDelay: 'exit 100%',
+    rangeStart: 800,
+    rangeEnd: 900
+  });
+
+  test_animation_delay({
+    startDelay: 'contain -50%',
+    endDelay: 'enter 200%',
+    rangeStart: 650,
+    rangeEnd: 800
+  });
+
+  test_animation_delay({
+    startDelay: 'enter 0%',
+    endDelay: 'exit 100%',
+    rangeStart: 600,
+    rangeEnd: 900
+  });
+</script>