animateMotion-keyPoints-001.html (1298B)
1 <!doctype html> 2 <title>'calcMode' paced and 'keyPoints' on <animateMotion> with 'path'</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="1;0" keyTimes="0;1" path="M-200,50h250"/> 11 </rect> 12 </svg> 13 <script> 14 const rootSVGElement = document.querySelector('svg'); 15 16 function sample(expectedX) { 17 const target = document.getElementById('target'); 18 const targetCTM = target.getCTM(); 19 assert_approx_equals(targetCTM.e, expectedX, 1e-3, 'x position'); 20 assert_equals(targetCTM.f, 0, 'y position'); 21 const restOfCTM = ['a', 'b', 'c', 'd'].map(p => targetCTM[p]); 22 assert_array_equals(restOfCTM, [1, 0, 0, 1], 'rest of CTM'); 23 } 24 25 smil_async_test(t => { 26 runAnimationTest(t, [ 27 // [animationId, time, sampleCallback] 28 ['anim', 1, sample.bind(this, 100)], 29 ['anim', 2, sample.bind(this, 50)], 30 ['anim', 3, sample.bind(this, 0)], 31 ]); 32 }); 33 window.animationStartsImmediately = true; 34 </script>