src/third_party/WebKit/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/text-based-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       transform: translate(30px, 30px) rotate(10deg);
  15     }
  16   </style>
  17 </head>
  18 <body onload="runRepaintAndPixelTest()">
  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>