multiple-begin-additive-animation.html (3931B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This tests additive='sum' support on animate elements with multiple begin times</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" viewBox="0 0 1000 1000"> 10 <rect width="100" height="100" fill="green"> 11 <animate id="an1" attributeName="y" attributeType="XML" begin="0s" dur="12s" from="100" to="900" fill="freeze" /> 12 <animate attributeName="x" attributeType="XML" calcMode="discrete" begin="0s; 2s" from="0" to="400" dur="8s" additive="sum" /> 13 </rect> 14 </svg> 15 16 <script> 17 var rootSVGElement = document.querySelector("svg"); 18 var epsilon = 1.0; 19 20 // Setup animation test 21 function checkBaseValues() { 22 return; 23 assert_equals(rect.x.baseVal.value, 0); 24 assert_equals(rect.y.baseVal.value, 0); 25 } 26 27 function sample1() { 28 assert_equals(rect.x.animVal.value, 0); 29 assert_approx_equals(rect.y.animVal.value, 100, epsilon); 30 checkBaseValues(); 31 } 32 33 function sample2() { 34 assert_equals(rect.x.animVal.value, 0); 35 assert_approx_equals(rect.y.animVal.value, 166.67, epsilon); 36 checkBaseValues(); 37 } 38 39 function sample3() { 40 assert_equals(rect.x.animVal.value, 0); 41 assert_approx_equals(rect.y.animVal.value, 366.60, epsilon); 42 checkBaseValues(); 43 } 44 45 function sample4() { 46 assert_equals(rect.x.animVal.value, 0); 47 assert_approx_equals(rect.y.animVal.value, 366.73, epsilon); 48 checkBaseValues(); 49 } 50 51 function sample5() { 52 assert_equals(rect.x.animVal.value, 0); 53 assert_approx_equals(rect.y.animVal.value, 499.93, epsilon); 54 checkBaseValues(); 55 } 56 57 function sample6() { 58 assert_equals(rect.x.animVal.value, 400); 59 assert_approx_equals(rect.y.animVal.value, 500.06, epsilon); 60 checkBaseValues(); 61 } 62 63 function sample7() { 64 assert_equals(rect.x.animVal.value, 400); 65 assert_approx_equals(rect.y.animVal.value, 566.67, epsilon); 66 checkBaseValues(); 67 } 68 69 function sample8() { 70 assert_equals(rect.x.animVal.value, 400); 71 assert_approx_equals(rect.y.animVal.value, 633.33, epsilon); 72 checkBaseValues(); 73 } 74 75 function sample9() { 76 assert_equals(rect.x.animVal.value, 400); 77 assert_approx_equals(rect.y.animVal.value, 700, epsilon); 78 checkBaseValues(); 79 } 80 81 function sample10() { 82 assert_equals(rect.x.animVal.value, 400); 83 assert_approx_equals(rect.y.animVal.value, 766.60, epsilon); 84 checkBaseValues(); 85 } 86 87 function sample11() { 88 assert_equals(rect.x.animVal.value, 0); 89 assert_approx_equals(rect.y.animVal.value, 766.67, epsilon); 90 checkBaseValues(); 91 } 92 93 function sample12() { 94 assert_equals(rect.x.animVal.value, 0); 95 assert_approx_equals(rect.y.animVal.value, 833.33, epsilon); 96 checkBaseValues(); 97 } 98 99 function sample13() { 100 assert_equals(rect.x.animVal.value, 0); 101 assert_approx_equals(rect.y.animVal.value, 900, epsilon); 102 checkBaseValues(); 103 } 104 105 smil_async_test((t) => { 106 rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; 107 108 // All animations in the test file use the same duration, so it's not needed to list all sample points individually for an5/an6/an7/an8. 109 const expectedValues = [ 110 // [animationId, time, sampleCallback] 111 ["an1", 0.0, sample1], 112 ["an1", 1.0, sample2], 113 ["an1", 3.999, sample3], 114 ["an1", 4.001, sample4], 115 ["an1", 5.999, sample5], 116 ["an1", 6.001, sample6], 117 ["an1", 7.0, sample7], 118 ["an1", 7.999, sample8], 119 ["an1", 8.001, sample8], 120 ["an1", 9.0, sample9], 121 ["an1", 9.999, sample10], 122 ["an1", 10.001, sample11], 123 ["an1", 11.0, sample12], 124 ["an1", 11.999, sample13], 125 ["an1", 12.001, sample13], 126 ["an1", 60.0, sample13] 127 ]; 128 129 runAnimationTest(t, expectedValues); 130 }); 131 132 window.animationStartsImmediately = true; 133 134 </script>