svglength-additive-by-2.html (2060B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This tests by-animations adding to previous underlying values</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 from 10 to 50 in 4s --> 12 <!-- an2: Change width from 50 to 100 in 4s starting at 5s --> 13 <rect width="10" height="100" fill="green"> 14 <animate id="an1" attributeType="XML" attributeName="width" fill="freeze" by="40" begin="0s" dur="4s"/> 15 <animate id="an2" attributeType="XML" attributeName="width" additive="replace" fill="freeze" by="50" begin="5s" dur="4s"/> 16 </rect> 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(rect.width.animVal.value, 10, epsilon); 27 assert_equals(rect.width.baseVal.value, 10); 28 } 29 30 function sample2() { 31 assert_approx_equals(rect.width.animVal.value, 30, epsilon); 32 assert_equals(rect.width.baseVal.value, 10); 33 } 34 35 function sample3() { 36 assert_approx_equals(rect.width.animVal.value, 50, epsilon); 37 assert_equals(rect.width.baseVal.value, 10); 38 } 39 40 function sample4() { 41 assert_approx_equals(rect.width.animVal.value, 75, epsilon); 42 assert_equals(rect.width.baseVal.value, 10); 43 } 44 45 function sample5() { 46 assert_approx_equals(rect.width.animVal.value, 100, epsilon); 47 assert_equals(rect.width.baseVal.value, 10); 48 } 49 50 smil_async_test((t) => { 51 rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; 52 53 const expectedValues = [ 54 // [animationId, time, sampleCallback] 55 ["an1", 0.0, sample1], 56 ["an1", 2.0, sample2], 57 ["an1", 4.0, sample3], 58 ["an1", 7.0, sample4], 59 ["an1", 9.0, sample5], 60 ["an1", 60.0, sample5] 61 ]; 62 63 runAnimationTest(t, expectedValues); 64 }); 65 66 window.animationStartsImmediately = true; 67 68 </script>