35 lines
1.1 KiB
HTML
35 lines
1.1 KiB
HTML
<!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>
|