content-visibility-web-animation-in-auto-subtree.html (1833B)
1 <!DOCTYPE html> 2 <meta charset=utf8> 3 <title>Web Animation does not stop even if target is hidden by c-v</title> 4 <link rel="help" href="https://drafts.csswg.org/css-contain-2/"> 5 <script src="/web-animations/testcommon.js"></script> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #container { 10 content-visibility: auto; 11 } 12 @keyframes fade { 13 from { opacity: 1; } 14 to { opacity: 0; } 15 } 16 #target { 17 background: green; 18 height: 100px; 19 width: 100px; 20 } 21 .animate { 22 animation: fade 1s linear 2 alternate; 23 } 24 .transition { 25 transition: opacity 1s linear; 26 } 27 </style> 28 <body> 29 <div id="spacer"></div> 30 <div id="container"></div> 31 </body> 32 <script> 33 "use strict"; 34 35 function createElementWithWebAnimation(test) { 36 const container = document.getElementById('container'); 37 const target = document.createElement('div'); 38 container.appendChild(target); 39 target.id = 'target'; 40 const keyframes = [ 41 { opacity: 1 }, 42 { opacity: 0 }, 43 ]; 44 const options = { 45 duration: 2000, 46 iterations: 1, 47 easing: 'linear', 48 direction: 'alternate', 49 }; 50 target.animate(keyframes, options); 51 52 return target; 53 } 54 55 promise_test(async t => { 56 // Make sure the target is hidden from the beginning. 57 document.getElementById("spacer").style.height = "300vh"; 58 const target = createElementWithWebAnimation(t); 59 const animation = target.getAnimations()[0]; 60 61 let animationFinishEvent = false; 62 animation.addEventListener('finish', () => { 63 animationFinishEvent = true; 64 }); 65 66 animation.currentTime = 1999; 67 await animation.ready; 68 await waitForAnimationFrames(2); 69 70 assert_true(animationFinishEvent, 71 'Web Animation event should keep going even if target is hidden by c-v'); 72 }, 'Web Animation does not stop even if target is hidden by c-v'); 73 74 </script>