1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<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>
|
