<style>
    img {
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <img src='data:image/svg+xml;utf8,
        <svg xmlns="http://www.w3.org/2000/svg">
            <style>
                @keyframes fadein {
                    from { opacity:0; }
                    to { opacity:1; }
                }
                #green { 
                    animation: fadein 16ms;
                }
            </style>
            <rect width="100%" height="100%" fill="red"/>
            <rect id="green" width="100%" height="100%" fill="green"/>
        </svg>'>
    <script>
        window.addEventListener('load', (event) => {
            if (window.testRunner)
                testRunner.waitUntilDone();

            var rAFCount = 0;
            function animate(timestamp) {
                if (++rAFCount < 10)
                    window.requestAnimationFrame(animate);
                else if (window.testRunner)
                    testRunner.notifyDone();
            }

            window.requestAnimationFrame(animate);
        });
    </script>
</body>