animation-events.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/animation-events.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html id="top">

<meta charset="utf-8">

<title>View timeline animation events</title>

<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#events">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/web-animations/testcommon.js"></script>

<style type="text/css">

  @keyframes anim {

    from { transform: translateX(0); }

    to   { transform: translateX(100px); }

  #target {

    background: green;

    height: 100px;

    width: 100px;

    margin-bottom: 150vh;

    animation-timeline: view();

  .animate {

    animation:  anim auto;

</style>

<body>

  <div id="target"></div>

</body>

<script type="text/javascript">

  promise_test(async t => {

    const target = document.getElementById('target');

    // Create a timeline and advance to the next frame to ensure that the

    // timeline has a value for currentTime.

    await waitForNextFrame();

    const timeline = new ViewTimeline({ subject: target });

    await waitForNextFrame();

    let animationstart_events = 0;

    let animationend_events = 0;

    document.addEventListener('animationstart', () => {

      animationstart_events++;

});

    document.addEventListener('animationend', () => {

      animationend_events++;

});

    // Start the animation and swap out its timeline while still play-pending

    // so that it already has a value for current time.

    target.classList.add('animate');

    const anim = target.getAnimations();

    anim.timeline = timeline;

    // Introduce a style change that will make the timeline state stale when

    // "ticked" at the start of the next animation frame.

    target.style = 'margin-top: 150vh';

    assert_false(!!anim.startTime,

                 'Start time deferred until timeline is updated');

    // Verify that we are not evaluating a start time based on a stale timeline.

    await waitForNextFrame();

    await waitForNextFrame();

    assert_equals(animationstart_events, 0,

                  'Target initially off-screen and no animationstart event');

    assert_equals(animationend_events, 0,

                  'Target initially off-screen and no animationend event');

    const scroller = document.scrollingElement;

    scroller.scrollTop = target.getBoundingClientRect().top;

    await waitForNextFrame();

    await waitForNextFrame();

    assert_equals(animationstart_events, 1,

                  'scrollstart event received after scrolling into view.');

    assert_equals(animationend_events, 0,

                  "No scrollend event until after scrolling out of view");

    scroller.scrollTop = target.getBoundingClientRect().bottom;

    await waitForNextFrame();

    await waitForNextFrame();

    assert_equals(animationstart_events, 1,

                  'No additional scrollstart event');

    assert_equals(animationend_events, 1,

                  'scrollend event received after scrolling out of view');

  }, 'View timelime generates animationstart and animationend events');

</script>