content-visibility-animation-and-scroll.html (1655B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Test that scrolling to a content-visibility: auto subtree restarts animations in it</title> 4 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-2/"> 6 <link rel="match" href="content-visibility-animation-and-scroll-ref.html"> 7 <meta name="assert" content="animations in content-visibility: auto subtree should restart when scrolled to"> 8 9 <script src="/common/reftest-wait.js"></script> 10 11 <style> 12 #container { 13 content-visibility: auto; 14 contain-intrinsic-size: 100px 100px; 15 } 16 @keyframes unfade { 17 from { opacity: 0; transform: none; } 18 to { opacity: 1; transform: translate(100px); } 19 } 20 #target { 21 background: green; 22 height: 100px; 23 width: 100px; 24 } 25 .animate { 26 animation: unfade 1s linear 1 alternate; 27 animation-fill-mode: forwards; 28 } 29 #spacer { 30 height: 300vh; 31 } 32 </style> 33 <body> 34 <div id="spacer"></div> 35 <div id="container"></div> 36 </body> 37 38 <script> 39 function createAnimatingElement(name) { 40 const container = document.getElementById('container'); 41 const target = document.createElement('div'); 42 container.appendChild(target); 43 target.id = 'target'; 44 target.className = name; 45 return target; 46 } 47 48 function runTest() { 49 const container = document.getElementById('container'); 50 const target = createAnimatingElement('animate'); 51 container.scrollIntoView(true /* alignToTop */); 52 const listener = (e) => { 53 spacer.style.height = "0px"; 54 takeScreenshot(); 55 }; 56 57 target.addEventListener("animationend", listener); 58 } 59 window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 60 </script>