1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/smil/test/test_smilKeySplines.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,296 @@
1.4 +<html xmlns="http://www.w3.org/1999/xhtml">
1.5 +<head>
1.6 + <title>Test for SMIL keySplines</title>
1.7 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.9 +</head>
1.10 +<body>
1.11 +<p id="display"></p>
1.12 +<div id="content" style="display: none">
1.13 +<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
1.14 + onload="this.pauseAnimations()">
1.15 + <circle cx="-100" cy="20" r="15" fill="blue" id="circle"/>
1.16 +</svg>
1.17 +</div>
1.18 +<pre id="test">
1.19 +<script class="testbody" type="text/javascript">
1.20 +<![CDATA[
1.21 +/** Test for SMIL keySplines **/
1.22 +
1.23 +/* Global Variables */
1.24 +const svgns="http://www.w3.org/2000/svg";
1.25 +var svg = document.getElementById("svg");
1.26 +var circle = document.getElementById('circle');
1.27 +
1.28 +SimpleTest.waitForExplicitFinish();
1.29 +
1.30 +function createAnim() {
1.31 + var anim = document.createElementNS(svgns,'animate');
1.32 + anim.setAttribute('attributeName','cx');
1.33 + anim.setAttribute('dur','10s');
1.34 + anim.setAttribute('begin','0s');
1.35 + anim.setAttribute('fill', 'freeze');
1.36 + return circle.appendChild(anim);
1.37 +}
1.38 +
1.39 +function main() {
1.40 + ok(svg.animationsPaused(), "should be paused by <svg> load handler");
1.41 + is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");
1.42 +
1.43 + var tests =
1.44 + [ testSimpleA, // these first four are from SVG 1.1
1.45 + testSimpleB,
1.46 + testSimpleC,
1.47 + testSimpleD,
1.48 + testSimpleE, // bug 501569
1.49 + testMultipleIntervalsA,
1.50 + testMultipleIntervalsB,
1.51 + testMultipleIntervalsC,
1.52 + testOneValue,
1.53 + testFromTo,
1.54 + testWrongNumSplines,
1.55 + testToAnimation,
1.56 + testOkSyntax,
1.57 + testBadSyntaxA,
1.58 + testBadSyntaxB
1.59 + ];
1.60 + for (var i = 0; i < tests.length; i++) {
1.61 + var anim = createAnim();
1.62 + svg.setCurrentTime(0);
1.63 + tests[i](anim);
1.64 + anim.parentNode.removeChild(anim);
1.65 + }
1.66 + SimpleTest.finish();
1.67 +}
1.68 +
1.69 +function checkSample(time, expectedValue) {
1.70 + svg.setCurrentTime(time);
1.71 + is(circle.cx.animVal.value, expectedValue);
1.72 +}
1.73 +
1.74 +function checkSampleRough(time, expectedValue, precision) {
1.75 + const defaultPrecision = 0.00001;
1.76 + if (typeof precision == "undefined") {
1.77 + precision = defaultPrecision;
1.78 + }
1.79 + svg.setCurrentTime(time);
1.80 + var diff = Math.abs(expectedValue - circle.cx.animVal.value);
1.81 + ok(diff <= precision,
1.82 + "Unexpected sample value got " + circle.cx.animVal.value
1.83 + + ", expected " + expectedValue + " [error is " + diff
1.84 + + ", tolerance is " + precision + "]");
1.85 +}
1.86 +
1.87 +/*
1.88 + * These first four tests are the examples given in SVG 1.1, section 19.2.7
1.89 + */
1.90 +
1.91 +function testSimpleA(anim) {
1.92 + anim.setAttribute('dur','4s');
1.93 + anim.setAttribute('values', '10; 20');
1.94 + anim.setAttribute('keyTimes', '0; 1');
1.95 + anim.setAttribute('calcMode', 'spline');
1.96 + anim.setAttribute('keySplines', '0 0 1 1');
1.97 + checkSample(0, 10);
1.98 + checkSample(1, 12.5);
1.99 + checkSample(2, 15);
1.100 + checkSample(3, 17.5);
1.101 + checkSample(4, 20);
1.102 +}
1.103 +
1.104 +function testSimpleB(anim) {
1.105 + anim.setAttribute('dur','4s');
1.106 + anim.setAttribute('values', '10; 20');
1.107 + anim.setAttribute('keyTimes', '0; 1');
1.108 + anim.setAttribute('calcMode', 'spline');
1.109 + anim.setAttribute('keySplines', '.5 0 .5 1');
1.110 + checkSample(0, 10);
1.111 + checkSampleRough(1, 11.058925);
1.112 + checkSample(2, 15);
1.113 + checkSampleRough(3, 18.941075);
1.114 + checkSample(4, 20);
1.115 +}
1.116 +
1.117 +function testSimpleC(anim) {
1.118 + anim.setAttribute('dur','4s');
1.119 + anim.setAttribute('values', '10; 20');
1.120 + anim.setAttribute('keyTimes', '0; 1');
1.121 + anim.setAttribute('calcMode', 'spline');
1.122 + anim.setAttribute('keySplines', '0 .75 .25 1');
1.123 + checkSample(0, 10);
1.124 + checkSampleRough(1, 18.101832);
1.125 + checkSampleRough(2, 19.413430);
1.126 + checkSampleRough(3, 19.886504);
1.127 + checkSample(4, 20);
1.128 +}
1.129 +
1.130 +function testSimpleD(anim) {
1.131 + anim.setAttribute('dur','4s');
1.132 + anim.setAttribute('values', '10; 20');
1.133 + anim.setAttribute('keyTimes', '0; 1');
1.134 + anim.setAttribute('calcMode', 'spline');
1.135 + anim.setAttribute('keySplines', '1 0 .25 .25');
1.136 + checkSample(0, 10);
1.137 + checkSampleRough(1, 10.076925);
1.138 + checkSampleRough(2, 10.644369);
1.139 + checkSampleRough(3, 16.908699);
1.140 + checkSample(4, 20);
1.141 +}
1.142 +
1.143 +// Bug 501569 -- nsSMILKeySpline(1, 0, 0, 1) miscalculates values just under 0.5
1.144 +function testSimpleE(anim) {
1.145 + anim.setAttribute('dur','10s');
1.146 + anim.setAttribute('values', '0; 10');
1.147 + anim.setAttribute('keyTimes', '0; 1');
1.148 + anim.setAttribute('calcMode', 'spline');
1.149 + anim.setAttribute('keySplines', '1 0 0 1');
1.150 + checkSample(0, 0);
1.151 + checkSampleRough(0.001, 0);
1.152 + checkSampleRough(4.95, 3.409174);
1.153 + checkSampleRough(4.98, 3.819443);
1.154 + checkSampleRough(4.99, 4.060174);
1.155 + checkSampleRough(4.999, 4.562510);
1.156 + checkSample(5, 5);
1.157 + checkSampleRough(5.001, 5.437490);
1.158 + checkSampleRough(5.01, 5.939826);
1.159 + checkSampleRough(5.015, 6.075002);
1.160 + checkSampleRough(5.02, 6.180557);
1.161 + checkSampleRough(9.9999, 10);
1.162 + checkSample(10, 10);
1.163 +}
1.164 +
1.165 +function testMultipleIntervalsA(anim) {
1.166 + anim.setAttribute('dur','4s');
1.167 + anim.setAttribute('values', '10; 20; 30');
1.168 + anim.setAttribute('keyTimes', '0; 0.25; 1');
1.169 + anim.setAttribute('calcMode', 'spline');
1.170 + anim.setAttribute('keySplines', '0 0 1 1; .5 0 .5 1;');
1.171 + checkSample(0.5, 15);
1.172 + checkSampleRough(0.999, 20, 0.02);
1.173 + checkSample(1, 20);
1.174 + checkSampleRough(1.001, 20, 0.05);
1.175 + checkSample(2.5, 25);
1.176 + checkSampleRough(3.25, 29, 0.1);
1.177 +}
1.178 +
1.179 +function testMultipleIntervalsB(anim) {
1.180 + // as above but without keyTimes
1.181 + anim.setAttribute('dur','4s');
1.182 + anim.setAttribute('values', '10; 20; 30');
1.183 + anim.setAttribute('calcMode', 'spline');
1.184 + anim.setAttribute('keySplines', '0 0 1 1; .5 0 .5 1;');
1.185 + checkSample(1, 15);
1.186 + checkSampleRough(1.999, 20, 0.01);
1.187 + checkSample(2, 20);
1.188 + checkSampleRough(2.001, 20, 0.01);
1.189 + checkSample(3, 25);
1.190 + checkSampleRough(3.5, 29, 0.1);
1.191 +}
1.192 +
1.193 +function testMultipleIntervalsC(anim) {
1.194 + // test some unusual (but valid) syntax
1.195 + anim.setAttribute('dur','4s');
1.196 + anim.setAttribute('values', '10; 20; 30');
1.197 + anim.setAttribute('calcMode', 'spline');
1.198 + anim.setAttribute('keySplines', ' 0 .75 0.25 1 ; 1, 0 ,.25 .25 \t');
1.199 + checkSampleRough(3.5, 26.9, 0.2);
1.200 +}
1.201 +
1.202 +function testOneValue(anim) {
1.203 + anim.setAttribute('dur','4s');
1.204 + anim.setAttribute('values', '5');
1.205 + anim.setAttribute('calcMode', 'spline');
1.206 + anim.setAttribute('keySplines', '0 0 1 1');
1.207 + checkSample(0, 5);
1.208 + checkSample(1.5, 5);
1.209 +}
1.210 +
1.211 +function testFromTo(anim) {
1.212 + anim.setAttribute('dur','4s');
1.213 + anim.setAttribute('from', '10');
1.214 + anim.setAttribute('to', '20');
1.215 + anim.setAttribute('calcMode', 'spline');
1.216 + anim.setAttribute('keySplines', '.5 0 .5 1');
1.217 + checkSample(0, 10);
1.218 + checkSampleRough(1, 11, 0.1);
1.219 +}
1.220 +
1.221 +function testWrongNumSplines(anim) {
1.222 + anim.setAttribute('dur','4s');
1.223 + anim.setAttribute('from', '10');
1.224 + anim.setAttribute('to', '20');
1.225 + anim.setAttribute('calcMode', 'spline');
1.226 + anim.setAttribute('keySplines', '.5 0 .5 1; 0 0 1 1');
1.227 + // animation is in error, should do nothing
1.228 + checkSample(1.5, -100);
1.229 +}
1.230 +
1.231 +function testToAnimation(anim) {
1.232 + anim.setAttribute('dur','4s');
1.233 + anim.setAttribute('to', '20');
1.234 + anim.setAttribute('calcMode', 'spline');
1.235 + anim.setAttribute('keySplines', '.5 0 .5 1');
1.236 + checkSample(0, -100);
1.237 + checkSampleRough(1, -87.3, 0.1);
1.238 +}
1.239 +
1.240 +function testOkSyntax(anim) {
1.241 + var okStrs = ['0,0,0,0', // all commas
1.242 + ' 0 0 , 0 ,0 ', // mix of separators
1.243 + '0 0 0 0;', // trailing semi-colon
1.244 + '0 0 0 0 ;']; // " "
1.245 +
1.246 + for (var i = 0; i < okStrs.length; i++) {
1.247 + testAnim = createAnim();
1.248 + testAnim.setAttribute('dur','4s');
1.249 + testAnim.setAttribute('from', '0');
1.250 + testAnim.setAttribute('to', '20');
1.251 + testAnim.setAttribute('calcMode', 'spline');
1.252 + testAnim.setAttribute('keySplines', okStrs[i]);
1.253 + checkSample(4, 20);
1.254 + testAnim.parentNode.removeChild(testAnim);
1.255 + }
1.256 +}
1.257 +
1.258 +function testBadSyntaxA(anim) {
1.259 + var badStrs = ['', // empty
1.260 + ' ', // whitespace only
1.261 + '0,1.1,0,0', // bad range
1.262 + '0,0,0,-0.1', // " "
1.263 + ' 0 0 , 0 0 ,', // stray comma
1.264 + '1-1 0 0', // path-style separators
1.265 + '0 0 0', // wrong number of values
1.266 + '0 0 0 0 0', // " "
1.267 + '0 0 0 0 0 0 0 0', // " "
1.268 + '0 0 0; 0 0 0 0', // " "
1.269 + '0 0 0; 0', // mis-placed semi-colon
1.270 + ';0 0 0 0']; // " "
1.271 +
1.272 + for (var i = 0; i < badStrs.length; i++) {
1.273 + testAnim = createAnim();
1.274 + testAnim.setAttribute('dur','4s');
1.275 + testAnim.setAttribute('from', '0');
1.276 + testAnim.setAttribute('to', '20');
1.277 + testAnim.setAttribute('calcMode', 'spline');
1.278 + testAnim.setAttribute('keySplines', badStrs[i]);
1.279 + checkSample(4, -100);
1.280 + testAnim.parentNode.removeChild(testAnim);
1.281 + }
1.282 +}
1.283 +
1.284 +function testBadSyntaxB(anim) {
1.285 + // test some illegal syntax
1.286 + anim.setAttribute('dur','4s');
1.287 + anim.setAttribute('values', '10; 20; 30');
1.288 + anim.setAttribute('calcMode', 'spline');
1.289 + anim.setAttribute('keySplines', ' 0 .75 0.25 1 ; 1, A0 ,.25 .25 \t');
1.290 + // animation is in error, should do nothing
1.291 + checkSample(3.5, -100);
1.292 +}
1.293 +
1.294 +window.addEventListener("load", main, false);
1.295 +]]>
1.296 +</script>
1.297 +</pre>
1.298 +</body>
1.299 +</html>
