sync-start-times.html (1753B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>sync start times</title> 5 <link rel="match" href="sync-start-times-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 #box-1, #box-2 { 9 border: 1px solid white; 10 height: 40px; 11 left: 40px; 12 position: absolute; 13 top: 40px; 14 width: 40px; 15 /* To ensure Chrome to render the two boxes (one actively 16 animating and the other not) with the same subpixel offset 17 when there is subpixel translation during animation. */ 18 will-change: transform; 19 } 20 #box-1 { 21 background: blue; 22 z-index: 1; 23 } 24 #box-2 { 25 background: white; 26 z-index: 2; 27 } 28 #notes { 29 position: absolute; 30 left: 0px; 31 top: 100px; 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 pair of animations, starts the first animation and then 40 syncs the second animation to align with the first. The test passes if the 41 box associated with the first animation is completely occluded by the 42 second. 43 </p> 44 </body> 45 <script> 46 onload = function() { 47 function createAnimation(elementId) { 48 const elem = document.getElementById(elementId); 49 const keyframes = [ 50 { transform: 'translateX(0px)' }, 51 { transform: 'translateX(200px)' } 52 ]; 53 const anim = elem.animate(keyframes, { duration: 1000 }); 54 anim.pause(); 55 return anim; 56 }; 57 58 const anim1 = createAnimation('box-1'); 59 const anim2 = createAnimation('box-2'); 60 61 anim1.currentTime = 500; 62 anim1.play(); 63 64 anim1.ready.then(() => { 65 anim2.startTime = anim1.startTime; 66 requestAnimationFrame(() => { 67 takeScreenshot(); 68 }); 69 }); 70 }; 71 </script>