<!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 800');
}

#div2 {
  z-index: 5;
  left: 100px;
  top: 300px;
  offset-path: path('m 0 0 h 400 z');
}

</style>
</head>
<body>
<p>
Tests that motion path animations prevent a future 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([
      {offsetDistance: '0%'},
      {offsetDistance: '100%'}
  ], {
      duration: 2000,
      delay: 1000
  });
  div1.animate([
      {transform: 'translate(0px)'},
      {transform: 'translate(-800px)'}
  ], {
      duration: 1000,
      delay: 2000
  });

  div2.animate([
      {offsetDistance: '0%'},
      {offsetDistance: '100%'}
  ], {
      duration: 2000,
      delay: 1000
  });
}

requestAnimationFrame(startAnimations);

</script>

</body>
</html>