<!DOCTYPE html>
<title>view-timeline-name and and shadow trees</title>
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8135">
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8192">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="/resources/declarative-shadow-dom-polyfill.js"></script>

<main id=main></main>
<script>
  function inflate(t, template) {
    t.add_cleanup(() => main.replaceChildren());
    main.append(template.content.cloneNode(true));
    main.offsetTop;
  }

  setup(() => {
    polyfill_declarative_shadow_dom(document);
  });
</script>
<style>
  @keyframes anim {
    from { z-index: 100; }
    to { z-index: 100; }
  }
</style>


<template id=view_timeline_host>
  <style>
    .target {
      animation: anim 10s linear;
      animation-timeline: --timeline;
    }
    .scroller > div {
      view-timeline: --timeline x;
    }
  </style>
  <div class=scroller>
    <div>
      <div class=target>
        <template shadowrootmode=open>
          <style>
            :host {
              view-timeline: --timeline y;
            }
          </style>
        </template>
      </div>
    </div>
  </div>
  <style>
  </style>
</template>
<script>
  promise_test(async (t) => {
    inflate(t, view_timeline_host);
    let target = main.querySelector('.target');
    assert_equals(target.getAnimations().length, 1);
    let anim = target.getAnimations()[0];
    assert_not_equals(anim.timeline, null);
    assert_equals(anim.timeline.axis, 'y');
  }, 'Outer animation can see view timeline defined by :host');
</script>


<template id=view_timeline_slotted>
  <style>
    .target {
      animation: anim 10s linear;
      animation-timeline: --timeline;
    }
    .host {
      view-timeline: --timeline x;
    }
  </style>
  <div class=scroller>
    <div class=host>
      <template shadowrootmode=open>
        <style>
          ::slotted(.target) {
            view-timeline: --timeline y;
          }
        </style>
        <slot></slot>
      </template>
      <div class=target></div>
    </div>
  </div>
  <style>
  </style>
</template>
<script>
  promise_test(async (t) => {
    inflate(t, view_timeline_slotted);
    let target = main.querySelector('.target');
    assert_equals(target.getAnimations().length, 1);
    let anim = target.getAnimations()[0];
    assert_not_equals(anim.timeline, null);
    assert_equals(anim.timeline.axis, 'y');
  }, 'Outer animation can see view timeline defined by ::slotted');
</script>


<template id=view_timeline_part>
  <style>
    .host {
      view-timeline: --timeline y;
    }
    .host::part(foo) {
      view-timeline: --timeline x;
    }
  </style>
  <div class=host>
    <template shadowrootmode=open>
      <style>
          /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
          @keyframes anim2 {
            from { z-index: 100; }
            to { z-index: 100; }
          }
        .target {
          animation: anim2 10s linear;
          animation-timeline: --timeline;
        }
      </style>
      <div part=foo>
        <div class=target></div>
      </div>
    </template>
  </div>
  <style>
  </style>
</template>
<script>
  promise_test(async (t) => {
    inflate(t, view_timeline_part);
    let target = main.querySelector('.host').shadowRoot.querySelector('.target');
    assert_equals(target.getAnimations().length, 1);
    let anim = target.getAnimations()[0];
    assert_not_equals(anim.timeline, null);
    assert_equals(anim.timeline.axis, 'x');
  }, 'Inner animation can see view timeline defined by ::part');
</script>


<template id=view_timeline_shadow>
  <style>
    .target {
      animation: anim 10s linear;
      animation-timeline: --timeline;
    }
    .host {
      view-timeline: --timeline x;
    }
  </style>
  <div class=scroller>
    <div class=host>
      <template shadowrootmode=open>
        <style>
          div {
            view-timeline: --timeline y;
          }
        </style>
        <div>
          <slot></slot>
        </div>
      </template>
      <div class=target></div>
    </div>
  </div>
  <style>
  </style>
</template>
<script>
  promise_test(async (t) => {
    inflate(t, view_timeline_shadow);
    let target = main.querySelector('.target');
    assert_equals(target.getAnimations().length, 1);
    let anim = target.getAnimations()[0];
    assert_not_equals(anim.timeline, null);
    assert_equals(anim.timeline.axis, 'y');
  }, 'Slotted element can see view timeline within the shadow');
</script>
