blob: 8e8511d808761c3a1d6e092cd5e7bdaa812981b9 [file] [log] [blame]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG inside transformed div</title>
<script src="../../fast/repaint/resources/repaint.js"></script>
<style>
body {
background-color: white;
}
.box {
height: 400px;
width: 400px;
margin: 50px;
border: 1px solid black;
-webkit-transform: translate(30px, 30px) rotate(20deg);
}
</style>
</head>
<body onload="runRepaintTest()">
<p>CSS Transformed HTML div with SVG inside it. Animated SVG should repaint correctly.</p>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 420">
<rect id="rect" stroke-width="5" fill="blue" stroke="pink" width="100" height="100" />
<text id="text" x="150" stroke-width="2px" stroke="green" font-size="20px">This is some text</text>
<image id="image" y="150" width="100" height="100" xlink:href="../custom/resources/green-checker.png"/>
</svg>
</div>
</body>
<script>
function repaintTest() {
document.getElementById("rect").setAttribute("x", "300");
document.getElementById("text").setAttribute("y", "300");
document.getElementById("image").setAttribute("x", "350");
document.getElementById("image").setAttribute("y", "320");
}
</script>
</html>