<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="animatedRect" fill="green">
    <animate
      attributeType="XML"
      attributeName="d"
      from="M20 60 L20 110 L120 110 L120 60 Z"
      to="M45 35 L45 135 L95 135 L95 35 Z"
      dur="1s"
      repeatCount="indefinite"/>
  </path>
  <script><![CDATA[
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }

    // Wait until the only instance of 'animatedRect' starts animation.
    setTimeout(function () {
      var svgns = 'http://www.w3.org/2000/svg';
      var xlinkns = 'http://www.w3.org/1999/xlink';

      for (var i = 1; i <= 4; i++) {
        var shape = document.createElementNS(svgns, "use");
        shape.setAttributeNS(xlinkns, 'href', '#animatedRect');
        shape.setAttributeNS(null, 'transform', 'translate(' + 100 * i + ', 0)');
        document.documentElement.appendChild(shape);
      }
      
      if (window.testRunner) {
        // Wait until the next animation cycle starts to make sure
        // all of the instances of 'animatedRect' are animating.
        setTimeout(function () {
          var text = document.createElementNS(svgns, "text");
          text.appendChild(document.createTextNode("Passed"));
          document.documentElement.appendChild(text);
          testRunner.notifyDone();
        }, 50);
      }
    }, 50);
  ]]></script>
</svg>