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 two boxes, the top runs on the main thread, the bottom 13on the compositor. 14</p><p> 15This test is successful if the boxes are mostly in sync and all finish at the 16same time. 17</p> 18<hr> 19 20Playback rate is set to 0.5 21<br> 22<div id="test1a">MT</div> 23<div id="test1b">CT</div> 24 25Playback rate is set to 1 26<br> 27<div id="test2a">MT</div> 28<div id="test2b">CT</div> 29 30Playback rate is set to 2 31<br> 32<div id="test3a">MT</div> 33<div id="test3b">CT</div> 34 35<script> 36 var transformKeyframes = [ 37 {transform: 'translateX(0px)'}, 38 {transform: 'translateX(500px)'} 39 ]; 40 var leftKeyframes = [ 41 {left: '0'}, 42 {left: '500px'} 43 ]; 44 var player1a = test1a.animate(leftKeyframes, { 45 duration: 1000, 46 iterations: 2, 47 fill: 'forwards', 48 playbackRate: 0.5 49 }); 50 var player1b = test1b.animate(transformKeyframes, { 51 duration: 1000, 52 iterations: 2, 53 fill: 'forwards', 54 playbackRate: 0.5 55 }); 56 var player2a = test2a.animate(leftKeyframes, { 57 duration: 1000, 58 iterations: 4, 59 fill: 'forwards', 60 playbackRate: 1 61 }); 62 var player2b = test2b.animate(transformKeyframes, { 63 duration: 1000, 64 iterations: 4, 65 fill: 'forwards', 66 playbackRate: 1 67 }); 68 var player3a = test3a.animate(leftKeyframes, { 69 duration: 1000, 70 iterations: 8, 71 fill: 'forwards', 72 playbackRate: 2 73 }); 74 var player3b = test3b.animate(transformKeyframes, { 75 duration: 1000, 76 iterations: 8, 77 fill: 'forwards', 78 playbackRate: 2 79 }); 80</script> 81</body> 82</html>