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

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

#div1 {
  z-index: 4;
  left: 100px;
  top: 200px;
  offset-path: path('m 0 0 h 400');
  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 fill-forwards transform animation from being composited.
<p>
The two squares should equivalently move from left to right, pause and move 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([
      {offsetDistance: '0%'},
      {offsetDistance: '100%'}
  ], {
      duration: 1000,
      delay: 1000,
      fill: 'forwards'
  });
  div1.animate([
      {transform: 'translate(0px)'},
      {transform: 'translate(-400px)'}
  ], {
      duration: 1000,
      delay: 3000,
      fill: 'forwards'
  });

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

requestAnimationFrame(startAnimations);

</script>

</body>
</html>