svglength-additive-from-by-3.html (2293B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This tests from-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 75 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" from="10" by="40" begin="0s" dur="4s"/> 15 <animate id="an2" attributeType="XML" attributeName="width" additive="sum" fill="freeze" from="25" by="25" 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, 87.5, 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", 4.0, sample3], 63 ["an1", 4.999, sample3], 64 ["an1", 5.001, sample4], 65 ["an1", 7.0, sample5], 66 ["an1", 9.0, sample6], 67 ["an1", 60.0, sample6] 68 ]; 69 70 runAnimationTest(t, expectedValues); 71 }); 72 73 window.animationStartsImmediately = true; 74 75 </script>