haikuwebkit/LayoutTests/svg/transforms/animated-path-inside-transf...

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