<!DOCTYPE html>
<title>Cyclic syncbase dependency with syncbase trigger</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<svg>
  <rect width="100" height="100" fill="blue">
    <animate attributeName="fill" from="yellow" to="blue" id="a"
             begin="c.end; b.begin" dur="10ms"/>
  </rect>
  <rect width="100" height="100" x="100" fill="blue">
    <animate attributeName="fill" from="yellow" to="blue" id="b"
             begin="c.end; a.begin" dur="10ms"/>
  </rect>
  <rect width="100" height="100" x="200" fill="blue">
    <animate attributeName="fill" from="yellow" to="blue" id="c"
             begin="0; 15ms" dur="10ms"/>
  </rect>
</svg>
<script>
  async_test(function(t) {
    let a = document.getElementById('a');
    a.begun = 0;
    a.addEventListener('beginEvent', t.step_func(function() {
      a.begun++;
      if (a.begun === 2)
        t.done();
    }));
  });
</script>
