37 lines
1.3 KiB
HTML
37 lines
1.3 KiB
HTML
<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>
|