reinserting-svg-into-document.html (1260B)
1 <!doctype html> 2 <title>Reinserting SVG animation into document should continue the animation</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <svg id="svg"> 6 <rect id="rect" x="0" y="0" width="20" height="20"> 7 <animate attributeName="x" begin="0" from="0" to="90" dur="3s" fill="freeze"/> 8 </rect> 9 </svg> 10 <script> 11 async_test(t => { 12 const svg = document.getElementById('svg'); 13 14 // The timeline starts after 'load'. 15 window.onload = t.step_func(() => { 16 svg.setCurrentTime(1); 17 18 t.step_timeout(() => { 19 assert_not_equals(svg.getCurrentTime(), 0, 'started'); 20 21 // Removing and re-adding the SVG shouldn't change anything about the 22 // underlying animation. 23 document.body.removeChild(svg); 24 document.body.appendChild(svg); 25 26 // The SVG animation will continue after the next frame runs. 27 window.requestAnimationFrame(t.step_func_done(() => { 28 const rect = document.getElementById('rect'); 29 assert_greater_than_equal(svg.getCurrentTime(), 1); 30 assert_greater_than_equal(rect.x.animVal.value, 30); 31 svg.setCurrentTime(2); 32 assert_approx_equals(rect.x.animVal.value, 60, 1); 33 })); 34 }); 35 }); 36 }); 37 </script>