<!DOCTYPE html>
<meta charset="utf-8">
<title>ScrollTimeline invalidation</title>
<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="testcommon.js"></script>
<style>
  .scroller {
    overflow: auto;
    height: 100px;
    width: 100px;
    will-change: transform;
  }
  .contents {
    height: 1000px;
    width: 100%;
  }
</style>
<div id="log"></div>

<script>
'use strict';

promise_test(async t => {
  const animation = createScrollLinkedAnimation(t);
  animation.effect.updateTiming({ duration: 350 });
  const scroller = animation.timeline.scrollSource;
  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  scroller.scrollTop = 0.2 * maxScroll;
  // Wait for new animation frame  which allows the timeline to compute new
  // current time.
  await waitForNextFrame();

  animation.play();
  await animation.ready;

  // Change scroller content size.
  scroller.firstChild.style.height = "500px";

  await animation.finished;
  const newTime = animation.effect.getTiming().duration;
  assert_times_equal(animation.currentTime, newTime,
    'Animation current time is updated after scroller invalidation.');

  assert_times_equal(
    animation.effect.getComputedTiming().localTime, newTime,
    'Effect local time is updated after scroller invalidation.');
}, 'Animation current time and effect local time are updated after scroller ' +
   'content size changes.');

promise_test(async t => {
  const animation = createScrollLinkedAnimation(t);
  animation.effect.updateTiming({ duration: 350 });
  const scroller = animation.timeline.scrollSource;
  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  scroller.scrollTop = 0.2 * maxScroll;
  // Wait for new animation frame  which allows the timeline to compute new
  // current time.
  await waitForNextFrame();

  animation.play();
  await animation.ready;

  // Change scroller size.
  scroller.style.height = "500px";

  await animation.finished;
  const newTime = animation.effect.getTiming().duration;
  assert_times_equal(animation.currentTime, newTime,
    'Animation current time is updated after scroller invalidation.');

  assert_times_equal(
    animation.effect.getComputedTiming().localTime, newTime,
    'Effect local time is updated after scroller invalidation.');
}, 'Animation current time and effect local time are updated after scroller ' +
   'size changes.');

promise_test(async t => {
  const timeline = createScrollTimeline(t);
  const scroller = timeline.scrollSource;
  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  // Instantiate scroll animation that resizes its scroll timeline scroller.
  const animation = new Animation(
    new KeyframeEffect(
      timeline.scrollSource.firstChild,
      [{ height: '1000px' }, { height: '2000px' }],
      { duration: 1000, }
    ), timeline);
  animation.play();
  await animation.ready;
  await waitForNextFrame();
  scroller.scrollTop = 0.2 * maxScroll;
  // Wait for new animation frame  which allows the timeline to compute new
  // current time.
  await waitForNextFrame();
  assert_times_equal(timeline.currentTime, 200,
    'Timeline current time is updated after animation frame.');
  await waitForNextFrame();
  assert_times_equal(timeline.currentTime, 163.636,
    'Timeline current time is updated after two animation frames and ' +
    'reflects single layout run.');
}, 'If scroll animation resizes its scroll timeline scroller, ' +
   'layout runs only once to reflect the initial update.');
</script>