The Tor Browser / file comparison
comparison: dom/smil/test/test_smilKeySplines.xhtml
dom/smil/test/test_smilKeySplines.xhtml
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a887cdaf77fa |
|---|---|
| 1 <html xmlns="http://www.w3.org/1999/xhtml"> | |
| 2 <head> | |
| 3 <title>Test for SMIL keySplines</title> | |
| 4 <script type="text/javascript" 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" style="display: none"> | |
| 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.parentNode.removeChild(anim); | |
| 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 -- nsSMILKeySpline(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.parentNode.removeChild(testAnim); | |
| 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.parentNode.removeChild(testAnim); | |
| 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, false); | |
| 292 ]]> | |
| 293 </script> | |
| 294 </pre> | |
| 295 </body> | |
| 296 </html> |
