1 <html xmlns=
"http://www.w3.org/1999/xhtml">
3 <script src=
"../resources/js-test.js"></script>
6 <div id=
"description"></div>
7 <div id=
"console"></div>
11 description("This test exercises the CSSMatrix 3D interface");
14 debug("CSSMatrix constructors");
17 m
= new WebKitCSSMatrix();
19 testPassed("default constructor");
21 testFailed("default constructor");
23 var m2
= new WebKitCSSMatrix(m
);
25 testPassed("object constructor");
27 testFailed("object constructor");
29 m
= new WebKitCSSMatrix("matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
31 testPassed("string constructor");
33 testFailed("string constructor");
36 debug("Test toString");
37 var m
= new WebKitCSSMatrix("matrix3d(1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
40 shouldBe('a[0]', '"matrix3d"');
41 var a2
= a
[1].split(',');
42 shouldBe('parseFloat(a2[0])', '1');
43 shouldBe('parseFloat(a2[1])', '0');
44 shouldBe('parseFloat(a2[2])', '0');
45 shouldBe('parseFloat(a2[3])', '1');
46 shouldBe('parseFloat(a2[4])', '0');
47 shouldBe('parseFloat(a2[5])', '1');
48 shouldBe('parseFloat(a2[6])', '0');
49 shouldBe('parseFloat(a2[7])', '0');
50 shouldBe('parseFloat(a2[8])', '0');
51 shouldBe('parseFloat(a2[9])', '0');
52 shouldBe('parseFloat(a2[10])', '1');
53 shouldBe('parseFloat(a2[11])', '0');
54 shouldBe('parseFloat(a2[12])', '0');
55 shouldBe('parseFloat(a2[13])', '0');
56 shouldBe('parseFloat(a2[14])', '0');
57 var a3
= a2
[15].split(")");
58 shouldBe('parseFloat(a3[0])', '1');
59 shouldBe('a3[1]', '""');
62 debug("Test bad input to string constructor");
63 shouldThrow('new WebKitCSSMatrix("banana")');
66 debug("Test attributes on default matrix");
67 m
= new WebKitCSSMatrix();
68 shouldBe('m.m11', '1');
69 shouldBe('m.m12', '0');
70 shouldBe('m.m13', '0');
71 shouldBe('m.m14', '0');
72 shouldBe('m.m21', '0');
73 shouldBe('m.m22', '1');
74 shouldBe('m.m23', '0');
75 shouldBe('m.m24', '0');
76 shouldBe('m.m31', '0');
77 shouldBe('m.m32', '0');
78 shouldBe('m.m33', '1');
79 shouldBe('m.m34', '0');
80 shouldBe('m.m41', '0');
81 shouldBe('m.m42', '0');
82 shouldBe('m.m43', '0');
83 shouldBe('m.m44', '1');
86 debug("Test attributes on custom matrix");
87 m
= new WebKitCSSMatrix("matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)");
88 shouldBe('m.m11', '11');
89 shouldBe('m.m12', '12');
90 shouldBe('m.m13', '13');
91 shouldBe('m.m14', '14');
92 shouldBe('m.m21', '21');
93 shouldBe('m.m22', '22');
94 shouldBe('m.m23', '23');
95 shouldBe('m.m24', '24');
96 shouldBe('m.m31', '31');
97 shouldBe('m.m32', '32');
98 shouldBe('m.m33', '33');
99 shouldBe('m.m34', '34');
100 shouldBe('m.m41', '41');
101 shouldBe('m.m42', '42');
102 shouldBe('m.m43', '43');
103 shouldBe('m.m44', '44');
106 debug("Test setMatrixValue - set to matrix()");
107 m
= new WebKitCSSMatrix();
108 m
.setMatrixValue("matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)");
109 shouldBe('m.m11', '11');
110 shouldBe('m.m12', '12');
111 shouldBe('m.m13', '13');
112 shouldBe('m.m14', '14');
113 shouldBe('m.m21', '21');
114 shouldBe('m.m22', '22');
115 shouldBe('m.m23', '23');
116 shouldBe('m.m24', '24');
117 shouldBe('m.m31', '31');
118 shouldBe('m.m32', '32');
119 shouldBe('m.m33', '33');
120 shouldBe('m.m34', '34');
121 shouldBe('m.m41', '41');
122 shouldBe('m.m42', '42');
123 shouldBe('m.m43', '43');
124 shouldBe('m.m44', '44');
127 debug("Test setMatrixValue - set to translate(10px, 20px, 30px) scale(2, 3, 4)");
128 m
= new WebKitCSSMatrix();
129 m
.setMatrixValue("translate3d(10px, 20px, 30px) scale3d(2, 3, 4)");
130 shouldBe('m.m11', '2');
131 shouldBe('m.m12', '0');
132 shouldBe('m.m13', '0');
133 shouldBe('m.m14', '0');
134 shouldBe('m.m21', '0');
135 shouldBe('m.m22', '3');
136 shouldBe('m.m23', '0');
137 shouldBe('m.m24', '0');
138 shouldBe('m.m31', '0');
139 shouldBe('m.m32', '0');
140 shouldBe('m.m33', '4');
141 shouldBe('m.m34', '0');
142 shouldBe('m.m41', '10');
143 shouldBe('m.m42', '20');
144 shouldBe('m.m43', '30');
145 shouldBe('m.m44', '1');
148 debug("Test throwing exception from setMatrixValue");
149 shouldThrow('m.setMatrixValue("banana")');
150 shouldThrow('m.setMatrixValue("translate3d(10em, 20%, 40)")');
151 shouldThrow('m.setMatrixValue("translate3d(10px, 20px, 30px) scale3d()")');
154 debug("Test multiply");
155 m
= new WebKitCSSMatrix("matrix3d( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)");
156 m2
= new WebKitCSSMatrix("matrix3d(17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32)");
157 var m3
= m
.multiply(m2
);
158 shouldBe('parseFloat(m3.m11)', '538');
159 shouldBe('parseFloat(m3.m12)', '612');
160 shouldBe('parseFloat(m3.m13)', '686');
161 shouldBe('parseFloat(m3.m14)', '760');
162 shouldBe('parseFloat(m3.m21)', '650');
163 shouldBe('parseFloat(m3.m22)', '740');
164 shouldBe('parseFloat(m3.m23)', '830');
165 shouldBe('parseFloat(m3.m24)', '920');
166 shouldBe('parseFloat(m3.m31)', '762');
167 shouldBe('parseFloat(m3.m32)', '868');
168 shouldBe('parseFloat(m3.m33)', '974');
169 shouldBe('parseFloat(m3.m34)', '1080');
170 shouldBe('parseFloat(m3.m41)', '874');
171 shouldBe('parseFloat(m3.m42)', '996');
172 shouldBe('parseFloat(m3.m43)', '1118');
173 shouldBe('parseFloat(m3.m44)', '1240');
176 debug("Test immutability of multiply");
177 shouldBe('parseFloat(m.m11)', '1');
178 shouldBe('parseFloat(m.m12)', '2');
179 shouldBe('parseFloat(m.m13)', '3');
180 shouldBe('parseFloat(m.m14)', '4');
181 shouldBe('parseFloat(m.m21)', '5');
182 shouldBe('parseFloat(m.m22)', '6');
183 shouldBe('parseFloat(m.m23)', '7');
184 shouldBe('parseFloat(m.m24)', '8');
185 shouldBe('parseFloat(m.m31)', '9');
186 shouldBe('parseFloat(m.m32)', '10');
187 shouldBe('parseFloat(m.m33)', '11');
188 shouldBe('parseFloat(m.m34)', '12');
189 shouldBe('parseFloat(m.m41)', '13');
190 shouldBe('parseFloat(m.m42)', '14');
191 shouldBe('parseFloat(m.m43)', '15');
192 shouldBe('parseFloat(m.m44)', '16');
195 debug("Test multiply in an affine matrix");
196 m
= new WebKitCSSMatrix("matrix3d(1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 1, 0, 5, 6, 0, 1)");
197 m2
= new WebKitCSSMatrix("matrix3d(7, 8, 0, 0, 9, 10, 0, 0, 0, 0, 1, 0, 11, 12, 0, 1)");
198 var m3
= m
.multiply(m2
);
199 shouldBe('parseFloat(m3.m11)', '31');
200 shouldBe('parseFloat(m3.m12)', '46');
201 shouldBe('parseFloat(m3.m13)', '0');
202 shouldBe('parseFloat(m3.m14)', '0');
203 shouldBe('parseFloat(m3.m21)', '39');
204 shouldBe('parseFloat(m3.m22)', '58');
205 shouldBe('parseFloat(m3.m23)', '0');
206 shouldBe('parseFloat(m3.m24)', '0');
207 shouldBe('parseFloat(m3.m31)', '0');
208 shouldBe('parseFloat(m3.m32)', '0');
209 shouldBe('parseFloat(m3.m33)', '1');
210 shouldBe('parseFloat(m3.m34)', '0');
211 shouldBe('parseFloat(m3.m41)', '52');
212 shouldBe('parseFloat(m3.m42)', '76');
213 shouldBe('parseFloat(m3.m43)', '0');
214 shouldBe('parseFloat(m3.m44)', '1');
217 debug("Test that multiply works in the right direction");
218 var tx
= new WebKitCSSMatrix("matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)");
219 var sx
= new WebKitCSSMatrix("matrix3d( 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
221 shouldBe('m.m11', '2');
222 shouldBe('m.m12', '0');
223 shouldBe('m.m13', '0');
224 shouldBe('m.m14', '0');
225 shouldBe('m.m21', '0');
226 shouldBe('m.m22', '1');
227 shouldBe('m.m23', '0');
228 shouldBe('m.m24', '0');
229 shouldBe('m.m31', '0');
230 shouldBe('m.m32', '0');
231 shouldBe('m.m33', '1');
232 shouldBe('m.m34', '0');
233 shouldBe('m.m41', '100');
234 shouldBe('m.m42', '0');
235 shouldBe('m.m43', '0');
236 shouldBe('m.m44', '1');
239 debug("Test inverse");
240 m
= new WebKitCSSMatrix("matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 10, 20, 30, 1)");
243 shouldBe('parseFloat(m2.m11)', '0.5');
244 shouldBe('parseFloat(m2.m12)', '0');
245 shouldBe('parseFloat(m2.m13)', '0');
246 shouldBe('parseFloat(m2.m14)', '0');
247 shouldBe('parseFloat(m2.m21)', '0');
248 shouldBe('parseFloat(m2.m22)', '0.5');
249 shouldBe('parseFloat(m2.m23)', '0');
250 shouldBe('parseFloat(m2.m24)', '0');
251 shouldBe('parseFloat(m2.m31)', '0');
252 shouldBe('parseFloat(m2.m32)', '0');
253 shouldBe('parseFloat(m2.m33)', '0.5');
254 shouldBe('parseFloat(m2.m34)', '0');
255 shouldBe('parseFloat(m2.m41)', '-5');
256 shouldBe('parseFloat(m2.m42)', '-10');
257 shouldBe('parseFloat(m2.m43)', '-15');
258 shouldBe('parseFloat(m2.m44)', '1');
261 debug("Test immutability of inverse");
262 shouldBe('parseFloat(m.m11)', '2');
263 shouldBe('parseFloat(m.m12)', '0');
264 shouldBe('parseFloat(m.m13)', '0');
265 shouldBe('parseFloat(m.m14)', '0');
266 shouldBe('parseFloat(m.m21)', '0');
267 shouldBe('parseFloat(m.m22)', '2');
268 shouldBe('parseFloat(m.m23)', '0');
269 shouldBe('parseFloat(m.m24)', '0');
270 shouldBe('parseFloat(m.m31)', '0');
271 shouldBe('parseFloat(m.m32)', '0');
272 shouldBe('parseFloat(m.m33)', '2');
273 shouldBe('parseFloat(m.m34)', '0');
274 shouldBe('parseFloat(m.m41)', '10');
275 shouldBe('parseFloat(m.m42)', '20');
276 shouldBe('parseFloat(m.m43)', '30');
277 shouldBe('parseFloat(m.m44)', '1');
280 debug("Test throwing exception from inverse");
281 m
= new WebKitCSSMatrix("matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)"); // not invertible
282 shouldThrow('m.inverse()');
285 debug("Test translate");
286 m
= new WebKitCSSMatrix();
287 var m2
= m
.translate(10, 20, 30);
288 shouldBe('m2.m11', '1');
289 shouldBe('m2.m12', '0');
290 shouldBe('m2.m13', '0');
291 shouldBe('m2.m14', '0');
292 shouldBe('m2.m21', '0');
293 shouldBe('m2.m22', '1');
294 shouldBe('m2.m23', '0');
295 shouldBe('m2.m24', '0');
296 shouldBe('m2.m31', '0');
297 shouldBe('m2.m32', '0');
298 shouldBe('m2.m33', '1');
299 shouldBe('m2.m34', '0');
300 shouldBe('m2.m41', '10');
301 shouldBe('m2.m42', '20');
302 shouldBe('m2.m43', '30');
303 shouldBe('m2.m44', '1');
306 debug("Test immutability of translate");
307 shouldBe('m.m11', '1');
308 shouldBe('m.m12', '0');
309 shouldBe('m.m13', '0');
310 shouldBe('m.m14', '0');
311 shouldBe('m.m21', '0');
312 shouldBe('m.m22', '1');
313 shouldBe('m.m23', '0');
314 shouldBe('m.m24', '0');
315 shouldBe('m.m31', '0');
316 shouldBe('m.m32', '0');
317 shouldBe('m.m33', '1');
318 shouldBe('m.m34', '0');
319 shouldBe('m.m41', '0');
320 shouldBe('m.m42', '0');
321 shouldBe('m.m43', '0');
322 shouldBe('m.m44', '1');
326 m
= new WebKitCSSMatrix();
327 m2
= m
.scale(10, 20, 30);
328 shouldBe('m2.m11', '10');
329 shouldBe('m2.m12', '0');
330 shouldBe('m2.m13', '0');
331 shouldBe('m2.m14', '0');
332 shouldBe('m2.m21', '0');
333 shouldBe('m2.m22', '20');
334 shouldBe('m2.m23', '0');
335 shouldBe('m2.m24', '0');
336 shouldBe('m2.m31', '0');
337 shouldBe('m2.m32', '0');
338 shouldBe('m2.m33', '30');
339 shouldBe('m2.m34', '0');
340 shouldBe('m2.m41', '0');
341 shouldBe('m2.m42', '0');
342 shouldBe('m2.m43', '0');
343 shouldBe('m2.m44', '1');
346 debug("Test immutability of scale");
347 shouldBe('m.m11', '1');
348 shouldBe('m.m12', '0');
349 shouldBe('m.m13', '0');
350 shouldBe('m.m14', '0');
351 shouldBe('m.m21', '0');
352 shouldBe('m.m22', '1');
353 shouldBe('m.m23', '0');
354 shouldBe('m.m24', '0');
355 shouldBe('m.m31', '0');
356 shouldBe('m.m32', '0');
357 shouldBe('m.m33', '1');
358 shouldBe('m.m34', '0');
359 shouldBe('m.m41', '0');
360 shouldBe('m.m42', '0');
361 shouldBe('m.m43', '0');
362 shouldBe('m.m44', '1');
365 debug("Test rotate");
366 m
= new WebKitCSSMatrix();
367 m2
= m
.rotate(10, 20, 30);
368 shouldBe('parseFloat(m2.m11.toPrecision(6))', '0.813798');
369 shouldBe('parseFloat(m2.m12.toPrecision(6))', '0.469846');
370 shouldBe('parseFloat(m2.m13.toPrecision(6))', '-0.34202');
371 shouldBe('parseFloat(m2.m14.toPrecision(6))', '0');
372 shouldBe('parseFloat(m2.m21.toPrecision(6))', '-0.44097');
373 shouldBe('parseFloat(m2.m22.toPrecision(6))', '0.882564');
374 shouldBe('parseFloat(m2.m23.toPrecision(6))', '0.163176');
375 shouldBe('parseFloat(m2.m24.toPrecision(6))', '0');
376 shouldBe('parseFloat(m2.m31.toPrecision(6))', '0.378522');
377 shouldBe('parseFloat(m2.m32.toPrecision(6))', '0.0180283');
378 shouldBe('parseFloat(m2.m33.toPrecision(6))', '0.925417');
379 shouldBe('parseFloat(m2.m34.toPrecision(6))', '0');
380 shouldBe('parseFloat(m2.m41.toPrecision(6))', '0');
381 shouldBe('parseFloat(m2.m42.toPrecision(6))', '0');
382 shouldBe('parseFloat(m2.m43.toPrecision(6))', '0');
383 shouldBe('parseFloat(m2.m44.toPrecision(6))', '1');
386 debug("Test immutability of rotate");
387 shouldBe('m.m11', '1');
388 shouldBe('m.m12', '0');
389 shouldBe('m.m13', '0');
390 shouldBe('m.m14', '0');
391 shouldBe('m.m21', '0');
392 shouldBe('m.m22', '1');
393 shouldBe('m.m23', '0');
394 shouldBe('m.m24', '0');
395 shouldBe('m.m31', '0');
396 shouldBe('m.m32', '0');
397 shouldBe('m.m33', '1');
398 shouldBe('m.m34', '0');
399 shouldBe('m.m41', '0');
400 shouldBe('m.m42', '0');
401 shouldBe('m.m43', '0');
402 shouldBe('m.m44', '1');
405 debug("Test rotateAxisAngle");
406 m
= new WebKitCSSMatrix();
407 m2
= m
.rotateAxisAngle(0.707, 0.707, 0.707, 45);
408 shouldBe('parseFloat(m2.m11.toPrecision(6))', '0.804738');
409 shouldBe('parseFloat(m2.m12.toPrecision(6))', '0.505879');
410 shouldBe('parseFloat(m2.m13.toPrecision(6))', '-0.310617');
411 shouldBe('parseFloat(m2.m14.toPrecision(6))', '0');
412 shouldBe('parseFloat(m2.m21.toPrecision(6))', '-0.310617');
413 shouldBe('parseFloat(m2.m22.toPrecision(6))', '0.804738');
414 shouldBe('parseFloat(m2.m23.toPrecision(6))', '0.505879');
415 shouldBe('parseFloat(m2.m24.toPrecision(6))', '0');
416 shouldBe('parseFloat(m2.m31.toPrecision(6))', '0.505879');
417 shouldBe('parseFloat(m2.m32.toPrecision(6))', '-0.310617');
418 shouldBe('parseFloat(m2.m33.toPrecision(6))', '0.804738');
419 shouldBe('parseFloat(m2.m34.toPrecision(6))', '0');
420 shouldBe('parseFloat(m2.m41.toPrecision(6))', '0');
421 shouldBe('parseFloat(m2.m42.toPrecision(6))', '0');
422 shouldBe('parseFloat(m2.m43.toPrecision(6))', '0');
423 shouldBe('parseFloat(m2.m44.toPrecision(6))', '1');
426 debug("Test immutability of rotateAxisAngle");
427 shouldBe('m.m11', '1');
428 shouldBe('m.m12', '0');
429 shouldBe('m.m13', '0');
430 shouldBe('m.m14', '0');
431 shouldBe('m.m21', '0');
432 shouldBe('m.m22', '1');
433 shouldBe('m.m23', '0');
434 shouldBe('m.m24', '0');
435 shouldBe('m.m31', '0');
436 shouldBe('m.m32', '0');
437 shouldBe('m.m33', '1');
438 shouldBe('m.m34', '0');
439 shouldBe('m.m41', '0');
440 shouldBe('m.m42', '0');
441 shouldBe('m.m43', '0');
442 shouldBe('m.m44', '1');