1 files changed, 35 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/animation-canceled-by-parent-details-element-being-closed.html b/testing/web-platform/tests/css/css-animations/animation-canceled-by-parent-details-element-being-closed.html
new file mode 100644
index 0000000000..3f6521fccf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/animation-canceled-by-parent-details-element-being-closed.html
@@ -0,0 +1,35 @@
+<!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>