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