LayoutTests/svg/custom/js-late-pattern-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" transform="scale(1, 1.5)">
     <text font-size="68" fill="url(#dynPattern)"  x="20" y="70">Pattern on fill</text>
</g>
<script>
    var content = document.getElementById("content");

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

    function createPattern()
    {
        var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
        pattern.setAttribute("id", "dynPattern");
        pattern.setAttribute("patternUnits", "userSpaceOnUse");
        pattern.setAttribute("x", "0");
        pattern.setAttribute("y", "0");
        pattern.setAttribute("width", "20");
        pattern.setAttribute("height", "20");

        var rect1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect1.setAttribute("x", "5");
        rect1.setAttribute("y", "5");
        rect1.setAttribute("width", "10");
        rect1.setAttribute("height", "10");
        rect1.setAttribute("fill", "red");

        var rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect2.setAttribute("x", "10");
        rect2.setAttribute("y", "10");
        rect2.setAttribute("width", "10");
        rect2.setAttribute("height", "10");
        rect2.setAttribute("fill", "green");

        pattern.appendChild(rect1);
        pattern.appendChild(rect2);

        content.appendChild(pattern);

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

</svg>