<svg xmlns="http://www.w3.org/2000/svg">
    <rect id="rect-1" x="20" y="40" width="40" height="40" rx="20" ry="1" fill="green"/>
    <rect id="rect-2" x="60" y="30" width="60" height="60" ry="30" rx="1" fill="green"/>

    <rect id="rect-3" x="120" y="20" width="80" height="80" rx="20" ry="1" fill="green">
        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
    </rect>

    <rect id="rect-4" x="200" y="10" width="100" height="100" ry="20" rx="1" fill="green">
        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
    </rect>

    <use y="100" href="#rect-1"/>
    <use y="100" href="#rect-2"/>
    <use y="100" href="#rect-3"/>
    <use y="100" href="#rect-4"/>

    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        window.addEventListener('load', (event) => {
            let rect1 = document.getElementById('rect-1');
            let rect2 = document.getElementById('rect-2');
            let rect3 = document.getElementById('rect-3');
            let rect4 = document.getElementById('rect-4');

            rect1.style['ry'] = 'auto';
            rect2.style['rx'] = 'auto';
            rect3.style['ry'] = 'auto';
            rect4.style['rx'] = 'auto';

            document.documentElement.setCurrentTime(5);
            if (window.testRunner)
                testRunner.notifyDone();
        });
    </script>
</svg>