beginelement-instance-time-1.html (1048B)
1 <!DOCTYPE html> 2 <title>beginElement() timing</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <svg width="100" height="20" style="border: grey 1px solid"> 6 <rect width="1" height="20"> 7 <animateMotion path="M0,0h100" dur="100ms"/> 8 </rect> 9 </svg> 10 <script> 11 async_test(t => { 12 const svg = document.querySelector('svg'); 13 const motion = document.querySelector('animateMotion'); 14 motion.addEventListener('endEvent', t.step_func(() => { 15 t.step_timeout(t.step_func(() => { 16 motion.beginElement(); 17 let start = svg.getCurrentTime(); 18 requestAnimationFrame(t.step_func_done(() => { 19 svg.pauseAnimations(); 20 let elapsed = svg.getCurrentTime() - start; 21 let expected_pos = Math.min(elapsed * 1000, 100); 22 let actual_pos = motion.parentElement.getCTM().e; 23 assert_approx_equals(actual_pos, expected_pos, 2, `position after ${elapsed}`); 24 })); 25 }), 50); 26 }), { once: true }); 27 }); 28 </script>