<svg xmlns="http://www.w3.org/2000/svg">
    <g id="g-1" transform="translate(10, 10)">
        <image id="image-1" href="resources/100x200-green.png" width="50" height="100"/>
    </g>
    <g id="g-2" transform="translate(110, 10)">
        <image id="image-2" href="resources/100x200-green.png" width="50" height="100"/>
    </g>

    <g id="g-3" transform="translate(210, 10)">
        <image id="image-3" href="resources/100x200-green.png" width="50" height="100">
            <animate attributeType="XML" attributeName="width" from="0" to="50" dur="1s" fill="freeze"/>
        </image>
    </g>

    <g id="g-4" transform="translate(310, 10)">
        <image id="image-4" href="resources/100x200-green.png" width="50" height="100">
            <animate attributeType="XML" attributeName="height" from="0" to="100" dur="1s" fill="freeze"/>
        </image>
    </g>

    <use y="110" href="#g-1"/>
    <use y="110" href="#g-2"/>
    <use y="110" href="#g-3"/>
    <use y="110" href="#g-4"/>

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

        window.addEventListener('load', (event) => {
            let image1 = document.getElementById('image-1');
            let image2 = document.getElementById('image-2');
            let image3 = document.getElementById('image-3');
            let image4 = document.getElementById('image-4');

            image1.style['height'] = 'auto';
            image2.style['width'] = 'auto';
            image3.style['height'] = 'auto';
            image4.style['width'] = 'auto';

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