svg-animation-order.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<script>
function runTest() {
  if (window.testRunner)
    testRunner.waitUntilDone();

  // Defer to allow animations to run.
  setTimeout(function() {
    if (window.testRunner)
      testRunner.notifyDone();
  }, 0);
}
</script>
<body onload="runTest()">
<p id="description">Test that the order of elements does not affect animations.</p>
<svg id="svg" width="300" height="300">
  <!-- This red square should be covered up if we pass. -->
  <rect x="0" y="0" width="100" height="100" fill="red"/>

  <!-- Animate one green rectangle over the top half of the red square. -->
  <rect id="rect1"  x="-100" y="0" width="100" height="50" fill="green" />
  <set attributeName="x" xlink:href="#rect1" to="0"/>

  <!-- Animate a second green rectangle over the bottom half of the red square. -->
  <set attributeName="x" xlink:href="#rect2" to="0"/>
  <rect id="rect2"  x="-100" y="50" width="100" height="50" fill="green" />
</svg>
</body>
</html>

chromium/third_party/blink/web_tests/svg/animations/svg-animation-order.html