multiple-begin-animation-events.html

<!doctype html>
<script>
var beginsSeen = 0;
var endsSeen = 0;
function logBegin() {
  if (++beginsSeen > 4)
    fail();
}
function logEnd() {
  ++endsSeen;
  if (endsSeen == 4) {
    if (beginsSeen == 4)
      pass();
    else
      fail();
  }
}
function endTest(result) {
  window.clearTimeout(timer);
  document.body.appendChild(document.createTextNode(result));
  if (window.testRunner)
    testRunner.notifyDone();
}
function pass() {
  endTest('PASS');
}
function fail() {
  endTest('FAIL');
}
if (window.testRunner) {
  testRunner.dumpAsText();
  testRunner.waitUntilDone();
}
window.onload = function() {
  timer = window.setTimeout(fail, 2000);
}
</script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="200">
  <rect width="10" height="10" fill="green">
    <animate id="a1" onbegin="logBegin()" onend="logEnd()" attributeName="x" begin="0s; 0.5s" dur="0.5s" from="0" to="100"/>
  </rect>
  <rect y="10" width="10" height="10" fill="green">
    <animate id="a2" onbegin="logBegin()" onend="logEnd()" attributeName="x" begin="a1.end; 1s" dur="0.5s" from="0" to="100"/>
  </rect>
</svg>
chromium/third_party/blink/web_tests/svg/animations/multiple-begin-animation-events.html
