<svg xmlns="http://www.w3.org/2000/svg">
  <title>Animation triggers on 'repeatEvent' iteration</title>
  <script xmlns="http://www.w3.org/1999/xhtml" src="/resources/testharness.js"/>
  <script xmlns="http://www.w3.org/1999/xhtml" src="/resources/testharnessreport.js"/>
  <g>
    <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
    <rect x="0" y="0" width="100" height="100" fill="green">
      <set attributeName="fill" to="red" begin="anim.repeat(0)"/>
    </rect>
    <rect x="200" y="0" width="100" height="100" fill="red">
      <set attributeName="fill" to="green" begin="anim.repeat(1)"/>
    </rect>
    <rect x="0" y="200" width="100" height="100" fill="red">
      <set attributeName="fill" to="green" begin="anim.repeat(2)"/>
    </rect>
    <rect x="200" y="200" width="100" height="100" fill="red">
      <set attributeName="fill" to="green" begin="anim.repeat(3)"/>
    </rect>
  </g>
  <script>
    promise_test(t => {
        let svg = document.documentElement;
        let anim = document.getElementById('anim');
        let animWatcher = new EventWatcher(t, anim, ['beginEvent', 'repeatEvent']);
        // Wait for #anims 'beginEvent' and then step through the
        // 'repeatEvents' one at a time.
        let stepsPromise = animWatcher.wait_for('beginEvent').then(() => {
            svg.setCurrentTime(1.99);
            return animWatcher.wait_for('repeatEvent');
        }).then(() => {
            svg.setCurrentTime(3.99);
            return animWatcher.wait_for('repeatEvent');
        }).then(() => {
            svg.setCurrentTime(5.99);
            return animWatcher.wait_for('repeatEvent');
        });
        let setElements = document.getElementsByTagName('set');
        let setBeginWatchers = Array.from(setElements).map(element => {
            return new EventWatcher(t, element, 'beginEvent');
        });
        // Expect 'beginEvent' to be dispatched for all but the first 'set' element.
        let beginPromises = setBeginWatchers.slice(1).map(watcher => {
            return watcher.wait_for('beginEvent');
        })
        return Promise.all([stepsPromise, ...beginPromises]);
    });
  </script>
</svg>