Adapt inline SVG sizing behavior to Firefox and Blink
[WebKit-https.git] / LayoutTests / svg / transforms / animated-path-inside-transformed-html.xhtml
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3   <title>SVG inside transformed div</title>
4   <script src="../../fast/repaint/resources/repaint.js"></script>
5   <style>
6     body {
7       background-color: white;
8     }
9     .box {
10       height: 400px;
11       width: 400px;
12       margin: 50px;
13       border: 1px solid black;
14       -webkit-transform: translate(30px, 30px) rotate(20deg);
15     }
16   </style>
17 </head>
18 <body onload="runRepaintTest()">
19   <p>CSS Transformed HTML div with SVG inside it. Animated SVG should repaint correctly.</p>
20   <div class="box">
21       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 420">
22         <rect id="rect" stroke-width="5" fill="blue" stroke="pink" width="100" height="100" />
23         <text id="text" x="150" stroke-width="2px" stroke="green" font-size="20px">This is some text</text>
24         <image id="image" y="150" width="100" height="100" xlink:href="../custom/resources/green-checker.png"/>
25       </svg>
26   </div>
27 </body>
28 <script>
29 function repaintTest() {
30     document.getElementById("rect").setAttribute("x", "300");
31     document.getElementById("text").setAttribute("y", "300");
32     document.getElementById("image").setAttribute("x", "350");
33     document.getElementById("image").setAttribute("y", "320");
34 }
35 </script>
36 </html>