svgenum-animation-9.html (2820B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Test SVGTextPathSpacingType/SVGTextPathMethodType enumeration animations</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 8 9 <svg> 10 </svg> 11 12 <script> 13 var rootSVGElement = document.querySelector("svg"); 14 var epsilon = 1.0; 15 16 // Setup test document 17 var path = createSVGElement("path"); 18 path.setAttribute("id", "path"); 19 path.setAttribute("d", "M 50 50 L 200 50"); 20 rootSVGElement.appendChild(path); 21 22 var text = createSVGElement("text"); 23 text.setAttribute("id", "text"); 24 text.setAttribute("onclick", "executeTest()"); 25 rootSVGElement.appendChild(text); 26 27 var textPath = createSVGElement("textPath"); 28 textPath.setAttributeNS(xlinkNS, "xlink:href", "#path"); 29 textPath.setAttribute("spacing", "auto"); 30 textPath.setAttribute("method", "align"); 31 textPath.textContent = "test"; 32 text.appendChild(textPath); 33 34 var animate1 = createSVGElement("animate"); 35 animate1.setAttribute("id", "animation"); 36 animate1.setAttribute("attributeName", "spacing"); 37 animate1.setAttribute("begin", "0s"); 38 animate1.setAttribute("dur", "4s"); 39 animate1.setAttribute("from", "auto"); 40 animate1.setAttribute("to", "exact"); 41 animate1.setAttribute("fill", "freeze"); 42 textPath.appendChild(animate1); 43 44 var animate2 = createSVGElement("animate"); 45 animate2.setAttribute("attributeName", "method"); 46 animate2.setAttribute("begin", "0s"); 47 animate2.setAttribute("dur", "4s"); 48 animate2.setAttribute("from", "align"); 49 animate2.setAttribute("to", "stretch"); 50 animate2.setAttribute("fill", "freeze"); 51 textPath.appendChild(animate2); 52 53 // Setup animation test 54 function sample1() { 55 assert_equals(textPath.method.animVal, SVGTextPathElement.TEXTPATH_METHODTYPE_ALIGN); 56 assert_equals(textPath.method.baseVal, SVGTextPathElement.TEXTPATH_METHODTYPE_ALIGN); 57 58 assert_equals(textPath.spacing.animVal, SVGTextPathElement.TEXTPATH_SPACINGTYPE_AUTO); 59 assert_equals(textPath.spacing.baseVal, SVGTextPathElement.TEXTPATH_SPACINGTYPE_AUTO); 60 } 61 62 function sample2() { 63 assert_equals(textPath.method.animVal, SVGTextPathElement.TEXTPATH_METHODTYPE_STRETCH); 64 assert_equals(textPath.method.baseVal, SVGTextPathElement.TEXTPATH_METHODTYPE_ALIGN); 65 66 assert_equals(textPath.spacing.animVal, SVGTextPathElement.TEXTPATH_SPACINGTYPE_EXACT); 67 assert_equals(textPath.spacing.baseVal, SVGTextPathElement.TEXTPATH_SPACINGTYPE_AUTO); 68 } 69 70 smil_async_test((t) => { 71 const expectedValues = [ 72 // [animationId, time, sampleCallback] 73 ["animation", 0.0, sample1], 74 ["animation", 1.999, sample1], 75 ["animation", 2.001, sample2], 76 ["animation", 3.999, sample2], 77 ["animation", 4.001, sample2] 78 ]; 79 80 runAnimationTest(t, expectedValues); 81 }); 82 83 </script>