1<html> 2<style> 3div { 4 position: relative; 5 height: 100px; 6 width: 100px; 7 background: blue; 8} 9</style> 10<body> 11<p> 12Each section below has three boxes. 13<ul> 14 <li>Top - runs on the main thread.</li> 15 <li>Middle - runs on the compositor, timing function set on whole animation.</li> 16 <li>Bottom - runs on the compositor, timing function set on the first keyframe.</li> 17</ul> 18The animations should be identical but start at different times. 19</p><p> 20This test is successful if the boxes are mostly in sync (there might be a small 21offset between them). 22</p> 23<hr> 24 25Start delay 0s (no start delay, should finish first.) 26<br> 27<div class='test0 anim-left'></div> 28<div class='test0 anim-transform'></div> 29<div class='test0 anim-transform-keyframe'></div> 30 31Start delay 3s (starts 3 seconds after page load, should finish last.) 32<br> 33<div class='test1 anim-left'></div> 34<div class='test1 anim-transform'></div> 35<div class='test1 anim-transform-keyframe'></div> 36 37<script> 38 document.getElementsByClassName('test0 anim-left')[0].animate( 39 [{left: '0'}, {left: '300px'}], 40 {duration: 2000, easing: 'ease-in'}); 41 42 document.getElementsByClassName('test0 anim-transform')[0].animate( 43 [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}], 44 {duration: 2000, easing: 'ease-in'}); 45 46 document.getElementsByClassName('test0 anim-transform-keyframe')[0].animate( 47 [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}], 48 {duration: 2000}); 49 50 // Delay these manually otherwise won't hit the compositor. 51 setTimeout(function() { 52 document.getElementsByClassName('test1 anim-left')[0].animate( 53 [{left: '0'}, {left: '300px'}], 54 {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); 55 56 document.getElementsByClassName('test1 anim-transform')[0].animate( 57 [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}], 58 {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); 59 60 document.getElementsByClassName('test1 anim-transform-keyframe')[0].animate( 61 [{transform: 'translateX(0)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, {transform: 'translateX(300px)'}], 62 {duration: 2000}); 63 }, 3000); 64</script> 65</body> 66</html> 67