cancel-animation-shadow-slot-invalidation.html (948B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>CSS Animations Test: Cancel animation for target moving out of flat tree and style invalidation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations/#eventdef-animationevent-animationcancel"> 5 <link rel="help" href="https://crbug.com/1093747"> 6 <link rel="match" href="../reference/pass_if_pass_below.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 @keyframes anim { 10 from { color: red; } 11 to { color: green; } 12 } 13 #anim { animation: anim 100s; } 14 .none { display: none; } 15 </style> 16 <p>Test passes if there is the word "PASS" below.</p> 17 <div id="host"><span id="anim">FAIL</span></div> 18 <div id="dirty" class="none">PASS</div> 19 <script> 20 const root = host.attachShadow({mode:"open"}); 21 root.innerHTML = "<slot></slot>"; 22 requestAnimationFrame(() => { 23 root.firstChild.name = "skip-slot"; 24 dirty.className = ""; 25 takeScreenshot(); 26 }); 27 </script>