svgnumberoptionalnumber-animation-4.html (2853B)
1 <!doctype html> 2 <html> 3 <title>Test 'by' animation of SVGNumberOptionalNumber.</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 7 8 <svg> 9 </svg> 10 11 <script> 12 var rootSVGElement = document.querySelector("svg"); 13 var epsilon = 1.0; 14 15 // Setup test document 16 var defs = createSVGElement("defs"); 17 rootSVGElement.appendChild(defs); 18 19 var filter = createSVGElement("filter"); 20 filter.setAttribute("id", "filter"); 21 filter.setAttribute("x", "-30%"); 22 filter.setAttribute("y", "-30%"); 23 filter.setAttribute("width", "160%"); 24 filter.setAttribute("height", "160%"); 25 defs.appendChild(filter); 26 27 var feGaussianBlur = createSVGElement("feGaussianBlur"); 28 feGaussianBlur.setAttribute("id", "blur"); 29 feGaussianBlur.setAttribute("stdDeviation", "5"); 30 filter.appendChild(feGaussianBlur); 31 32 var rect = createSVGElement("rect"); 33 rect.setAttribute("id", "rect"); 34 rect.setAttribute("x", "50"); 35 rect.setAttribute("y", "50"); 36 rect.setAttribute("width", "200"); 37 rect.setAttribute("height", "200"); 38 rect.setAttribute("fill", "green"); 39 rect.setAttribute("filter", "url(#filter)"); 40 rect.setAttribute("onclick", "executeTest()"); 41 rootSVGElement.appendChild(rect); 42 43 var animate = createSVGElement("animate"); 44 animate.setAttribute("id", "animation"); 45 animate.setAttribute("attributeName", "stdDeviation"); 46 animate.setAttribute("begin", "0s"); 47 animate.setAttribute("dur", "4s"); 48 animate.setAttribute("from", "5"); 49 animate.setAttribute("by", "10"); 50 feGaussianBlur.appendChild(animate); 51 52 // Setup animation test 53 function sample1() { 54 assert_approx_equals(feGaussianBlur.stdDeviationX.animVal, 5, epsilon); 55 assert_approx_equals(feGaussianBlur.stdDeviationY.animVal, 5, epsilon); 56 57 assert_equals(feGaussianBlur.stdDeviationX.baseVal, 5); 58 assert_equals(feGaussianBlur.stdDeviationY.baseVal, 5); 59 } 60 61 function sample2() { 62 assert_approx_equals(feGaussianBlur.stdDeviationX.animVal, 10, epsilon); 63 assert_approx_equals(feGaussianBlur.stdDeviationY.animVal, 10, epsilon); 64 65 assert_equals(feGaussianBlur.stdDeviationX.baseVal, 5); 66 assert_equals(feGaussianBlur.stdDeviationY.baseVal, 5); 67 } 68 69 function sample3() { 70 assert_approx_equals(feGaussianBlur.stdDeviationX.animVal, 15, epsilon); 71 assert_approx_equals(feGaussianBlur.stdDeviationY.animVal, 15, epsilon); 72 73 assert_equals(feGaussianBlur.stdDeviationX.baseVal, 5); 74 assert_equals(feGaussianBlur.stdDeviationY.baseVal, 5); 75 } 76 77 smil_async_test((t) => { 78 const expectedValues = [ 79 // [animationId, time, sampleCallback] 80 ["animation", 0.0, sample1], 81 ["animation", 2.0, sample2], 82 ["animation", 3.999, sample3], 83 ["animation", 4.001, sample1] 84 ]; 85 86 runAnimationTest(t, expectedValues); 87 }); 88 89 window.clickX = 60; 90 window.clickY = 60; 91 92 </script>