<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 220px;
    height: 220px;
    background-color: green;
    clip-path: url(#clip);
}
svg {
    height: 0px;
    width: 0px;
}
</style>
<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function changeClipPathAndFinish()
    {
        if (window.internals)
            window.internals.startTrackingRepaints();
        
        const rect = document.getElementById('rect');
        rect.setAttribute('width', 100);
        rect.setAttribute('height', 100);
        
        document.getElementById('log').textContent = window.internals.repaintRectsAsText();
        if (window.testRunner)
            testRunner.notifyDone();
        
    }
    window.addEventListener('load', () => {
        setTimeout(() => {
            changeClipPathAndFinish()
        }, 0);
    }, false);
</script>
</head>
<body>
<div></div>
<svg>
  <clipPath id="clip">
    <rect id="rect" width="200" height="200"/>
  </clipPath>
</svg>
<pre id="log"></pre>
</body>
</html>