<!DOCTYPE html>
<title>Used values of view-timeline properties</title>
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis">
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name">
<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; }
    to { z-index: 100; }
  }
  .scroller {
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .scroller > div {
    width: 300px;
    height: 300px;
    z-index: -1;
  }
</style>
<main id=main></main>
<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 scrollLeft(e, value) {
    e.scrollLeft = value;
    await waitForNextFrame();
  }
</script>

<template id=omitted_axis>
  <style>
    #target {
      view-timeline-name: --t1, --t2; /* Two items */
      view-timeline-axis: inline; /* One item */
      animation: anim 1s linear;
      animation-timeline: --t2;
    }
  </style>
  <div id=scroller class=scroller>
    <div id=target></div>
  </div>
</template>
<script>
  promise_test(async (t) => {
    inflate(t, omitted_axis);
    assert_equals(getComputedStyle(target).zIndex, '-1');

    // enter 0% is at scrollTop/Left = -100
    // exit 100% is at scrollTop/Left = 300
    // This means that at scrollTop/Left=0, the animation is at 25%.

    await scrollTop(scroller, 0);
    await scrollLeft(scroller, 0);
    assert_equals(getComputedStyle(target).zIndex, '25');

    // The timeline should be inline-axis:
    await scrollTop(scroller, 100); // 50%
    await scrollLeft(scroller, 40); // 35%
    assert_equals(getComputedStyle(target).zIndex, '35');
  }, 'Use the last value from view-timeline-axis if omitted');
</script>

<template id=omitted_inset>
  <style>
    #target {
      view-timeline-name: --t1, --t2; /* Two items */
      view-timeline-inset: 100px; /* One item */
      animation: anim 1s linear;
      animation-timeline: --t2;
    }
  </style>
  <div id=scroller class=scroller>
    <div id=target></div>
  </div>
</template>
<script>
  promise_test(async (t) => {
    inflate(t, omitted_inset);
    assert_equals(getComputedStyle(target).zIndex, '-1');

    // 0% is normally at at scrollTop = -100
    // 100% is normally at scrollTop/Left = 300
    // However, we have a 100px inset in both ends, which makes the
    // range [0, 200].

    await scrollTop(scroller, 0);
    assert_equals(getComputedStyle(target).zIndex, '0');
    await scrollTop(scroller, 100); // 50%
    assert_equals(getComputedStyle(target).zIndex, '50');
  }, 'Use the last value from view-timeline-inset if omitted');
</script>
