animate-elem-02-t-drt.html (9569B)
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 <!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =--> 11 <!--= Institute of Technology, Institut National de Recherche en =--> 12 <!--= Informatique et en Automatique, Keio University). All Rights =--> 13 <!--= Reserved. See http://www.w3.org/Consortium/Legal/. =--> 14 <!--======================================================================--> 15 <!-- =====================================================================--> 16 <!-- --> 17 <!-- animation-add-BE-09.svg --> 18 <!-- renamed for 1.1 suite to animate-elem-02-t.svg --> 19 <!-- --> 20 <!-- Test 'additive' and 'accumulate' attributes. --> 21 <!-- --> 22 <!-- Author : Jon Ferraiolo 11-Aug-2000 --> 23 <!-- Revised for 1.1 : Rick Graham Feb/05/2002 --> 24 <!-- --> 25 <!-- History: --> 26 <!-- 11-Aug-2000, JF: Serial#1 created. --> 27 <!-- --> 28 <!-- =====================================================================--> 29 <!--======================================================================--> 30 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =--> 31 <!--= log messages, and therefore is no longer in the preceding preamble.=--> 32 <!--======================================================================--> 33 <svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" 34 width="100%" height="100%" viewBox="0 0 480 360"> 35 <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"> 36 <!--nav data here--> 37 <OperatorScript version="$Revision: 1.8 $" testname="animate-elem-02-t.svg"> 38 <Paragraph> 39 Test 'additive' and 'accumulate' attributes. 40 </Paragraph> 41 <Paragraph> 42 The four pictures show the effect with the four possible combinations of 43 'additive' (either 'replace' or 'sum') and 'accumulate' (either 'none' or 'sum'). 44 Because two animations are animating the height, the effects of 'additive' and 45 'accumulate' are sometimes different than when there is only a single animation. 46 </Paragraph> 47 </OperatorScript> 48 </SVGTestCase> 49 <title id="test-title">animate-elem-02-t</title> 50 <desc id="test-desc">Test 'additive' and 'accumulate' attributes.</desc> 51 <!--======================================================================--> 52 <!--Content of Test Case follows... =====================--> 53 <!--======================================================================--> 54 <g id="test-body-content" font-family="Arial" font-size="30"> 55 56 <g transform="translate(0, 0)"> 57 <rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/> 58 <line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/> 59 <line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/> 60 <rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4"> 61 <animate id="an5" attributeName="height" calcMode="discrete" additive="replace" accumulate="none" 62 repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/> 63 </rect> 64 <text x="30" y="285" fill="navy">anim.5</text> 65 </g> 66 <g transform="translate(110, 0)"> 67 <rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/> 68 <line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/> 69 <line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/> 70 <rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4"> 71 <animate id="an6" attributeName="height" calcMode="discrete" additive="sum" accumulate="none" 72 repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/> 73 </rect> 74 <text x="30" y="285" fill="navy">anim.6</text> 75 </g> 76 <g transform="translate(220, 0)"> 77 <rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/> 78 <line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/> 79 <line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/> 80 <rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4"> 81 <animate id="an7" attributeName="height" calcMode="discrete" additive="replace" accumulate="sum" 82 repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/> 83 </rect> 84 <text x="30" y="285" fill="navy">anim.7</text> 85 </g> 86 <g transform="translate(330, 0)"> 87 <rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/> 88 <line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/> 89 <line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/> 90 <rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4"> 91 <animate id="an8" attributeName="height" calcMode="discrete" additive="sum" accumulate="sum" 92 repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/> 93 </rect> 94 <text x="30" y="285" fill="navy">anim.8</text> 95 </g> 96 <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.8 $</text> 97 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> 98 </g> 99 <script> 100 // Pause the animation at t=0. 101 document.querySelector("svg").pauseAnimations(); 102 </script> 103 </svg> 104 105 <script> 106 var rootSVGElement = document.querySelector("svg"); 107 var epsilon = 1.0; 108 109 // Setup animation test 110 function sampleAfterBegin() { 111 assert_equals(rect1.height.animVal.value, 200); 112 assert_equals(rect1.height.baseVal.value, 20); 113 114 assert_equals(rect2.height.animVal.value, 220); 115 assert_equals(rect2.height.baseVal.value, 20); 116 117 assert_equals(rect3.height.animVal.value, 200); 118 assert_equals(rect3.height.baseVal.value, 20); 119 } 120 121 function sampleAfterMid() { 122 assert_equals(rect1.height.animVal.value, 20); 123 assert_equals(rect1.height.baseVal.value, 20); 124 125 assert_equals(rect2.height.animVal.value, 40); 126 assert_equals(rect2.height.baseVal.value, 20); 127 128 assert_equals(rect3.height.animVal.value, 20); 129 assert_equals(rect3.height.baseVal.value, 20); 130 } 131 132 function sampleAfterBeginOfFirstRepetition() { 133 assert_equals(rect1.height.animVal.value, 200); 134 assert_equals(rect1.height.baseVal.value, 20); 135 136 assert_equals(rect2.height.animVal.value, 220); 137 assert_equals(rect2.height.baseVal.value, 20); 138 139 assert_equals(rect3.height.animVal.value, 220); 140 assert_equals(rect3.height.baseVal.value, 20); 141 } 142 143 function sampleAfterMidOfFirstRepetition() { 144 assert_equals(rect1.height.animVal.value, 20); 145 assert_equals(rect1.height.baseVal.value, 20); 146 147 assert_equals(rect2.height.animVal.value, 40); 148 assert_equals(rect2.height.baseVal.value, 20); 149 150 assert_equals(rect3.height.animVal.value, 40); 151 assert_equals(rect3.height.baseVal.value, 20); 152 } 153 154 smil_async_test((t) => { 155 rects = rootSVGElement.ownerDocument.getElementsByTagName("rect"); 156 rect1 = rects[1]; 157 rect2 = rects[3]; 158 rect3 = rects[5]; 159 rect4 = rects[7]; 160 161 // All animations in the test file use the same duration, so it's not needed to list all sample points individually for an5/an6/an7/an8. 162 const expectedValues = [ 163 // [animationId, time, sampleCallback] 164 ["an5", 0.0, sampleAfterBegin], 165 ["an5", 1.999, sampleAfterBegin], 166 ["an5", 2.0, sampleAfterMid], 167 ["an5", 3.999, sampleAfterMid], 168 ["an5", 4.0, sampleAfterBeginOfFirstRepetition], 169 ["an5", 5.999, sampleAfterBeginOfFirstRepetition], 170 ["an5", 6.001, sampleAfterMidOfFirstRepetition], 171 ["an5", 7.999, sampleAfterMidOfFirstRepetition], 172 ["an5", 8.001, sampleAfterMidOfFirstRepetition], 173 ["an5", 60.0, sampleAfterMidOfFirstRepetition] 174 ]; 175 176 runAnimationTest(t, expectedValues); 177 }); 178 179 window.animationStartsImmediately = true; 180 181 </script>