svgenum-animation-12.html (2612B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Test SVGSpreadMethodType 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 gradient = createSVGElement("linearGradient"); 18 gradient.setAttribute("id", "gradient"); 19 rootSVGElement.appendChild(gradient); 20 21 var stop = createSVGElement("stop"); 22 stop.setAttribute("offset", "1"); 23 stop.setAttribute("stop-color", "green"); 24 gradient.appendChild(stop); 25 26 var feBlend = createSVGElement("feBlend"); 27 feBlend.setAttribute("in", "SourceGraphic"); 28 feBlend.setAttribute("in2", "img"); 29 feBlend.setAttribute("mode", "lighten"); 30 gradient.appendChild(feBlend); 31 32 var rect = createSVGElement("rect"); 33 rect.setAttribute("id", "rect"); 34 rect.setAttribute("onclick", "executeTest()"); 35 rect.setAttribute("fill", "url(#gradient)"); 36 rect.setAttribute("width", "100"); 37 rect.setAttribute("height", "100"); 38 rootSVGElement.appendChild(rect); 39 40 var animate1 = createSVGElement("animate"); 41 animate1.setAttribute("id", "animation"); 42 animate1.setAttribute("attributeName", "spreadMethod"); 43 animate1.setAttribute("begin", "0s"); 44 animate1.setAttribute("dur", "3s"); 45 animate1.setAttribute("values", "pad;reflect;repeat"); 46 animate1.setAttribute("fill", "freeze"); 47 gradient.appendChild(animate1); 48 49 // Setup animation test 50 function sample1() { 51 assert_equals(gradient.spreadMethod.animVal, SVGGradientElement.SVG_SPREADMETHOD_PAD); 52 assert_equals(gradient.spreadMethod.baseVal, SVGGradientElement.SVG_SPREADMETHOD_PAD); 53 } 54 55 function sample2() { 56 assert_equals(gradient.spreadMethod.animVal, SVGGradientElement.SVG_SPREADMETHOD_REFLECT); 57 assert_equals(gradient.spreadMethod.baseVal, SVGGradientElement.SVG_SPREADMETHOD_PAD); 58 } 59 60 function sample3() { 61 assert_equals(gradient.spreadMethod.animVal, SVGGradientElement.SVG_SPREADMETHOD_REPEAT); 62 assert_equals(gradient.spreadMethod.baseVal, SVGGradientElement.SVG_SPREADMETHOD_PAD); 63 } 64 65 smil_async_test((t) => { 66 const expectedValues = [ 67 // [animationId, time, sampleCallback] 68 ["animation", 0.0, sample1], 69 ["animation", 0.001, sample1], 70 ["animation", 0.999, sample1], 71 ["animation", 1.001, sample2], 72 ["animation", 1.999, sample2], 73 ["animation", 2.001, sample3], 74 ["animation", 2.999, sample3], 75 ["animation", 3.001, sample3] 76 ]; 77 78 runAnimationTest(t, expectedValues); 79 }); 80 81 </script>