view-timeline-paused-animations.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<title>View timeline with paused animations</title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">

<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-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 { z-index: 0; }

    to { z-index: 100; }

  #scroller {

    overflow: auto;

    width: 100px;

    height: 100px;

  .padding {

      height: 150px;

  #target {

    height: 50px;

    z-index: -1;

    animation: anim 1s linear;

    animation-timeline: view();

</style>

<div id=scroller>

  <div class="padding"></div> <!-- [0px, 150px]  -->

  <div id="target"></div> <!-- [150px, 200px] -->

  <div class="padding"></div> <!-- [200px, 350px]  -->

</div>

<script>

  setup(assert_implements_animation_timeline);

  async function scrollTop(e, value) {

    e.scrollTop = value;

    await waitForNextFrame();

  promise_test(async (t) => {

    const animation = target.getAnimations()[0];

    await animation.ready;

    assert_equals(getComputedStyle(target).zIndex, '-1', 'Initial state');

    await scrollTop(scroller, 125);

    assert_equals(getComputedStyle(target).zIndex, '50', 'Animation applies after scrolling');

    target.style.animationPlayState = 'paused';

    assert_equals(animation.playState, 'paused');

    assert_equals(getComputedStyle(target).zIndex, '50', 'Current time is preserved when pause-pending');

    assert_true(animation.pending, 'Pending state after changing animationPlayState');

    await animation.ready;

    assert_equals(getComputedStyle(target).zIndex, '50', 'Current time is preserved when paused');

    await scrollTop(scroller, 150);

    assert_equals(getComputedStyle(target).zIndex, '50', 'Current time is preserved when scrolling while paused');

  }, 'Test that a scroll-driven animation can be paused by updating animation-play-state');

</script>