1 files changed, 109 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html
new file mode 100644
index 0000000000..d0671e5f23
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<title>Deferred timelines via Animation.timeline</title>
+<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+
+<main id=main></main>
+<script>
+  function inflate(t, template) {
+    t.add_cleanup(() => main.replaceChildren());
+    main.append(template.content.cloneNode(true));
+    main.offsetTop;
+  }
+
+  async function scrollTop(e, value) {
+    e.scrollTop = value;
+    await waitForNextFrame();
+  }
+</script>
+<style>
+  @keyframes anim {
+    from { width: 0px; }
+    to { width: 200px; }
+  }
+  .scroller {
+    overflow-y: hidden;
+    width: 200px;
+    height: 200px;
+  }
+  .scroller > .content {
+    margin: 400px 0px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+  .animating {
+    background-color: coral;
+    width: 0px;
+    animation: anim auto linear;
+    animation-timeline: --t1;
+  }
+  .timeline {
+    scroll-timeline-name: --t1;
+  }
+  .scope {
+    timeline-scope: --t1;
+  }
+</style>
+
+<template id=animation_timeline_attached>
+  <div class="scope">
+    <div class=animating>Test</div>
+    <div class="scroller timeline">
+      <div class="content animating"></div>
+    </div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    inflate(t, animation_timeline_attached);
+    let scroller = main.querySelector('.scroller');
+    let animating = Array.from(main.querySelectorAll('.animating'));
+
+    assert_equals(animating.length, 2);
+    let animations = animating.map((e) => e.getAnimations()[0]);
+    assert_equals(animations.length, 2);
+
+    // animations[0] is attached via deferred timeline (timeline-scope),
+    // and animations[1] is attached directly.
+    assert_equals(animations[0].timeline, animations[1].timeline);
+  }, 'Animation.timeline returns attached timeline');
+</script>
+
+<template id=animation_timeline_inactive>
+  <div class="scope">
+    <div class=animating>Test</div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    inflate(t, animation_timeline_inactive);
+    let scroller = main.querySelector('.scroller');
+    let animating = main.querySelector('.animating');
+
+    assert_equals(animating.getAnimations()[0].timeline, null);
+  }, 'Animation.timeline returns null for inactive deferred timeline');
+</script>
+
+<template id=animation_timeline_overattached>
+  <div class="scope">
+    <div class=animating>Test</div>
+    <div class="scroller timeline">
+      <div class="content"></div>
+    </div>
+    <div class="scroller timeline">
+      <div class="content"></div>
+    </div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    inflate(t, animation_timeline_overattached);
+    let scroller = main.querySelector('.scroller');
+    let animating = main.querySelector('.animating');
+
+    assert_equals(animating.getAnimations()[0].timeline, null);
+  }, 'Animation.timeline returns null for inactive (overattached) deferred timeline');
+</script>