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