test_smilKeySplines.xhtml (8865B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Test for SMIL keySplines</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 6 </head> 7 <body> 8 <p id="display"></p> 9 <div id="content"> 10 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" 11 onload="this.pauseAnimations()"> 12 <circle cx="-100" cy="20" r="15" fill="blue" id="circle"/> 13 </svg> 14 </div> 15 <pre id="test"> 16 <script class="testbody" type="text/javascript"> 17 <![CDATA[ 18 /** Test for SMIL keySplines */ 19 20 /* Global Variables */ 21 const svgns="http://www.w3.org/2000/svg"; 22 var svg = document.getElementById("svg"); 23 var circle = document.getElementById('circle'); 24 25 SimpleTest.waitForExplicitFinish(); 26 27 function createAnim() { 28 var anim = document.createElementNS(svgns,'animate'); 29 anim.setAttribute('attributeName','cx'); 30 anim.setAttribute('dur','10s'); 31 anim.setAttribute('begin','0s'); 32 anim.setAttribute('fill', 'freeze'); 33 return circle.appendChild(anim); 34 } 35 36 function main() { 37 ok(svg.animationsPaused(), "should be paused by <svg> load handler"); 38 is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler"); 39 40 var tests = 41 [ testSimpleA, // these first four are from SVG 1.1 42 testSimpleB, 43 testSimpleC, 44 testSimpleD, 45 testSimpleE, // bug 501569 46 testMultipleIntervalsA, 47 testMultipleIntervalsB, 48 testMultipleIntervalsC, 49 testOneValue, 50 testFromTo, 51 testWrongNumSplines, 52 testToAnimation, 53 testOkSyntax, 54 testBadSyntaxA, 55 testBadSyntaxB 56 ]; 57 for (var i = 0; i < tests.length; i++) { 58 var anim = createAnim(); 59 svg.setCurrentTime(0); 60 tests[i](anim); 61 anim.remove(); 62 } 63 SimpleTest.finish(); 64 } 65 66 function checkSample(time, expectedValue) { 67 svg.setCurrentTime(time); 68 is(circle.cx.animVal.value, expectedValue); 69 } 70 71 function checkSampleRough(time, expectedValue, precision) { 72 const defaultPrecision = 0.00001; 73 if (typeof precision == "undefined") { 74 precision = defaultPrecision; 75 } 76 svg.setCurrentTime(time); 77 var diff = Math.abs(expectedValue - circle.cx.animVal.value); 78 ok(diff <= precision, 79 "Unexpected sample value got " + circle.cx.animVal.value 80 + ", expected " + expectedValue + " [error is " + diff 81 + ", tolerance is " + precision + "]"); 82 } 83 84 /* 85 * These first four tests are the examples given in SVG 1.1, section 19.2.7 86 */ 87 88 function testSimpleA(anim) { 89 anim.setAttribute('dur','4s'); 90 anim.setAttribute('values', '10; 20'); 91 anim.setAttribute('keyTimes', '0; 1'); 92 anim.setAttribute('calcMode', 'spline'); 93 anim.setAttribute('keySplines', '0 0 1 1'); 94 checkSample(0, 10); 95 checkSample(1, 12.5); 96 checkSample(2, 15); 97 checkSample(3, 17.5); 98 checkSample(4, 20); 99 } 100 101 function testSimpleB(anim) { 102 anim.setAttribute('dur','4s'); 103 anim.setAttribute('values', '10; 20'); 104 anim.setAttribute('keyTimes', '0; 1'); 105 anim.setAttribute('calcMode', 'spline'); 106 anim.setAttribute('keySplines', '.5 0 .5 1'); 107 checkSample(0, 10); 108 checkSampleRough(1, 11.058925); 109 checkSample(2, 15); 110 checkSampleRough(3, 18.941075); 111 checkSample(4, 20); 112 } 113 114 function testSimpleC(anim) { 115 anim.setAttribute('dur','4s'); 116 anim.setAttribute('values', '10; 20'); 117 anim.setAttribute('keyTimes', '0; 1'); 118 anim.setAttribute('calcMode', 'spline'); 119 anim.setAttribute('keySplines', '0 .75 .25 1'); 120 checkSample(0, 10); 121 checkSampleRough(1, 18.101832); 122 checkSampleRough(2, 19.413430); 123 checkSampleRough(3, 19.886504); 124 checkSample(4, 20); 125 } 126 127 function testSimpleD(anim) { 128 anim.setAttribute('dur','4s'); 129 anim.setAttribute('values', '10; 20'); 130 anim.setAttribute('keyTimes', '0; 1'); 131 anim.setAttribute('calcMode', 'spline'); 132 anim.setAttribute('keySplines', '1 0 .25 .25'); 133 checkSample(0, 10); 134 checkSampleRough(1, 10.076925); 135 checkSampleRough(2, 10.644369); 136 checkSampleRough(3, 16.908699); 137 checkSample(4, 20); 138 } 139 140 // Bug 501569 -- SMILKeySpline(1, 0, 0, 1) miscalculates values just under 0.5 141 function testSimpleE(anim) { 142 anim.setAttribute('dur','10s'); 143 anim.setAttribute('values', '0; 10'); 144 anim.setAttribute('keyTimes', '0; 1'); 145 anim.setAttribute('calcMode', 'spline'); 146 anim.setAttribute('keySplines', '1 0 0 1'); 147 checkSample(0, 0); 148 checkSampleRough(0.001, 0); 149 checkSampleRough(4.95, 3.409174); 150 checkSampleRough(4.98, 3.819443); 151 checkSampleRough(4.99, 4.060174); 152 checkSampleRough(4.999, 4.562510); 153 checkSample(5, 5); 154 checkSampleRough(5.001, 5.437490); 155 checkSampleRough(5.01, 5.939826); 156 checkSampleRough(5.015, 6.075002); 157 checkSampleRough(5.02, 6.180557); 158 checkSampleRough(9.9999, 10); 159 checkSample(10, 10); 160 } 161 162 function testMultipleIntervalsA(anim) { 163 anim.setAttribute('dur','4s'); 164 anim.setAttribute('values', '10; 20; 30'); 165 anim.setAttribute('keyTimes', '0; 0.25; 1'); 166 anim.setAttribute('calcMode', 'spline'); 167 anim.setAttribute('keySplines', '0 0 1 1; .5 0 .5 1;'); 168 checkSample(0.5, 15); 169 checkSampleRough(0.999, 20, 0.02); 170 checkSample(1, 20); 171 checkSampleRough(1.001, 20, 0.05); 172 checkSample(2.5, 25); 173 checkSampleRough(3.25, 29, 0.1); 174 } 175 176 function testMultipleIntervalsB(anim) { 177 // as above but without keyTimes 178 anim.setAttribute('dur','4s'); 179 anim.setAttribute('values', '10; 20; 30'); 180 anim.setAttribute('calcMode', 'spline'); 181 anim.setAttribute('keySplines', '0 0 1 1; .5 0 .5 1;'); 182 checkSample(1, 15); 183 checkSampleRough(1.999, 20, 0.01); 184 checkSample(2, 20); 185 checkSampleRough(2.001, 20, 0.01); 186 checkSample(3, 25); 187 checkSampleRough(3.5, 29, 0.1); 188 } 189 190 function testMultipleIntervalsC(anim) { 191 // test some unusual (but valid) syntax 192 anim.setAttribute('dur','4s'); 193 anim.setAttribute('values', '10; 20; 30'); 194 anim.setAttribute('calcMode', 'spline'); 195 anim.setAttribute('keySplines', ' 0 .75 0.25 1 ; 1, 0 ,.25 .25 \t'); 196 checkSampleRough(3.5, 26.9, 0.2); 197 } 198 199 function testOneValue(anim) { 200 anim.setAttribute('dur','4s'); 201 anim.setAttribute('values', '5'); 202 anim.setAttribute('calcMode', 'spline'); 203 anim.setAttribute('keySplines', '0 0 1 1'); 204 checkSample(0, 5); 205 checkSample(1.5, 5); 206 } 207 208 function testFromTo(anim) { 209 anim.setAttribute('dur','4s'); 210 anim.setAttribute('from', '10'); 211 anim.setAttribute('to', '20'); 212 anim.setAttribute('calcMode', 'spline'); 213 anim.setAttribute('keySplines', '.5 0 .5 1'); 214 checkSample(0, 10); 215 checkSampleRough(1, 11, 0.1); 216 } 217 218 function testWrongNumSplines(anim) { 219 anim.setAttribute('dur','4s'); 220 anim.setAttribute('from', '10'); 221 anim.setAttribute('to', '20'); 222 anim.setAttribute('calcMode', 'spline'); 223 anim.setAttribute('keySplines', '.5 0 .5 1; 0 0 1 1'); 224 // animation is in error, should do nothing 225 checkSample(1.5, -100); 226 } 227 228 function testToAnimation(anim) { 229 anim.setAttribute('dur','4s'); 230 anim.setAttribute('to', '20'); 231 anim.setAttribute('calcMode', 'spline'); 232 anim.setAttribute('keySplines', '.5 0 .5 1'); 233 checkSample(0, -100); 234 checkSampleRough(1, -87.3, 0.1); 235 } 236 237 function testOkSyntax(anim) { 238 var okStrs = ['0,0,0,0', // all commas 239 ' 0 0 , 0 ,0 ', // mix of separators 240 '0 0 0 0;', // trailing semi-colon 241 '0 0 0 0 ;']; // " " 242 243 for (var i = 0; i < okStrs.length; i++) { 244 testAnim = createAnim(); 245 testAnim.setAttribute('dur','4s'); 246 testAnim.setAttribute('from', '0'); 247 testAnim.setAttribute('to', '20'); 248 testAnim.setAttribute('calcMode', 'spline'); 249 testAnim.setAttribute('keySplines', okStrs[i]); 250 checkSample(4, 20); 251 testAnim.remove(); 252 } 253 } 254 255 function testBadSyntaxA(anim) { 256 var badStrs = ['', // empty 257 ' ', // whitespace only 258 '0,1.1,0,0', // bad range 259 '0,0,0,-0.1', // " " 260 ' 0 0 , 0 0 ,', // stray comma 261 '1-1 0 0', // path-style separators 262 '0 0 0', // wrong number of values 263 '0 0 0 0 0', // " " 264 '0 0 0 0 0 0 0 0', // " " 265 '0 0 0; 0 0 0 0', // " " 266 '0 0 0; 0', // mis-placed semi-colon 267 ';0 0 0 0']; // " " 268 269 for (var i = 0; i < badStrs.length; i++) { 270 testAnim = createAnim(); 271 testAnim.setAttribute('dur','4s'); 272 testAnim.setAttribute('from', '0'); 273 testAnim.setAttribute('to', '20'); 274 testAnim.setAttribute('calcMode', 'spline'); 275 testAnim.setAttribute('keySplines', badStrs[i]); 276 checkSample(4, -100); 277 testAnim.remove(); 278 } 279 } 280 281 function testBadSyntaxB(anim) { 282 // test some illegal syntax 283 anim.setAttribute('dur','4s'); 284 anim.setAttribute('values', '10; 20; 30'); 285 anim.setAttribute('calcMode', 'spline'); 286 anim.setAttribute('keySplines', ' 0 .75 0.25 1 ; 1, A0 ,.25 .25 \t'); 287 // animation is in error, should do nothing 288 checkSample(3.5, -100); 289 } 290 291 window.addEventListener("load", main); 292 ]]> 293 </script> 294 </pre> 295 </body> 296 </html>