<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../fast/repaint/resources/repaint.js"></script>
<title>The rectangle should be green.</title></head>
<script>

var W = 200;
var H = 200;
var SVGNS = "http://www.w3.org/2000/svg";
var currentColor = 0;
var colors = ["red", "green"];

function resetFill(parentNode) {
    var rootPattern = document.createElementNS(SVGNS, "pattern");
    rootPattern.setAttribute("id", "pat");
    rootPattern.setAttribute("patternUnits", "userSpaceOnUse");
    rootPattern.setAttribute("width", W);
    rootPattern.setAttribute("height", H);
    parentNode.appendChild(rootPattern);

    var rect = document.createElementNS(SVGNS, "rect");
    rect.setAttribute("width", W);
    rect.setAttribute("height", H);
    rect.setAttribute("fill", colors[currentColor++]);
    rootPattern.appendChild(rect);
    
    return rect;
}

function updateFill() {
    var el = document.getElementById("shape");
    var defs = document.getElementById("defs");

    while (defs.firstChild)
        defs.removeChild(defs.firstChild);

    resetFill(defs);

    el.setAttribute("fill", "url(#pat)");

    if(currentColor == 2)
        if(window.testRunner)
            testRunner.notifyDone();
}

function repaintTest() {
    if(window.testRunner)
        testRunner.waitUntilDone();

    updateFill();
    setTimeout("updateFill()", 0);
}
</script>
<body onload="runRepaintTest()">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%">
<defs id="defs"></defs>
<rect id="shape" width="200" height="200"></rect>
</svg>
</body>
</html>