repeat-iteration-event-006.svg

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/animations/repeat-iteration-event-006.svg - WPT Dashboard Interop Dashboard

Checkerboard

<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>