infinite-duration-animation.html (1556B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>Infinite duration animation</title> 5 <link rel="match" href="infinite-duration-animation-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="../../testcommon.js"></script> 8 <style> 9 #box-1, #box-2 { 10 border: 1px solid white; 11 height: 40px; 12 position: absolute; 13 top: 40px; 14 width: 40px; 15 } 16 #box-1 { 17 background: blue; 18 z-index: 1; 19 } 20 #box-2 { 21 background: white; 22 z-index: 2; 23 } 24 #notes { 25 position: absolute; 26 left: 0px; 27 top: 100px; 28 } 29 body { 30 background: white; 31 } 32 </style> 33 34 <body> 35 <div id="box-1"></div> 36 <div id="box-2"></div> 37 <p id="notes"> 38 This test creates an infinite duration animations, which should be stuck at 39 a progress of 0. If any blue pixels appear in the screenshot, the test 40 fails. 41 </p> 42 </body> 43 <script> 44 onload = async function() { 45 // Double rAF to ensure that we are not bogged down during initialization 46 // and the compositor is ready. 47 waitForAnimationFrames(2).then(() => { 48 const elem = document.getElementById('box-1'); 49 const keyframes = [ 50 { transform: 'translateX(0px)' }, 51 { transform: 'translateX(100px)' } 52 ]; 53 const effect = 54 new KeyframeEffect(elem, keyframes, 55 {iterations: 3, duration: Infinity}); 56 const animation = new Animation(effect); 57 animation.play(); 58 animation.ready.then(() => { 59 takeScreenshotDelayed(100); 60 }); 61 }); 62 }; 63 </script>