remove-animation-element-while-animation-is-running.html (2582B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This removes an animation element while the animation is running</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='50' to='150' begin='0s' dur='2s' fill='freeze'/> 13 </rect> 14 15 <rect x='0' y='100' width='50' height='50' fill='green'> 16 <animate id="an2" attributeName='x' from='50' to='150' begin='0s' dur='2s' fill='remove'/> 17 </rect> 18 19 </svg> 20 21 <script> 22 var rootSVGElement = document.querySelector("svg"); 23 var epsilon = 1.0; 24 25 // Setup animation test 26 function sample1() { 27 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 28 assert_equals(rect1.x.baseVal.value, 0); 29 30 assert_approx_equals(rect2.x.animVal.value, 50, epsilon); 31 assert_equals(rect2.x.baseVal.value, 0); 32 } 33 34 function sample2() { 35 assert_approx_equals(rect1.x.animVal.value, 100, epsilon); 36 assert_equals(rect1.x.baseVal.value, 0); 37 38 assert_approx_equals(rect2.x.animVal.value, 100, epsilon); 39 assert_equals(rect2.x.baseVal.value, 0); 40 41 // Remove the animation element animating rect1 42 // The effect is that rect1 is now reset to the initial state, before any animation was applied to it. 43 // Compatible with FF. In Opera it shows a repainting bug currently (two rects are visible!). 44 var an1 = rootSVGElement.ownerDocument.getElementById("an1"); 45 an1.parentNode.removeChild(an1); 46 } 47 48 function sample3() { 49 assert_equals(rect1.x.animVal.value, 0); 50 assert_equals(rect1.x.baseVal.value, 0); 51 52 assert_approx_equals(rect2.x.animVal.value, 100, epsilon); 53 assert_equals(rect2.x.baseVal.value, 0); 54 } 55 56 function sample4() { 57 assert_equals(rect1.x.animVal.value, 0); 58 assert_equals(rect1.x.baseVal.value, 0); 59 60 assert_equals(rect2.x.animVal.value, 0); 61 assert_equals(rect2.x.baseVal.value, 0); 62 } 63 64 smil_async_test((t) => { 65 var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect"); 66 rect1 = rects[0]; 67 rect2 = rects[1]; 68 69 const expectedValues = [ 70 // [animationId, time, sampleCallback] 71 ["an1", 0.0, sample1], 72 ["an1", 1.0, sample2], 73 ["an2", 1.001, sample3], 74 ["an2", 2.001, sample4], 75 ["an2", 60.0, sample4] 76 ]; 77 78 runAnimationTest(t, expectedValues); 79 }); 80 81 window.animationStartsImmediately = true; 82 83 </script>