<!DOCTYPE html>
<style>
#container {
  position: absolute;
  top: 0;
  font-size: 10px;
}
.target {
  width: 40px;
  height: 40px;
  border-top: solid;
  border-left: solid;
  margin-bottom: 20px;
}
</style>
<div id="container"></div>
<script>
[
  'perspective(200px) translate3D(10px, 10px, 10px)',
  'matrix(0, 1, 1, 0, 10, 10)',
  'matrix3d(' +
    '0, 1, 0, 0, ' +
    '1, 0, 0, 0, ' +
    '0, 0, 1, 0, ' +
    '10, 10, 10, 1)',
  'matrix3d(' +
    '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933,' +
    '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,' +
    '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933,' +
    '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)',
  'perspective(200px) rotateY(45deg)',
  'none',
].forEach(transform => {
  var text = document.createElement('div');
  text.textContent = transform;
  container.appendChild(text);

  var target = document.createElement('div');
  target.classList.add('target');
  container.appendChild(target);
  target.animate([
    {transform: transform},
    {transform: transform},
  ], 1e8);
});

if (window.testRunner)
  testRunner.waitUntilDone();

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    internals.setZoomFactor(2);
    requestAnimationFrame(() => {
      if (window.testRunner)
        testRunner.notifyDone();
    });
  });
});
</script>