<!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>
