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="test0a">MT</div> 23<div id="test0b">CT</div> 24 25Playback rate is set to -1 26<br> 27<div id="test1a">MT</div> 28<div id="test1b">CT</div> 29 30Playback rate is set to -2 31<br> 32<div id="test2a">MT</div> 33<div id="test2b">CT</div> 34 35Playback rate is set to -1, direction is alternate 36<br> 37<div id="test3a">MT</div> 38<div id="test3b">CT</div> 39 40Playback rate is set to -1, direction is alternate, iterations is 5 - should finish a second later. 41<br> 42<div id="test4a">MT</div> 43<div id="test4b">CT</div> 44 45Playback rate is set to -1, direction is alternate-reverse 46<br> 47<div id="test5a">MT</div> 48<div id="test5b">CT</div> 49 50Playback rate is set to -1, direction is alternate-reverse, iterations is 5 - should finish a second later. 51<br> 52<div id="test6a">MT</div> 53<div id="test6b">CT</div> 54 55<script> 56 var transformKeyframes = [ 57 {transform: 'translateX(0px)'}, 58 {transform: 'translateX(500px)'} 59 ]; 60 var leftKeyframes = [ 61 {left: '0'}, 62 {left: '500px'} 63 ]; 64 var player0a = test0a.animate(leftKeyframes, { 65 duration: 1000, 66 iterations: 2, 67 fill: 'forwards', 68 playbackRate: -0.5 69 }); 70 var player0b = test0b.animate(transformKeyframes, { 71 duration: 1000, 72 iterations: 2, 73 fill: 'forwards', 74 playbackRate: -0.5 75 }); 76 var player1a = test1a.animate(leftKeyframes, { 77 duration: 1000, 78 iterations: 4, 79 fill: 'forwards', 80 playbackRate: -1 81 }); 82 var player1b = test1b.animate(transformKeyframes, { 83 duration: 1000, 84 iterations: 4, 85 fill: 'forwards', 86 playbackRate: -1 87 }); 88 var player2a = test2a.animate(leftKeyframes, { 89 duration: 1000, 90 iterations: 8, 91 fill: 'forwards', 92 playbackRate: -2 93 }); 94 var player2b = test2b.animate(transformKeyframes, { 95 duration: 1000, 96 iterations: 8, 97 fill: 'forwards', 98 playbackRate: -2 99 }); 100 var player3a = test3a.animate(leftKeyframes, { 101 duration: 1000, 102 iterations: 4, 103 fill: 'both', 104 playbackRate: -1, 105 direction: 'alternate' 106 }); 107 var player3b = test3b.animate(transformKeyframes, { 108 duration: 1000, 109 iterations: 4, 110 fill: 'both', 111 playbackRate: -1, 112 direction: 'alternate' 113 }); 114 var player4a = test4a.animate(leftKeyframes, { 115 duration: 1000, 116 iterations: 5, 117 fill: 'both', 118 playbackRate: -1, 119 direction: 'alternate' 120 }); 121 var player4b = test4b.animate(transformKeyframes, { 122 duration: 1000, 123 iterations: 5, 124 fill: 'both', 125 playbackRate: -1, 126 direction: 'alternate' 127 }); 128 var player5a = test5a.animate(leftKeyframes, { 129 duration: 1000, 130 iterations: 4, 131 fill: 'both', 132 playbackRate: -1, 133 direction: 'alternate-reverse' 134 }); 135 var player5b = test5b.animate(transformKeyframes, { 136 duration: 1000, 137 iterations: 4, 138 fill: 'both', 139 playbackRate: -1, 140 direction: 'alternate-reverse' 141 }); 142 var player6a = test6a.animate(leftKeyframes, { 143 duration: 1000, 144 iterations: 5, 145 fill: 'both', 146 playbackRate: -1, 147 direction: 'alternate-reverse' 148 }); 149 var player6b = test6b.animate(transformKeyframes, { 150 duration: 1000, 151 iterations: 5, 152 fill: 'both', 153 playbackRate: -1, 154 direction: 'alternate-reverse' 155 }); 156</script> 157</body> 158</html>