change-target-while-animating-SVG-property.html (3138B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This changes the target of an animation while its 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 id="target1" width="150" height="100" fill="green"/> 12 <rect id="target2" y="150" width="150" height="100" fill="green"/> 13 14 <!-- an1: Change width by -100 in 4s on target1. The embedder script will change the target to 'target2' at 2s. --> 15 <!-- target1 should be 100px at 2s and remain this way. target2 should be 50px and remain this way. --> 16 <animate id="an1" xlink:href="#target1" attributeType="XML" attributeName="width" fill="freeze" by="-100" begin="0s" dur="4s"/> 17 18 </svg> 19 20 <script> 21 var rootSVGElement = document.querySelector("svg"); 22 var epsilon = 1.0; 23 24 // Setup animation test 25 function sample1() { 26 assert_approx_equals(rect1.width.animVal.value, 150, epsilon); 27 assert_equals(rect1.width.baseVal.value, 150); 28 29 assert_approx_equals(rect2.width.animVal.value, 150, epsilon); 30 assert_equals(rect2.width.baseVal.value, 150); 31 } 32 33 function sample2() { 34 assert_approx_equals(rect1.width.animVal.value, 100, epsilon); 35 assert_equals(rect1.width.baseVal.value, 150); 36 37 assert_approx_equals(rect2.width.animVal.value, 150, epsilon); 38 assert_equals(rect2.width.baseVal.value, 150); 39 40 // Switch to new target while animation is running. 41 // The effect is that rect1 is now reset to the initial state, before any animation was applied to it. 42 // Compatible with FF. In Opera it only works when not driving the timeline using setCurrentTime. 43 rootSVGElement.ownerDocument.getElementById("an1").setAttributeNS(xlinkNS, "xlink:href", "#target2"); 44 } 45 46 function sample3() { 47 assert_approx_equals(rect1.width.animVal.value, 150, epsilon); 48 assert_equals(rect1.width.baseVal.value, 150); 49 50 assert_approx_equals(rect2.width.animVal.value, 100, epsilon); 51 assert_equals(rect2.width.baseVal.value, 150); 52 } 53 54 function sample4() { 55 assert_approx_equals(rect1.width.animVal.value, 150, epsilon); 56 assert_equals(rect1.width.baseVal.value, 150); 57 58 assert_approx_equals(rect2.width.animVal.value, 50, epsilon); 59 assert_equals(rect2.width.baseVal.value, 150); 60 } 61 62 function sample5() { 63 assert_equals(rect1.width.animVal.value, 150); 64 assert_equals(rect1.width.baseVal.value, 150); 65 66 assert_equals(rect2.width.animVal.value, 50); 67 assert_equals(rect2.width.baseVal.value, 150); 68 } 69 70 smil_async_test((t) => { 71 var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect"); 72 rect1 = rects[0]; 73 rect2 = rects[1]; 74 75 const expectedValues = [ 76 // [animationId, time, sampleCallback] 77 ["an1", 0.0, sample1], 78 ["an1", 2.0, sample2], 79 ["an1", 2.001, sample3], 80 ["an1", 3.999, sample4], 81 ["an1", 4.001, sample5], 82 ["an1", 60.0, sample5] 83 ]; 84 85 runAnimationTest(t, expectedValues); 86 }); 87 88 window.animationStartsImmediately = true; 89 90 </script>