1 <style> 2 div { 3 height: 100px; 4 width: 100px; 5 background: blue; 6 margin: 10px; 7 } 8 </style> 9 <p> 10 Tests that a player playing in reverse started concurrently with another player receives the correct start time. 11 <p> 12 The three squares should make identical movements from left to right. 13 <div id="target1"></div> 14 <div id="target2"></div> 15 <div id="target3"></div> 16 <script> 17 var p1 = target1.animate([ 18 {transform: 'translate(800px)'}, 19 {transform: 'translate(-800px)'} 20 ], 2000); 21 p1.currentTime = 1000; 22 p1.playbackRate = -1; 23 24 var p2 = target2.animate([ 25 {transform: 'translate(800px)'}, 26 {transform: 'translate(0px)'} 27 ], 1000); 28 p2.reverse(); 29 30 var p3 = target3.animate([ 31 {transform: 'translate(-800px)'}, 32 {transform: 'translate(800px)'} 33 ], 2000); 34 p3.currentTime = 1000; 35 </script> 36
