<!DOCTYPE html>
<style>
div {
    position: absolute;
    width: 100px;
    height: 100px;
}

#expectation {
    font-size: 50px;
    background: red;
    transform: translate(1em, 1em);
}

#target {
    font-size: 1px;
    background: green;
}
</style>
<span id="text"></span>
<div id="expectation"></div>
<div id="target"></div>
<script>
'use strict';
target.style.fontSize = "50px";
var animation = target.animate([
  {transform: "translate(1em, 1em)"},
  {transform: "translate(1em, 1em)"},
], {
  duration: 1e10,
  iterations: Infinity,
});

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

requestAnimationFrame(function() {
  requestAnimationFrame(function() {
    if (window.internals) {
      var composited = internals.isCompositedAnimation(animation);
      text.textContent = `Animation ${composited ? 'is' : 'is not'} running on the compositor.`;
    }
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        if (window.testRunner)
          testRunner.notifyDone();
      });
    });
  });
});
</script>