animate-path-animation-mM-aA-Z-inverse.tentative.html (2317B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Path animation where coordinate modes of start and end differ (m-M, a-A and Z)</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 8 <script src="support/animated-path-helpers.js"></script> 9 <svg></svg> 10 <script> 11 var rootSVGElement = document.querySelector("svg"); 12 13 // Setup test document 14 var path = createSVGElement("path"); 15 path.setAttribute("id", "path"); 16 path.setAttribute("d", 'm -70 30 a 160 170 60 1 1 60 40 m 120 70 a 180 190 120 1 1 100 150 Z m 120 -60'); 17 path.setAttribute("fill", "green"); 18 path.setAttribute("transform", "translate(50, 50)"); 19 20 var animate = createSVGElement("animate"); 21 animate.setAttribute("id", "animation"); 22 animate.setAttribute("attributeName", "d"); 23 animate.setAttribute("from", 'm -70 30 a 160 170 60 1 1 60 40 m 120 70 a 180 190 120 1 1 100 150 Z m 120 -60'); 24 animate.setAttribute("to", 'M -80 40 A 150 160 30 1 1 0 100 M 40 60 A 170 180 90 1 1 300 200 Z M 300 100'); 25 animate.setAttribute("begin", "0s"); 26 animate.setAttribute("dur", "4s"); 27 path.appendChild(animate); 28 rootSVGElement.appendChild(path); 29 30 // Setup animation test 31 function sample1() { 32 // Check initial/end conditions 33 assert_animated_path_equals( 34 path, "m -70 30 a 160 170 60 1 1 60 40 m 120 70 a 180 190 120 1 1 100 150 Z m 120 -60"); 35 } 36 37 function sample2() { 38 assert_animated_path_equals( 39 path, "M -72.5 32.5 A 157.5 167.5 52.5 1 1 -7.5 77.5 M 92.5 120 A 177.5 187.5 112.5 1 1 232.5 267.5 Z M 247.5 85"); 40 } 41 42 function sample3() { 43 assert_animated_path_equals( 44 path, "M -77.5 37.5 A 152.5 162.5 37.5 1 1 -2.5 92.5 M 57.5 80 A 172.5 182.5 97.5 1 1 277.5 222.5 Z M 282.5 95"); 45 } 46 47 function sample4() { 48 assert_animated_path_equals( 49 path, "M -79.9975 39.9975 A 150.003 160.003 30.0075 1 1 -0.00249481 99.9925 M 40.0175 60.02 A 170.003 180.003 90.0075 1 1 299.977 200.022 Z M 299.982 99.995"); 50 } 51 52 smil_async_test(t => { 53 const expectedValues = [ 54 // [animationId, time, sampleCallback] 55 ["animation", 0.0, sample1], 56 ["animation", 1.0, sample2], 57 ["animation", 3.0, sample3], 58 ["animation", 3.999, sample4], 59 ["animation", 4.001, sample1] 60 ]; 61 runAnimationTest(t, expectedValues); 62 }); 63 </script>