onremove.html - mozsearch

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:
- /web-animations/interfaces/Animation/onremove.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>Animation.onremove</title>

<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-onremove">

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

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

<script src="../../testcommon.js"></script>

<body>

<div id="log"></div>

<script>

'use strict';

async_test(t => {

  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  let finishedTimelineTime = null;

  animB.onfinish = event => {

    finishedTimelineTime = event.timelineTime;

};

  animA.onremove = t.step_func_done(event => {

    assert_equals(animA.replaceState, 'removed');

    assert_equals(event.currentTime, 1);

    assert_true(finishedTimelineTime != null, 'finished event fired');

    assert_equals(event.timelineTime, finishedTimelineTime,

                'timeline time is set');

});

}, 'onremove event is fired when replaced animation is removed.');

promise_test(async t => {

  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const animC = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const animD = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const removed = [];

  animA.onremove = () => { removed.push('A'); };

  animB.onremove = () => { removed.push('B'); };

  animC.onremove = () => { removed.push('C'); };

  animD.onremove = event => {

    assert_unreached('onremove event should not be fired');

};

  await waitForAnimationFrames(2);

  assert_equals(removed.join(''), 'ABC');

}, 'onremove events are fired in the correct order');

</script>

</body>