svgpath-animation-1.tentative.html (2010B)
1 <!doctype html> 2 <title>'by' path animation</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 6 <script src="support/animated-path-helpers.js"></script> 7 <svg></svg> 8 <script> 9 var rootSVGElement = document.querySelector("svg"); 10 11 // Setup test document 12 var path = createSVGElement("path"); 13 path.setAttribute("id", "path"); 14 path.setAttribute("d", "M 40 40 L 60 40 L 60 60 L 40 60 z"); 15 path.setAttribute("fill", "green"); 16 path.setAttribute("onclick", "executeTest()"); 17 18 var animate = createSVGElement("animate"); 19 animate.setAttribute("id", "animation"); 20 animate.setAttribute("attributeName", "d"); 21 animate.setAttribute("from", "M 40 40 L 60 40 L 60 60 L 40 60 z"); 22 animate.setAttribute("by", "M 0 0 L 100 0 L 100 100 L 0 100 z"); 23 animate.setAttribute("begin", "0s"); 24 animate.setAttribute("fill", "freeze"); 25 animate.setAttribute("dur", "4s"); 26 path.appendChild(animate); 27 rootSVGElement.appendChild(path); 28 29 smil_async_test(t => { 30 const expectedValues = [ 31 // [animationId, time, sampleCallback] 32 ["animation", 0.0, () => { 33 assert_animated_path_equals(path, 34 "M 40 40 L 60 40 L 60 60 L 40 60 z"); 35 }], 36 ["animation", 1.999, () => { 37 assert_animated_path_equals(path, 38 "M 40 40 L 109.975 40 L 109.975 109.975 L 40 109.975 Z"); 39 }], 40 ["animation", 2.001, () => { 41 assert_animated_path_equals(path, 42 "M 40 40 L 110.025 40 L 110.025 110.025 L 40 110.025 Z"); 43 }], 44 ["animation", 3.999, () => { 45 assert_animated_path_equals(path, 46 "M 40 40 L 159.975 40 L 159.975 159.975 L 40 159.975 Z"); 47 }], 48 ["animation", 4.001, () => { 49 assert_animated_path_equals(path, 50 "M 40 40 L 160 40 L 160 160 L 40 160 Z"); 51 }] 52 ]; 53 runAnimationTest(t, expectedValues); 54 }); 55 </script>