<!doctype html> <html class="reftest-wait"> <title>CSS Animations Test: Cancel animation for target moving out of flat tree and style invalidation</title> <link rel="help" href="https://drafts.csswg.org/css-animations/#eventdef-animationevent-animationcancel"> <link rel="help" href="https://crbug.com/1093747"> <link rel="match" href="../reference/pass_if_pass_below.html"> <script src="/common/reftest-wait.js"></script> <style> @keyframes anim { from { color: red; } to { color: green; } } #anim { animation: anim 100s; } .none { display: none; } </style> <p>Test passes if there is the word "PASS" below.</p> <div id="host"><span id="anim">FAIL</span></div> <div id="dirty" class="none">PASS</div> <script> const root = host.attachShadow({mode:"open"}); root.innerHTML = "<slot />"; requestAnimationFrame(() => { root.firstChild.name = "skip-slot"; dirty.className = ""; takeScreenshot(); }); </script>