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