<html>
<head>
  <script src="../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script>
  <script type="text/javascript">
  window.testIsAsync = true;
  // These svg files are animated automatically, so have flaky repaint rect
  // output depending on when repaint rect capturing starts.
  window.outputRepaintRects = false;
  function repaintTest() {
    if (!window.testRunner)
      return;

    // The animation lasts 100ms so skip 12 frames (12*1s/120=100ms) to be sure.
    for (var i = 0; i < 12; i++) {
      window.internals.advanceImageAnimation(imageA);
      window.internals.advanceImageAnimation(imageB);
    }

    window.requestAnimationFrame(function() {
      finishRepaintTest();
    });
  }
  </script>
  <style type="text/css" media="screen">
    img {
      margin: 10px;
    }
  </style>
</head>
<body onload="runRepaintAndPixelTest()">
  <p>Images should redraw correctly when SVG animation runs</p>
  <!-- Don't load animated-rect-fixed-size.svg, it will already be loaded, and the animation already ran if animated-svg-as-image-no-fixed-intrinsic-size.html runs before this test! -->
  <img id="imageA" height="250px" width="350px" border="2" src="resources/animated-rect-fixed-size-2.svg"><br>
  <!-- animated-rect-relative-size.svg is not loaded by any other test, so there's no problem here -->
  <img id="imageB" height="250px" width="350px" border="2" src="resources/animated-rect-relative-size.svg">
</body>
</html>