animation-canceled-by-parent-details-element-being-closed.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-animations/animation-canceled-by-parent-details-element-being-closed.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Animations: animation should be canceled when a parent details element is closed</title>

<link rel="help" href="https://drafts.csswg.org/css-animations/">

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

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

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

<style>

@keyframes anim {

    to { margin-left: 100px }

</style>

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

<script>

promise_test(async t => {

  // create a <div> contained within a <details> element

  const details = addElement(t, "details", { "open": "open" });

  const div = addDiv(t);

  details.appendChild(div);

  // start an animation on the <div>

  div.style.animation = 'anim 1s';

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

  await animation.ready;

  // ensure the animation running on the <div> is canceled as a result of closing the <details>

  const canceled = new Promise(resolve => animation.addEventListener("cancel", resolve));

  details.removeAttribute("open");

  await canceled;

}, 'A CSS Animation running on an element within a <details> element is canceled after the <details> element is closed.');

</script>