document-timeline-animation.html (1443B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>document timeline animation</title> 5 <link rel="match" href="document-timeline-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 position: absolute; 11 top: 0px; 12 width: 40px; 13 height: 40px; 14 } 15 #box-1 { 16 background: blue; 17 z-index: 1; 18 left: 0px; 19 } 20 #box-2 { 21 background: white; 22 z-index: 2; 23 left: 100px; 24 } 25 #notes { 26 position: absolute; 27 left: 0px; 28 top: 100px; 29 } 30 body { 31 background: white; 32 } 33 </style> 34 35 <body> 36 <div id="box-1"></div> 37 <div id="box-2"></div> 38 <p id="notes"> 39 This test creates a document timeline animation. If any blue pixels appear 40 in the screenshot, the test fails. 41 </p> 42 </body> 43 <script> 44 onload = async function() { 45 const elem = document.getElementById('box-1'); 46 const keyframes = [ 47 { transform: 'none' }, 48 { transform: 'translateX(100px)' } 49 ]; 50 const effect = 51 new KeyframeEffect(elem, keyframes, 52 {iterations: 1, duration: 10000, fill: 'forwards'}); 53 const timeline = new DocumentTimeline(); 54 const animation = new Animation(effect, timeline); 55 animation.play(); 56 await animation.ready; 57 animation.finish(); 58 await animation.finished; 59 await waitForAnimationFrames(2); 60 takeScreenshot(); 61 }; 62 </script>