dom/smil/test/test_smilKeySplines.xhtml@b8a032363ba2
dom/smil/test/test_smilKeySplines.xhtml
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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 **/
20 /* Global Variables */
21 const svgns="http://www.w3.org/2000/svg";
22 var svg = document.getElementById("svg");
23 var circle = document.getElementById('circle');
25 SimpleTest.waitForExplicitFinish();
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 }
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");
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 }
66 function checkSample(time, expectedValue) {
67 svg.setCurrentTime(time);
68 is(circle.cx.animVal.value, expectedValue);
69 }
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 }
84 /*
85 * These first four tests are the examples given in SVG 1.1, section 19.2.7
86 */
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 ;']; // " "
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 }
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']; // " "
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 }
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 }
291 window.addEventListener("load", main, false);
292 ]]>
293 </script>
294 </pre>
295 </body>
296 </html>
