blob: 1ceaa3d31d0bbdc4c29255bd869e87b3d91966ef [file] [log] [blame]
<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>