syncbase-remove-add-while-running.html (1700B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Remove/Add syncbase while animation is running</title> 4 <link rel="help" href="https://www.w3.org/TR/SMIL3/smil-timing.html#q26"> 5 <link rel="author" title="Edvard Thörnros" href="mailto:edvardt@opera.com"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <svg> 10 <animate id="anim" attributeName="visibility" to="visible" begin="10s" dur="2s"/> 11 <rect x="0" y="0" width="0" height="100" fill="#0F0"> 12 <set attributeName="width" fill="freeze" to="100" begin="anim.begin"/> 13 </rect> 14 </svg> 15 16 <script> 17 async_test(function(t) { 18 window.onload = t.step_func(function() { 19 let svg = document.querySelector("svg"); 20 let rect = document.querySelector("rect"); 21 22 window.requestAnimationFrame(t.step_func(function() { 23 window.requestAnimationFrame(t.step_func(function() { 24 var anim1 = document.getElementById("anim"); 25 anim1.parentNode.removeChild(anim1); 26 27 var anim2 = document.createElementNS("http://www.w3.org/2000/svg", "animate"); 28 anim2.setAttribute("id", "anim"); 29 anim2.setAttribute("attributeName", "visibility"); 30 anim2.setAttribute("to", "visible"); 31 anim2.setAttribute("begin", "0s"); 32 anim2.setAttribute("dur", "2s"); 33 svg.appendChild(anim2); 34 35 window.requestAnimationFrame(t.step_func(function() { 36 window.requestAnimationFrame(t.step_func_done(function() { 37 svg.pauseAnimations(); 38 assert_equals(rect.width.animVal.value, 100, "Sync base triggered"); 39 })); 40 })); 41 })); 42 })); 43 }); 44 }); 45 </script>