scroll-timeline-paused-animations.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/scroll-timeline-paused-animations.html - WPT Dashboard Interop Dashboard

<!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>