<!DOCTYPE html>
<meta charset=utf-8>
<title>Scroll timeline with paused animations</title>
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation">
<link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
<script src="/css/css-animations/support/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
  @keyframes anim {
    from { width: 100px; }
    to { width: 200px; }
  }

  .fill-vh {
    width: 100px;
    height: 100vh;
  }
</style>
<body>
<div id="log"></div>
<script>
'use strict';

setup(assert_implements_animation_timeline);

async function resetScrollPosition() {
  // Reset to 0 so we don't affect following tests.
  document.scrollingElement.scrollTop = 0;
  return waitForNextFrame();
}

promise_test(async t => {
  const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
  const filling = addDiv(t, { class: 'fill-vh' });
  const scroller = document.scrollingElement;
  t.add_cleanup(resetScrollPosition);

  div.style.animation = 'anim 100s linear paused';
  div.style.animationTimeline = 'scroll(root)';
  await waitForCSSScrollTimelineStyle();

  const anim = div.getAnimations()[0];
  await anim.ready;
  assert_percents_equal(anim.currentTime, 0, 'timeline time reset');
  assert_equals(getComputedStyle(div).width, '100px');

  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  scroller.scrollTop = maxScroll;
  await waitForNextFrame();
  assert_equals(getComputedStyle(div).width, '100px');

}, 'Test that the scroll animation is paused');

promise_test(async t => {
  const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
  const filling = addDiv(t, { class: 'fill-vh' });
  const scroller = document.scrollingElement;
  await waitForNextFrame();

  div.style.animation = 'anim 100s linear forwards';
  div.style.animationTimeline = 'scroll(root)';
  await waitForCSSScrollTimelineStyle();

  const anim = div.getAnimations()[0];
  await anim.ready;
  assert_percents_equal(anim.currentTime, 0, 'timeline time reset');
  assert_equals(getComputedStyle(div).width, '100px');

  await waitForNextFrame();
  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  scroller.scrollTop = maxScroll;
  await waitForNextFrame();
  assert_equals(getComputedStyle(div).width, '200px');

  div.style.animationPlayState = 'paused';
  assert_equals(anim.playState, 'paused');
  assert_equals(getComputedStyle(div).width, '200px',
                'Current time preserved when pause-pending.');
  assert_true(anim.pending,
              'Pending state after changing animationPlayState');
  await anim.ready;
  assert_equals(getComputedStyle(div).width, '200px',
                'Current time preserved when paused.');
  assert_percents_equal(anim.timeline.currentTime, 100);
  document.scrollingElement.scrollTop = 0;
  await waitForNextFrame();
  assert_percents_equal(anim.timeline.currentTime, 0);
  assert_equals(getComputedStyle(div).width, '200px');
}, 'Test that the scroll animation is paused by updating animation-play-state');

</script>
</body>
