<svg xmlns="http://www.w3.org/2000/svg">
  <circle id="lime-circle" fill="lime" cx="100" cy="100" r="90"/>
  <circle id="yellow-circle" fill="yellow" cx="100" cy="100" r="90">
    <animate attributeName="r" values="90; 30" dur="2s"/>
  </circle>
  <text x="100" y="100" text-anchor="middle" alignment-baseline="middle">PASS</text>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }
    setTimeout(function() {
      var limeCircle = document.getElementById("lime-circle");
      var yellowCircle = document.getElementById("yellow-circle");
      document.documentElement.insertBefore(yellowCircle, limeCircle);
      // This timeout is needed to ensure that the animation timer is fired at
      // least once before the test is done.
      setTimeout(function() {
        if (window.testRunner)
          testRunner.notifyDone();
      }, 0);
    }, 0);
  </script>
</svg>