<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#target {
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: url(#clip);
}
</style>
<div id="target"></div>
<svg height="0" width="0">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <circle cx="0.5" cy="0.5" r="0.25"></circle>
    </clipPath>
  </defs>
</svg>
<script>
runAfterLayoutAndPaint(function() {
  document.querySelector('circle').setAttribute('r', 1);
}, true);
</script>