<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<script src="/web-animations/resources/keyframe-utils.js"></script>
<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
<title>Animation range updates play state</title>
</head>
<style type="text/css">
  @keyframes anim {
    from { background-color:  blue; }
    to { background-color:  white; }
  }
  #scroller {
    border:  10px solid lightgray;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 300px;
    height: 200px;
  }
  #target {
    margin-top:  800px;
    margin-bottom: 800px;
    margin-left:  10px;
    margin-right:  10px;
    width: 100px;
    height: 100px;
    z-index: -1;
    background-color: green;
    animation:  anim auto both linear;
    animation-timeline:  --t1;
    view-timeline:  --t1;
  }
</style>
<body>
  <div id="scroller">
    <div id="target"></div>
  </div>
</body>
<script type="text/javascript">
  async function runTest() {
    promise_test(async t => {
      anim = target.getAnimations()[0];
      await anim.ready;

      // Cover range = 600px to 900px

      scroller.scrollTop = 750;
      await waitForNextFrame();

      // Animation is running in the active phase.
      await runAndWaitForFrameUpdate(() => {
        anim.rangeStart = 'contain 0%';  // 700px
        anim.rangeEnd = 'contain 100%';  // 800px
      });
      assert_equals(anim.playState, 'running');
      assert_percents_equal(anim.startTime, 100/3);
      assert_percents_equal(anim.currentTime, 100/6);

      // Animation in the after phase and switches to the finished state.
      await runAndWaitForFrameUpdate(() => {
        anim.rangeStart = 'entry 0%';  // 600px
        anim.rangeEnd = 'entry 100%';  // 700px
      });
      assert_equals(anim.playState, 'finished');
      assert_percents_equal(anim.startTime, 0);
      // In the after phase, so current time is clamped.
      assert_percents_equal(anim.currentTime, 100/3);

      // Animation in the before phase and switches back to the running state.
      await runAndWaitForFrameUpdate(() => {
        anim.rangeStart = 'exit 0%';  // 800px
        anim.rangeEnd = 'exit 100%';  // 900px
      });
      assert_equals(anim.playState, 'running');
      assert_percents_equal(anim.startTime, 200/3);
      assert_percents_equal(anim.currentTime, -100/6);

    }, 'Changing the animation range updates the play state');
  }

  window.onload = runTest;
</script>
