multiple-animations-fill-freeze.html (4715B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This checks the effect on multiple animations on one target</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 <rect x='0' y='0' width='50' height='50' fill='green'> 12 <animate id="an1" attributeName='x' from='0' to='100' begin='0s' dur='2s' fill='freeze'/> 13 <animate id="an2" attributeName='x' from='150' to='250' begin='4s' dur='2s' fill='freeze'/> 14 </rect> 15 16 <rect x='0' y='100' width='50' height='50' fill='green'> 17 <animate id="an3" attributeName='x' from='0' to='100' begin='0s' dur='2s' fill='remove'/> 18 <animate id="an4" attributeName='x' from='150' to='250' begin='4s' dur='2s' fill='freeze'/> 19 </rect> 20 21 <rect x='0' y='200' width='50' height='50' fill='green'> 22 <animate id="an5" attributeName='x' from='0' to='100' begin='0s' dur='2s' fill='freeze'/> 23 <animate id="an6" attributeName='x' from='150' to='250' begin='4s' dur='2s' fill='remove'/> 24 </rect> 25 26 </svg> 27 28 <script> 29 var rootSVGElement = document.querySelector("svg"); 30 var epsilon = 1.0; 31 32 // Setup animation test 33 function sample1() { 34 assert_approx_equals(rect1.x.animVal.value, 0, epsilon); 35 assert_equals(rect1.x.baseVal.value, 0); 36 37 assert_approx_equals(rect2.x.animVal.value, 0, epsilon); 38 assert_equals(rect2.x.baseVal.value, 0); 39 40 assert_approx_equals(rect3.x.animVal.value, 0, epsilon); 41 assert_equals(rect3.x.baseVal.value, 0); 42 } 43 44 function sample2() { 45 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 46 assert_equals(rect1.x.baseVal.value, 0); 47 48 assert_approx_equals(rect2.x.animVal.value, 50, epsilon); 49 assert_equals(rect2.x.baseVal.value, 0); 50 51 assert_approx_equals(rect3.x.animVal.value, 50, epsilon); 52 assert_equals(rect3.x.baseVal.value, 0); 53 } 54 55 function sample3() { 56 assert_approx_equals(rect1.x.animVal.value, 100, epsilon); 57 assert_equals(rect1.x.baseVal.value, 0); 58 59 assert_approx_equals(rect2.x.animVal.value, 100, epsilon); 60 assert_equals(rect2.x.baseVal.value, 0); 61 62 assert_approx_equals(rect3.x.animVal.value, 100, epsilon); 63 assert_equals(rect3.x.baseVal.value, 0); 64 } 65 66 function sample4() { 67 assert_approx_equals(rect1.x.animVal.value, 100, epsilon); 68 assert_equals(rect1.x.baseVal.value, 0); 69 70 assert_approx_equals(rect2.x.animVal.value, 0, epsilon); 71 assert_equals(rect2.x.baseVal.value, 0); 72 73 assert_approx_equals(rect3.x.animVal.value, 100, epsilon); 74 assert_equals(rect3.x.baseVal.value, 0); 75 } 76 77 function sample5() { 78 assert_approx_equals(rect1.x.animVal.value, 150, epsilon); 79 assert_equals(rect1.x.baseVal.value, 0); 80 81 assert_approx_equals(rect2.x.animVal.value, 150, epsilon); 82 assert_equals(rect2.x.baseVal.value, 0); 83 84 assert_approx_equals(rect3.x.animVal.value, 150, epsilon); 85 assert_equals(rect3.x.baseVal.value, 0); 86 } 87 88 function sample6() { 89 assert_approx_equals(rect1.x.animVal.value, 200, epsilon); 90 assert_equals(rect1.x.baseVal.value, 0); 91 92 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 93 assert_equals(rect2.x.baseVal.value, 0); 94 95 assert_approx_equals(rect3.x.animVal.value, 200, epsilon); 96 assert_equals(rect3.x.baseVal.value, 0); 97 } 98 99 function sample7() { 100 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 101 assert_equals(rect1.x.baseVal.value, 0); 102 103 assert_approx_equals(rect2.x.animVal.value, 250, epsilon); 104 assert_equals(rect2.x.baseVal.value, 0); 105 106 assert_approx_equals(rect3.x.animVal.value, 250, epsilon); 107 assert_equals(rect3.x.baseVal.value, 0); 108 } 109 110 function sample8() { 111 assert_equals(rect1.x.animVal.value, 250); 112 assert_equals(rect1.x.baseVal.value, 0); 113 114 assert_equals(rect2.x.animVal.value, 250); 115 assert_equals(rect2.x.baseVal.value, 0); 116 117 assert_equals(rect3.x.animVal.value, 100); 118 assert_equals(rect3.x.baseVal.value, 0); 119 } 120 121 smil_async_test((t) => { 122 var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect"); 123 rect1 = rects[0]; 124 rect2 = rects[1]; 125 rect3 = rects[2]; 126 127 const expectedValues = [ 128 // [animationId, time, sampleCallback] 129 ["an1", 0.0, sample1], 130 ["an1", 1.0, sample2], 131 ["an1", 1.999, sample3], 132 ["an1", 2.001, sample4], 133 ["an1", 3.0, sample4], 134 ["an1", 3.999, sample4], 135 ["an1", 4.0, sample5], 136 ["an1", 5.0, sample6], 137 ["an1", 5.999, sample7], 138 ["an1", 6.001, sample8], 139 ["an1", 60.0, sample8] 140 ]; 141 142 runAnimationTest(t, expectedValues); 143 }); 144 145 window.animationStartsImmediately = true; 146 147 </script>