<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runRepaintTest()">
<script xlink:href="../../fast/repaint/resources/repaint.js"/>
<defs>
<filter id="filter">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feComposite in2="blur" in="SourceGraphic"/>
</filter>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5"/>
</clipPath>
<mask id="mask"  maskContentUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5" fill="white"/>
</mask>
</defs>

<script>
function repaintTest() {
    document.getElementById("rect1").setAttribute("width", "100");
    document.getElementById("rect2").setAttribute("width", "100");
    document.getElementById("rect3").setAttribute("width", "100");
}
</script>
<g id="box">
<rect id="rect1" x="10" y="10" width="200" height="100" style="fill:green;mask:url(#mask)"/>
<rect id="rect2" x="10" y="130" width="200" height="100" style="fill:green;clip-path:url(#clip)"/>
<rect id="rect3" x="10" y="250" width="200" height="100" style="fill:green;filter:url(#filter)"/>
</g>
</svg>