<!DOCTYPE html>
<html>
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=3800-4400" />
<style>
    #container {
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <p>Test passes if you see a single 100px by 100px green box below.</p>
    <div id="container">
        <svg>
            <linearGradient id="red-gradient">
                <stop offset="0" stop-color="red"/>
            </linearGradient>
            <linearGradient id="green-gradient">
                <stop offset="0" stop-color="green"/>
            </linearGradient>
            <linearGradient id="gradientUse" href="#red-gradient"/>
            <rect id="rect" width="100" height="100" fill="url(#gradientUse)"/>
        </svg>
    </div>
    <script>
        window.onload = () => {
            if (window.testRunner)
                testRunner.waitUntilDone();

            requestAnimationFrame(() => {
                gradientUse.setAttribute('href', '#green-gradient');
                if (window.testRunner)
                    testRunner.notifyDone();
            });
        }
    </script>
</body>
</html>
