animate-elem-19-t-drt.html (6682B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>A copy of the corresponding W3C-SVG-1.1 test, which dumps the animation at certain times</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 10 <!--======================================================================--> 11 <!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =--> 12 <!--= Institute of Technology, Institut National de Recherche en =--> 13 <!--= Informatique et en Automatique, Keio University). All Rights =--> 14 <!--= Reserved. See http://www.w3.org/Consortium/Legal/. =--> 15 <!--======================================================================--> 16 <!-- =====================================================================--> 17 <!-- --> 18 <!-- animation-add-BE-08.svg --> 19 <!-- renamed for 1.1 suite to animate-elem-07-f.svg --> 20 <!-- renamed and split for svgt/b to animate-elem-19-t.svg --> 21 <!-- --> 22 <!-- Test possible values for 'keyTimes' --> 23 <!-- --> 24 <!-- Author : Jon Ferraiolo 11-Aug-2000 --> 25 <!-- Revised for 1.1 : Mathias Larsson Carlander Feb/12/2002 --> 26 <!-- Revised for svgt/b: Ola Andersson Jun/26/2002 --> 27 <!-- --> 28 <!-- History: --> 29 <!-- 11-Aug-2000, JF: Serial#1 created. --> 30 <!-- --> 31 <!-- =====================================================================--> 32 <!--======================================================================--> 33 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =--> 34 <!--= log messages, and therefore is no longer in the preceding preamble.=--> 35 <!--======================================================================--> 36 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" version="1.1" baseProfile="tiny"> 37 <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"> 38 <OperatorScript version="$Revision: 1.6 $" testname="animate-elem-19-t.svg"> 39 <Paragraph> 40 Test 'calcMode'=linear 41 </Paragraph> 42 <Paragraph> 43 One animation has been defined to animate the width of a rectangle. Ruler lines and text are provided 44 to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The 45 black text and ruler lines help show the size and movement of the rectangle over time. 46 </Paragraph> 47 <Paragraph> 48 This test shows an animation with calcMode="linear". 49 </Paragraph> 50 </OperatorScript> 51 </SVGTestCase> 52 <title id="test-title">animate-elem-19-t</title> 53 <desc id="test-desc">Test possible values for 'keyTimes'</desc> 54 <!--======================================================================--> 55 <!--Content of Test Case follows... =====================--> 56 <!--======================================================================--> 57 <g id="test-body-content"> 58 <text font-family="Arial" fill="red" font-size="40" x="3" y="45">calcMode="linear"</text> 59 <text font-family="Arial" fill="red" font-size="40" x="3" y="100">keyTimes="0;.5;.75;1"</text> 60 <g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3" > 61 <g transform="translate(150,140)"> 62 <text font-size="36" x="-140" y="140">Time (s):</text> 63 <text font-size="36" x="290" y="140">0</text> 64 <line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" /> 65 <text font-size="36" x="245" y="140">4</text> 66 <line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" /> 67 <text font-size="36" x="170" y="140">6</text> 68 <line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" /> 69 <text font-size="36" x="20" y="140">8</text> 70 <line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" /> 71 <rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4" > 72 <animate id="an1" attributeName="width" calcMode="linear" values="300;255;180;30" keyTimes="0;.5;.75;1" begin="0s" dur="8s" fill="freeze"/> 73 </rect> 74 75 </g> 76 77 </g> 78 79 </g> 80 <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text> 81 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> 82 <script> 83 // Pause the animation at t=0. 84 document.querySelector("svg").pauseAnimations(); 85 </script> 86 </svg> 87 88 <script> 89 var rootSVGElement = document.querySelector("svg"); 90 var epsilon = 1.0; 91 92 // Setup animation test 93 function sample1() { // From 0s to 4s 94 assert_approx_equals(rect.width.animVal.value, 300, epsilon); 95 assert_equals(rect.width.baseVal.value, 300); 96 } 97 98 function sample2() { // From 4s to 6s 99 assert_approx_equals(rect.width.animVal.value, 255, epsilon); 100 assert_equals(rect.width.baseVal.value, 300); 101 } 102 103 function sample3() { // From 6s to 8s 104 assert_approx_equals(rect.width.animVal.value, 180, epsilon); 105 assert_equals(rect.width.baseVal.value, 300); 106 } 107 108 function sample4() { // From 8s to 8s 109 assert_approx_equals(rect.width.animVal.value, 30, epsilon); 110 assert_equals(rect.width.baseVal.value, 300); 111 } 112 113 smil_async_test((t) => { 114 rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0]; 115 116 // Sampling according to: values="300;255;180;30" keyTimes="0;.5;.75;1" begin="0s" dur="8s" 117 const expectedValues = [ 118 // [animationId, time, sampleCallback] 119 ["an1", 0.0, sample1], 120 ["an1", 3.999, sample2], 121 ["an1", 4.001, sample2], 122 ["an1", 5.999, sample3], 123 ["an1", 6.001, sample3], 124 ["an1", 7.999, sample4], 125 ["an1", 8.001, sample4], 126 ["an1", 60.0, sample4] 127 ]; 128 129 runAnimationTest(t, expectedValues); 130 }); 131 132 window.animationStartsImmediately = true; 133 134 </script>