LayoutTests/svg/custom/js-late-gradient-and-object-creation.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" onload="runRepaintTest()">
<script xlink:href="../../fast/repaint/resources/repaint.js"/>
<g id="content"/>

<script>
    var content = document.getElementById("content");

    function repaintTest() {
        if (window.testRunner)
            testRunner.waitUntilDone();
        setTimeout(createGradients, 0);
    }

    function createGradients()
    {
        // Setup "fillLinearGradient"
        var gradient1 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
        gradient1.setAttribute("id", "fillLinearGradient");
        gradient1.setAttribute("x1", "0");
        gradient1.setAttribute("x2", "1");

        var stop11 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
        stop11.setAttribute("stop-color", "blue");
        stop11.setAttribute("offset", "0");

        var stop21 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
        stop21.setAttribute("stop-color", "red");
        stop21.setAttribute("offset", "1");

        gradient1.appendChild(stop11);
        gradient1.appendChild(stop21);

        content.appendChild(gradient1);

        // Setup "strokeLinearGradient"
        var gradient2 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
        gradient2.setAttribute("id", "strokeLinearGradient");
        gradient2.setAttribute("x1", "0");
        gradient2.setAttribute("x2", "1");

        var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
        stop22.setAttribute("stop-color", "yellow");
        stop22.setAttribute("offset", "0");

        var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
        stop22.setAttribute("stop-color", "green");
        stop22.setAttribute("offset", "1");

        gradient2.appendChild(stop22);
        gradient2.appendChild(stop22);

        content.appendChild(gradient2);
        setTimeout(setupGradientUsers, 0);
    }

    function setupGradientUsers()
    {
        var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text1.setAttribute("font-size", "68");
        text1.setAttribute("x", "-150");
        text1.setAttribute("y", "70")
        text1.setAttribute("fill", "url(#fillLinearGradient)");
        text1.setAttribute("stroke", "none");
        text1.appendChild(document.createTextNode("Gradient on fill"));

        content.appendChild(text1);

        var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text2.setAttribute("font-size", "68");
        text2.setAttribute("x", "-150");
        text2.setAttribute("y", "140")
        text2.setAttribute("fill", "none");    
        text2.setAttribute("stroke", "url(#strokeLinearGradient)");
        text2.appendChild(document.createTextNode("Gradient on stroke"));

        content.appendChild(text2);

        var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text3.setAttribute("font-size", "68");
        text3.setAttribute("x", "-150");
        text3.setAttribute("y", "210")
        text3.setAttribute("fill", "url(#fillLinearGradient)");    
        text3.setAttribute("stroke", "url(#strokeLinearGradient)");
        text3.appendChild(document.createTextNode("Gradient on fill/stroke"));

        content.appendChild(text3);

        if (window.testRunner)
            testRunner.notifyDone();
    }
</script>

</svg>