accumulate-values-width-animation.html (3145B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This tests values animation and accumulate='sum'</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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 10 11 <!-- an1: Change width to 100 in 10s with a wobbling animation --> 12 <rect width="20" height="100" fill="green"> 13 <animate id="an1" attributeName="width" dur="2s" values="0; 30; 20" accumulate="sum" repeatCount="5" fill="freeze"/> 14 </rect> 15 16 </svg> 17 18 <script> 19 var rootSVGElement = document.querySelector("svg"); 20 var epsilon = 1.0; 21 22 // Setup animation test 23 function sample1() { 24 assert_approx_equals(rect.width.animVal.value, 0, epsilon); 25 assert_equals(rect.width.baseVal.value, 20); 26 } 27 28 function sample2() { 29 assert_approx_equals(rect.width.animVal.value, 30, epsilon); 30 assert_equals(rect.width.baseVal.value, 20); 31 } 32 33 function sample3() { 34 assert_approx_equals(rect.width.animVal.value, 20, epsilon); 35 assert_equals(rect.width.baseVal.value, 20); 36 } 37 38 function sample4() { 39 assert_approx_equals(rect.width.animVal.value, 50, epsilon); 40 assert_equals(rect.width.baseVal.value, 20); 41 } 42 43 function sample5() { 44 assert_approx_equals(rect.width.animVal.value, 40, epsilon); 45 assert_equals(rect.width.baseVal.value, 20); 46 } 47 48 function sample6() { 49 assert_approx_equals(rect.width.animVal.value, 70, epsilon); 50 assert_equals(rect.width.baseVal.value, 20); 51 } 52 53 function sample7() { 54 assert_approx_equals(rect.width.animVal.value, 60, epsilon); 55 assert_equals(rect.width.baseVal.value, 20); 56 } 57 58 function sample8() { 59 assert_approx_equals(rect.width.animVal.value, 90, epsilon); 60 assert_equals(rect.width.baseVal.value, 20); 61 } 62 63 function sample9() { 64 assert_approx_equals(rect.width.animVal.value, 80, epsilon); 65 assert_equals(rect.width.baseVal.value, 20); 66 } 67 68 function sample10() { 69 assert_approx_equals(rect.width.animVal.value, 110, epsilon); 70 assert_equals(rect.width.baseVal.value, 20); 71 } 72 73 function sample11() { 74 assert_approx_equals(rect.width.animVal.value, 100, epsilon); 75 assert_equals(rect.width.baseVal.value, 20); 76 } 77 78 smil_async_test((t) => { 79 rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; 80 81 const expectedValues = [ 82 // [animationId, time, sampleCallback] 83 ["an1", 0.0, sample1], 84 ["an1", 1.0, sample2], 85 ["an1", 1.999, sample3], 86 ["an1", 2.001, sample3], 87 ["an1", 3.0, sample4], 88 ["an1", 3.999, sample5], 89 ["an1", 4.001, sample5], 90 ["an1", 5.0, sample6], 91 ["an1", 5.999, sample7], 92 ["an1", 6.001, sample7], 93 ["an1", 7.0, sample8], 94 ["an1", 7.999, sample9], 95 ["an1", 8.001, sample9], 96 ["an1", 9.0, sample10], 97 ["an1", 9.999, sample11], 98 ["an1", 10.001, sample11], 99 ["an1", 11.0, sample11], 100 ["an1", 60.0, sample11] 101 ]; 102 103 runAnimationTest(t, expectedValues); 104 }); 105 106 window.animationStartsImmediately = true; 107 108 </script>