<?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="runRepaintAndPixelTest()">
<script xlink:href="../../../resources/run-after-layout-and-paint.js"/>
<script xlink:href="../resources/text-based-repaint.js"/>
<g id="content"/>

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

    function repaintTest() {
        runAfterLayoutAndPaint(createPatterns);
    }

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

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

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

        pattern1.appendChild(rect11);
        pattern1.appendChild(rect21);

        content.appendChild(pattern1);

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

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

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

        pattern2.appendChild(rect12);
        pattern2.appendChild(rect22);

        content.appendChild(pattern2);

        runAfterLayoutAndPaint(setupPatternUsers);
    }

    function setupPatternUsers()
    {
        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(#fillPattern)");
        text1.setAttribute("stroke", "none");
        text1.appendChild(document.createTextNode("Pattern 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(#strokePattern)");
        text2.appendChild(document.createTextNode("Pattern 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(#fillPattern)");    
        text3.setAttribute("stroke", "url(#strokePattern)");
        text3.appendChild(document.createTextNode("Pattern on fill/stroke"));

        content.appendChild(text3);

        finishRepaintTest();
    }
</script>

</svg>