<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../fast/repaint/resources/repaint.js"></script>
<style>

svg {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
}

.outerBox {
    position: absolute;
    left: 400px;
    top: 100px;
    width: 100px;
    height: 100px;
}

.innerBox {
    width: 100px;
    height: 100px;
    background: lime;
}

svg, .outerBox {
    border-left-width: 15px;
    border-left-style: solid;
    border-left-color: blue;
    padding-left: 10px;

    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: yellow;
    padding-right: 5px;

    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: red;
    padding-top: 20px;

    border-bottom-width: 10px;
    border-bottom-style: solid;
    border-bottom-color: green;
    padding-bottom: 15px;
}
</style>
</head>

<body onload="runRepaintTest()">
<svg id="svg" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="lime"/>
</svg>

<div id="html" class="outerBox"><div class="innerBox"/></div>

<script type="text/javascript">
<![CDATA[
var svgLeft = 100;
var htmlLeft = 400;

var svgTop = 100;
var htmlTop = 100;

var iterations = 0;

var svgStyle = document.getElementById("svg").style;
var htmlStyle = document.getElementById("html").style;

function repaintTest() {
    if (iterations < 10) {
        if (iterations == 0) {
            if (window.testRunner)
                testRunner.waitUntilDone();
        }

        svgLeft = svgLeft + 15;
        htmlLeft = htmlLeft + 15;
        
        svgTop = svgTop + 25;
        htmlTop = htmlTop + 25;

        svgStyle.left = svgLeft + "px";
        svgStyle.top = svgTop + "px";

        htmlStyle.left = htmlLeft + "px";
        htmlStyle.top = htmlTop + "px";

        ++iterations;
        window.setTimeout(repaintTest, 0);
    } else {
        if (window.testRunner)
            testRunner.notifyDone();
    }
}
]]>
</script> 
</body>
</html>