chromium/src/third_party/blink/manual_tests/animation/compositor-synchronized-start-reverse.html

<style>
div {
  height: 100px;
  width: 100px;
  background: blue;
  margin: 10px;
}
</style>
<p>
Tests that a player playing in reverse started concurrently with another player receives the correct start time.
<p>
The three squares should make identical movements from left to right.
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<script>
var p1 = target1.animate([
  {transform: 'translate(800px)'},
  {transform: 'translate(-800px)'}
], 2000);
p1.currentTime = 1000;
p1.playbackRate = -1;

var p2 = target2.animate([
  {transform: 'translate(800px)'},
  {transform: 'translate(0px)'}
], 1000);
p2.reverse();

var p3 = target3.animate([
  {transform: 'translate(-800px)'},
  {transform: 'translate(800px)'}
], 2000);
p3.currentTime = 1000;
</script>