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

div {
  position: absolute;
  height: 100px;
  width: 100px;
}

#div1 {
  z-index: 4;
  left: 100px;
  top: 200px;
  background-color: blue;
}

#div2 {
  z-index: 3;
  left: 200px;
  top: 200px;
  background-color: red;
}

#div3 {
  z-index: 2;
  left: 300px;
  top: 200px;
  background-color: purple;
}

</style>
</head>
<body>
<p>
Tests that composited animation happens when only transform or only translate is present.
<p>
The 3 squares should equivalently move from top left to bot right. They need not be perfectly in time.
<p>
Blue - Only Transform, Red = Only Translate, Purple - Transform + Translate

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

<script>
function startAnimations() {
  div1.animate([
      {transform: 'translate(0px, 0px)'},
      {transform: 'translate(400px, 400px)'}
  ], {
      duration: 1000,
      delay: 1000,
      fill: 'forwards'
  });

  div2.animate([
      {translate: '0px 0px'},
      {translate: '400px 400px'}
  ], {
      duration: 1000,
      delay: 1000,
      fill: 'forwards'
  });

  div3.animate([
      {transform: 'translate(0px)',
       translate: '0px 0px'},
      {transform: 'translate(400px)',
       translate: '0px 400px'}
  ], {
      duration: 1000,
      delay: 1000,
      fill: 'forwards'
  });
}

requestAnimationFrame(startAnimations);

</script>

</body>
</html>