<!DOCTYPE html>
<html>
<style>
  .composited {
    transform: translateZ(0);
  }
  .clip-path {
    -webkit-clip-path: circle(45%);
  }
</style>

<!-- There should be a green circle on this page -->
<body>
  <img class="composited" onload="load(this)" src="../../images/resources/green-256x256.jpg">
</body>

<script>
function load(element) {
  element.classList.add('clip-path');
  setTimeout(done, 0);
}

function done() {
  if (window.testRunner)
    testRunner.notifyDone();
}

if (window.testRunner) {
  testRunner.dumpAsTextWithPixelResults();
  testRunner.waitUntilDone();
}
</script>
</html>