animateMotion-keyPoints-002.html (1580B)
1 <!doctype html> 2 <title>Setting keyPoints invalid and then valid should result in the animation running</title> 3 <link rel="help" href="https://svgwg.org/specs/animations/#AnimateMotionElement"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 7 <svg> 8 <rect width="100" height="100" fill="red"/> 9 <rect id="target" transform="translate(100, -50)" width="100" height="100" fill="green"> 10 <animateMotion dur="5s" keyPoints="X" keyTimes="0;1" path="M-200,50h250"/> 11 </rect> 12 </svg> 13 <script> 14 const rootSVGElement = document.querySelector('svg'); 15 const animateMotionElement = document.getElementsByTagName("animateMotion")[0]; 16 17 function sample(expectedX) { 18 const target = document.getElementById('target'); 19 const targetCTM = target.getCTM(); 20 assert_approx_equals(targetCTM.e, expectedX, 1e-3, 'x position'); 21 assert_equals(targetCTM.f, 0, 'y position'); 22 const restOfCTM = ['a', 'b', 'c', 'd'].map(p => targetCTM[p]); 23 assert_array_equals(restOfCTM, [1, 0, 0, 1], 'rest of CTM'); 24 } 25 26 smil_async_test(t => { 27 t.step_timeout(() => { 28 animateMotionElement.setAttribute("keyPoints", "1;0"); 29 rootSVGElement.setCurrentTime(0); 30 t.step_timeout(() => { 31 runAnimationTest(t, [ 32 // [animationId, time, sampleCallback] 33 ['anim', 1, sample.bind(this, 100)], 34 ['anim', 2, sample.bind(this, 50)], 35 ['anim', 3, sample.bind(this, 0)], 36 ]); 37 }, 50); 38 }, 50); 39 window.animationStartsImmediately = true; 40 }); 41 </script>