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

    <g id="g-3" transform="translate(210, 10)">
        <image id="image-3" href="resources/100x200-green.png">
            <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">
            <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) => {
            document.documentElement.setCurrentTime(5);
            if (window.testRunner)
                testRunner.notifyDone();
        });
    </script>
</svg>