svglength-additive-by-4.html (2256B)
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, then reset to 10. --> 12 <!-- an2: Change width from 10 to 100 in 4s starting at 5s --> 13 <rect width="10" height="100" fill="green"> 14 <animate id="an1" attributeType="XML" attributeName="width" fill="remove" by="40" begin="0s" dur="4s"/> 15 <animate id="an2" attributeType="XML" attributeName="width" additive="replace" fill="freeze" by="90" 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, 10, epsilon); 42 assert_equals(rect.width.baseVal.value, 10); 43 } 44 45 function sample5() { 46 assert_approx_equals(rect.width.animVal.value, 55, epsilon); 47 assert_equals(rect.width.baseVal.value, 10); 48 } 49 50 function sample6() { 51 assert_approx_equals(rect.width.animVal.value, 100, epsilon); 52 assert_equals(rect.width.baseVal.value, 10); 53 } 54 55 smil_async_test((t) => { 56 rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; 57 58 const expectedValues = [ 59 // [animationId, time, sampleCallback] 60 ["an1", 0.0, sample1], 61 ["an1", 2.0, sample2], 62 ["an1", 3.999, sample3], 63 ["an1", 4.001, sample4], 64 ["an1", 7.0, sample5], 65 ["an1", 9.0, sample6], 66 ["an1", 60.0, sample6] 67 ]; 68 69 runAnimationTest(t, expectedValues); 70 }); 71 72 window.animationStartsImmediately = true; 73 74 </script>