dependent-begin-on-syncbase.html (1589B)
1 <!DOCTYPE html> 2 <title>Dependent timed element begin (restart) on syncbase</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <svg> 6 <rect width="10" height="10" fill="red"> 7 <set attributeName="fill" to="blue" begin="0s; other.end" id="dependent"/> 8 </rect> 9 <rect x="10" width="10" height="10" fill="blue"> 10 <animate attributeName="fill" from="yellow" to="red" 11 begin="indefinite" dur="10ms" id="other"/> 12 </rect> 13 </svg> 14 <script> 15 async_test(t => { 16 let count = 0; 17 let dependent = document.getElementById('dependent'); 18 dependent.addEventListener('endEvent', t.step_func(() => count++)); 19 let other = document.getElementById('other'); 20 // Wait for #other to end and check animation values. 21 other.addEventListener('endEvent', t.step_func(() => { 22 t.step_timeout(() => { 23 assert_equals(count, 1); 24 assert_equals(getComputedStyle(dependent, null).fill, 'rgb(0, 0, 255)'); 25 assert_equals(getComputedStyle(other, null).fill, 'rgb(0, 0, 255)'); 26 t.done(); 27 }); 28 })); 29 let svg = other.ownerSVGElement; 30 // Check initial values. 31 window.onload = t.step_func(() => { 32 window.requestAnimationFrame(t.step_func(() => { 33 assert_equals(count, 0); 34 assert_equals(getComputedStyle(other, null).fill, 'rgb(0, 0, 255)'); 35 assert_equals(getComputedStyle(dependent, null).fill, 'rgb(0, 0, 255)'); 36 svg.unpauseAnimations(); 37 })); 38 }); 39 svg.pauseAnimations(); 40 other.beginElementAt(0.01); 41 }); 42 </script>