direct-image-dynamic-clip-path.html

<!DOCTYPE html>
<html>
<style>
  .composited {
    will-change: transform;
  }
  .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.waitUntilDone();
</script>
</html>

chromium/third_party/blink/web_tests/compositing/images/direct-image-dynamic-clip-path.html