direct-image-dynamic-border-radius.html

<!DOCTYPE html>
<html>
<style>
  .composited {
    will-change: transform;
  }
  .border-radius {
    border-radius: 50%;
  }
</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('border-radius');
  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-border-radius.html