<!DOCTYPE html>
<html>
<head>
<style>

div {
  position: absolute;
  height: 90px;
  width: 90px;
  background: blue;
}

#div1 {
  z-index: 1;
  left: 100px;
  top: 200px;
  transform-origin: 0px 0px;
}

#div2 {
  z-index: 3;
  left: 100px;
  top: 300px;
  transform-origin: 0px 0px;
}

</style>
</head>
<body>
<p>
Tests that motion path animations stop an existing transform animation from being composited.
<p>
The two squares should make equivalent movements from left to right and back to left. They need not be perfectly in time.

<div id="div1"></div>
<div id="div2"></div>

<script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

function startAnimations() {
  div1.animate([
      {transform: 'translate(0px)'},
      {transform: 'translate(400px)'},
      {transform: 'translate(0px)'}
  ], {
      duration: 2000,
      delay: 1000
  });

  div2.animate([
      {transform: 'translate(0px)'},
      {transform: 'translate(800px)'}
  ], {
      duration: 2000,
      delay: 1000
  });
  setTimeout(function() {
    div2.style.offsetPath = 'path("m 0 0 h -800")';
    div2.style.offsetRotate = '0deg';
    div2.animate([
        {offsetDistance: '0%'},
        {offsetDistance: '100%'}
    ], {
        duration: 1000
    });
  }, 2000);
}

requestAnimationFrame(startAnimations);

</script>

</body>
</html>