1267937-1.html (2086B)
1 <!doctype html> 2 <html class="reftest-wait reftest-no-flush"> 3 <head> 4 <meta charset=utf-8> 5 <title>Bug 1267937</title> 6 <style> 7 #target { 8 width: 100px; 9 height: 100px; 10 background: green; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="target"></div> 16 <script> 17 var target = document.getElementById("target"); 18 var anim = target.animate( 19 { marginLeft: [ "0px", "10px" ] }, 20 { duration: 500000 /* 500s */, easing: "steps(2, start)" }); 21 22 anim.ready.then(function() { 23 // Set currentTime in before phase, i.e., GetComputedTimingAt() returns 24 // null progress in the phase so that we can skip ComposeStyle(). 25 // This currentTime value should be far from zero in order to skip 26 // restyles requested by setting currentTime or frames in a next tick. 27 // If this value is near by zero, say -1, the restyles will be processed in 28 // the next tick and current time in the next tick must be greater than 29 // zero at that point, that means the animation with new frame values will 30 // be painted. As a result, this test will be useless. 31 anim.currentTime = -500; 32 33 // Setting another frame does not cause any visual changes because 34 // the animation is still in the before phase. 35 anim.effect.setKeyframes({ marginLeft: [ "0px", "400px" ] }); 36 37 var beforePhaseFrames = 0; 38 window.requestAnimationFrame(function handleFrame() { 39 if (anim.effect.getComputedTiming().progress === null) { 40 beforePhaseFrames++; 41 } 42 if (anim.effect.getComputedTiming().progress !== null) { 43 if (beforePhaseFrames == 0) { 44 console.log("WARNING: We never got frames in the before phase. " + 45 "This test is going to be passed accidentally. " + 46 "Consider setting smaller current time, e.g. -1000ms."); 47 } 48 // After starting the animation, progress should be 0.5, that means 49 // margin-left is 200px. 50 document.documentElement.classList.remove("reftest-wait"); 51 return; 52 } 53 window.requestAnimationFrame(handleFrame); 54 }); 55 }); 56 </script> 57 </body> 58 </html>