| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <defs> |
| <rect id="red" width="100" height="100" fill="red"/> |
| <rect id="green" width="100" height="100" fill="green"/> |
| </defs> |
| <use x="10" y="10" width="100" height="100"> |
| <animate attributeName="xlink:href" from="#red" dur="50ms" to="#green" fill="freeze"/> |
| </use> |
| <use x="120" y="10" width="100" height="100" xlink:href="#red"> |
| <animate attributeName="xlink:href" from="#red" dur="60ms" to="#green" fill="freeze"/> |
| </use> |
| <use x="230" y="10" width="100" height="100"> |
| <animate attributeName="href" from="#red" dur="70ms" to="#green" fill="freeze"/> |
| </use> |
| <use x="340" y="10" width="100" height="100" href="#red"> |
| <animate attributeName="href" from="#red" dur="80ms" to="#green" fill="freeze"/> |
| </use> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| var elements = document.querySelectorAll("animate"); |
| var count = elements.length; |
| |
| for (var i = count; i--; ) |
| elements[i].addEventListener("endEvent", endAnimate, false); |
| |
| function endAnimate() { |
| if (--count === 0) { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </svg> |