<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> |