2009-06-02 Julien Chaffraix <jchaffraix@webkit.org>
[WebKit-https.git] / LayoutTests / transforms / 3d / cssmatrix-3d-interface.xhtml
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <link rel="stylesheet" href="../../fast/js/resources/js-test-style.css"/>
4 <script src="../../fast/js/resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <div id="description"></div>
8 <div id="console"></div>
9
10 <script>
11
12 description("This test exercises the CSSMatrix 3D interface");
13
14 debug("");
15 debug("CSSMatrix constructors");
16
17 var m = null;
18 m = new WebKitCSSMatrix();
19 if (m)
20   testPassed("default constructor");
21 else
22   testFailed("default constructor");
23
24 var m2 = new WebKitCSSMatrix(m);
25 if (m2)
26   testPassed("object constructor");
27 else
28   testFailed("object constructor");
29
30 m = new WebKitCSSMatrix("matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
31 if (m)
32   testPassed("string constructor");
33 else
34   testFailed("string constructor");
35
36 debug("");
37 debug("Test toString");
38 var m = new WebKitCSSMatrix("matrix3d(1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
39 var s = m.toString();
40 var a = s.split('(');
41 shouldBe('a[0]', '"matrix3d"');
42 var a2 = a[1].split(',');
43 shouldBe('parseFloat(a2[0])', '1');
44 shouldBe('parseFloat(a2[1])', '0');
45 shouldBe('parseFloat(a2[2])', '0');
46 shouldBe('parseFloat(a2[3])', '1');
47 shouldBe('parseFloat(a2[4])', '0');
48 shouldBe('parseFloat(a2[5])', '1');
49 shouldBe('parseFloat(a2[6])', '0');
50 shouldBe('parseFloat(a2[7])', '0');
51 shouldBe('parseFloat(a2[8])', '0');
52 shouldBe('parseFloat(a2[9])', '0');
53 shouldBe('parseFloat(a2[10])', '1');
54 shouldBe('parseFloat(a2[11])', '0');
55 shouldBe('parseFloat(a2[12])', '0');
56 shouldBe('parseFloat(a2[13])', '0');
57 shouldBe('parseFloat(a2[14])', '0');
58 var a3 = a2[15].split(")");
59 shouldBe('parseFloat(a3[0])', '1');
60 shouldBe('a3[1]', '""');
61
62 debug("");
63 debug("Test bad input to string constructor");
64 shouldThrow('new WebKitCSSMatrix("banana")');
65
66 debug("");
67 debug("Test attributes on default matrix");
68 m = new WebKitCSSMatrix();
69 shouldBe('m.m11', '1');
70 shouldBe('m.m12', '0');
71 shouldBe('m.m13', '0');
72 shouldBe('m.m14', '0');
73 shouldBe('m.m21', '0');
74 shouldBe('m.m22', '1');
75 shouldBe('m.m23', '0');
76 shouldBe('m.m24', '0');
77 shouldBe('m.m31', '0');
78 shouldBe('m.m32', '0');
79 shouldBe('m.m33', '1');
80 shouldBe('m.m34', '0');
81 shouldBe('m.m41', '0');
82 shouldBe('m.m42', '0');
83 shouldBe('m.m43', '0');
84 shouldBe('m.m44', '1');
85
86 debug("");
87 debug("Test attributes on custom matrix");
88 m = new WebKitCSSMatrix("matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)");
89 shouldBe('m.m11', '11');
90 shouldBe('m.m12', '12');
91 shouldBe('m.m13', '13');
92 shouldBe('m.m14', '14');
93 shouldBe('m.m21', '21');
94 shouldBe('m.m22', '22');
95 shouldBe('m.m23', '23');
96 shouldBe('m.m24', '24');
97 shouldBe('m.m31', '31');
98 shouldBe('m.m32', '32');
99 shouldBe('m.m33', '33');
100 shouldBe('m.m34', '34');
101 shouldBe('m.m41', '41');
102 shouldBe('m.m42', '42');
103 shouldBe('m.m43', '43');
104 shouldBe('m.m44', '44');
105
106 debug("");
107 debug("Test setMatrixValue - set to matrix()");
108 m = new WebKitCSSMatrix();
109 m.setMatrixValue("matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)");
110 shouldBe('m.m11', '11');
111 shouldBe('m.m12', '12');
112 shouldBe('m.m13', '13');
113 shouldBe('m.m14', '14');
114 shouldBe('m.m21', '21');
115 shouldBe('m.m22', '22');
116 shouldBe('m.m23', '23');
117 shouldBe('m.m24', '24');
118 shouldBe('m.m31', '31');
119 shouldBe('m.m32', '32');
120 shouldBe('m.m33', '33');
121 shouldBe('m.m34', '34');
122 shouldBe('m.m41', '41');
123 shouldBe('m.m42', '42');
124 shouldBe('m.m43', '43');
125 shouldBe('m.m44', '44');
126
127 debug("");
128 debug("Test setMatrixValue - set to translate(10px, 20px, 30px) scale(2, 3, 4)");
129 m = new WebKitCSSMatrix();
130 m.setMatrixValue("translate3d(10px, 20px, 30px) scale3d(2, 3, 4)");
131 shouldBe('m.m11', '2');
132 shouldBe('m.m12', '0');
133 shouldBe('m.m13', '0');
134 shouldBe('m.m14', '0');
135 shouldBe('m.m21', '0');
136 shouldBe('m.m22', '3');
137 shouldBe('m.m23', '0');
138 shouldBe('m.m24', '0');
139 shouldBe('m.m31', '0');
140 shouldBe('m.m32', '0');
141 shouldBe('m.m33', '4');
142 shouldBe('m.m34', '0');
143 shouldBe('m.m41', '10');
144 shouldBe('m.m42', '20');
145 shouldBe('m.m43', '30');
146 shouldBe('m.m44', '1');
147
148 debug("");
149 debug("Test throwing exception from setMatrixValue");
150 shouldThrow('m.setMatrixValue("banana")');
151 shouldThrow('m.setMatrixValue("translate3d(10em, 20%, 40)")');
152 shouldThrow('m.setMatrixValue("translate3d(10px, 20px, 30px) scale3d()")');
153
154 debug("");
155 debug("Test multiply");
156 m =  new WebKitCSSMatrix("matrix3d( 1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16)");
157 m2 = new WebKitCSSMatrix("matrix3d(17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32)");
158 var m3 = m.multiply(m2);
159 shouldBe('parseFloat(m3.m11)', '250');
160 shouldBe('parseFloat(m3.m12)', '260');
161 shouldBe('parseFloat(m3.m13)', '270');
162 shouldBe('parseFloat(m3.m14)', '280');
163 shouldBe('parseFloat(m3.m21)', '618');
164 shouldBe('parseFloat(m3.m22)', '644');
165 shouldBe('parseFloat(m3.m23)', '670');
166 shouldBe('parseFloat(m3.m24)', '696');
167 shouldBe('parseFloat(m3.m31)', '986');
168 shouldBe('parseFloat(m3.m32)', '1028');
169 shouldBe('parseFloat(m3.m33)', '1070');
170 shouldBe('parseFloat(m3.m34)', '1112');
171 shouldBe('parseFloat(m3.m41)', '1354');
172 shouldBe('parseFloat(m3.m42)', '1412');
173 shouldBe('parseFloat(m3.m43)', '1470');
174 shouldBe('parseFloat(m3.m44)', '1528');
175
176 debug("");
177 debug("Test immutability of multiply");
178 shouldBe('parseFloat(m.m11)', '1');
179 shouldBe('parseFloat(m.m12)', '2');
180 shouldBe('parseFloat(m.m13)', '3');
181 shouldBe('parseFloat(m.m14)', '4');
182 shouldBe('parseFloat(m.m21)', '5');
183 shouldBe('parseFloat(m.m22)', '6');
184 shouldBe('parseFloat(m.m23)', '7');
185 shouldBe('parseFloat(m.m24)', '8');
186 shouldBe('parseFloat(m.m31)', '9');
187 shouldBe('parseFloat(m.m32)', '10');
188 shouldBe('parseFloat(m.m33)', '11');
189 shouldBe('parseFloat(m.m34)', '12');
190 shouldBe('parseFloat(m.m41)', '13');
191 shouldBe('parseFloat(m.m42)', '14');
192 shouldBe('parseFloat(m.m43)', '15');
193 shouldBe('parseFloat(m.m44)', '16');
194
195 debug("");
196 debug("Test inverse");
197 m = new WebKitCSSMatrix("matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 10, 20, 30, 1)");
198 m2 = m.inverse();
199
200 shouldBe('parseFloat(m2.m11)', '0.5');
201 shouldBe('parseFloat(m2.m12)', '0');
202 shouldBe('parseFloat(m2.m13)', '0');
203 shouldBe('parseFloat(m2.m14)', '0');
204 shouldBe('parseFloat(m2.m21)', '0');
205 shouldBe('parseFloat(m2.m22)', '0.5');
206 shouldBe('parseFloat(m2.m23)', '0');
207 shouldBe('parseFloat(m2.m24)', '0');
208 shouldBe('parseFloat(m2.m31)', '0');
209 shouldBe('parseFloat(m2.m32)', '0');
210 shouldBe('parseFloat(m2.m33)', '0.5');
211 shouldBe('parseFloat(m2.m34)', '0');
212 shouldBe('parseFloat(m2.m41)', '-5');
213 shouldBe('parseFloat(m2.m42)', '-10');
214 shouldBe('parseFloat(m2.m43)', '-15');
215 shouldBe('parseFloat(m2.m44)', '1');
216
217 debug("");
218 debug("Test immutability of inverse");
219 shouldBe('parseFloat(m.m11)', '2');
220 shouldBe('parseFloat(m.m12)', '0');
221 shouldBe('parseFloat(m.m13)', '0');
222 shouldBe('parseFloat(m.m14)', '0');
223 shouldBe('parseFloat(m.m21)', '0');
224 shouldBe('parseFloat(m.m22)', '2');
225 shouldBe('parseFloat(m.m23)', '0');
226 shouldBe('parseFloat(m.m24)', '0');
227 shouldBe('parseFloat(m.m31)', '0');
228 shouldBe('parseFloat(m.m32)', '0');
229 shouldBe('parseFloat(m.m33)', '2');
230 shouldBe('parseFloat(m.m34)', '0');
231 shouldBe('parseFloat(m.m41)', '10');
232 shouldBe('parseFloat(m.m42)', '20');
233 shouldBe('parseFloat(m.m43)', '30');
234 shouldBe('parseFloat(m.m44)', '1');
235
236 debug("");
237 debug("Test throwing exception from inverse");
238 m = new WebKitCSSMatrix("matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)"); // not invertible
239 shouldThrow('m.inverse()');
240
241 debug("");
242 debug("Test translate");
243 m = new WebKitCSSMatrix();
244 var m2 = m.translate(10, 20, 30);
245 shouldBe('m2.m11', '1');
246 shouldBe('m2.m12', '0');
247 shouldBe('m2.m13', '0');
248 shouldBe('m2.m14', '0');
249 shouldBe('m2.m21', '0');
250 shouldBe('m2.m22', '1');
251 shouldBe('m2.m23', '0');
252 shouldBe('m2.m24', '0');
253 shouldBe('m2.m31', '0');
254 shouldBe('m2.m32', '0');
255 shouldBe('m2.m33', '1');
256 shouldBe('m2.m34', '0');
257 shouldBe('m2.m41', '10');
258 shouldBe('m2.m42', '20');
259 shouldBe('m2.m43', '30');
260 shouldBe('m2.m44', '1');
261
262 debug("");
263 debug("Test immutability of translate");
264 shouldBe('m.m11', '1');
265 shouldBe('m.m12', '0');
266 shouldBe('m.m13', '0');
267 shouldBe('m.m14', '0');
268 shouldBe('m.m21', '0');
269 shouldBe('m.m22', '1');
270 shouldBe('m.m23', '0');
271 shouldBe('m.m24', '0');
272 shouldBe('m.m31', '0');
273 shouldBe('m.m32', '0');
274 shouldBe('m.m33', '1');
275 shouldBe('m.m34', '0');
276 shouldBe('m.m41', '0');
277 shouldBe('m.m42', '0');
278 shouldBe('m.m43', '0');
279 shouldBe('m.m44', '1');
280
281 debug("");
282 debug("Test scale");
283 m = new WebKitCSSMatrix();
284 m2 = m.scale(10, 20, 30);
285 shouldBe('m2.m11', '10');
286 shouldBe('m2.m12', '0');
287 shouldBe('m2.m13', '0');
288 shouldBe('m2.m14', '0');
289 shouldBe('m2.m21', '0');
290 shouldBe('m2.m22', '20');
291 shouldBe('m2.m23', '0');
292 shouldBe('m2.m24', '0');
293 shouldBe('m2.m31', '0');
294 shouldBe('m2.m32', '0');
295 shouldBe('m2.m33', '30');
296 shouldBe('m2.m34', '0');
297 shouldBe('m2.m41', '0');
298 shouldBe('m2.m42', '0');
299 shouldBe('m2.m43', '0');
300 shouldBe('m2.m44', '1');
301
302 debug("");
303 debug("Test immutability of scale");
304 shouldBe('m.m11', '1');
305 shouldBe('m.m12', '0');
306 shouldBe('m.m13', '0');
307 shouldBe('m.m14', '0');
308 shouldBe('m.m21', '0');
309 shouldBe('m.m22', '1');
310 shouldBe('m.m23', '0');
311 shouldBe('m.m24', '0');
312 shouldBe('m.m31', '0');
313 shouldBe('m.m32', '0');
314 shouldBe('m.m33', '1');
315 shouldBe('m.m34', '0');
316 shouldBe('m.m41', '0');
317 shouldBe('m.m42', '0');
318 shouldBe('m.m43', '0');
319 shouldBe('m.m44', '1');
320
321 debug("");
322 debug("Test rotate");
323 m = new WebKitCSSMatrix();
324 m2 = m.rotate(10, 20, 30);
325 shouldBe('parseFloat(m2.m11.toPrecision(6))', '0.813798');
326 shouldBe('parseFloat(m2.m12.toPrecision(6))', '0.469846');
327 shouldBe('parseFloat(m2.m13.toPrecision(6))', '-0.34202');
328 shouldBe('parseFloat(m2.m14.toPrecision(6))', '0');
329 shouldBe('parseFloat(m2.m21.toPrecision(6))', '-0.44097');
330 shouldBe('parseFloat(m2.m22.toPrecision(6))', '0.882564');
331 shouldBe('parseFloat(m2.m23.toPrecision(6))', '0.163176');
332 shouldBe('parseFloat(m2.m24.toPrecision(6))', '0');
333 shouldBe('parseFloat(m2.m31.toPrecision(6))', '0.378522');
334 shouldBe('parseFloat(m2.m32.toPrecision(6))', '0.0180283');
335 shouldBe('parseFloat(m2.m33.toPrecision(6))', '0.925417');
336 shouldBe('parseFloat(m2.m34.toPrecision(6))', '0');
337 shouldBe('parseFloat(m2.m41.toPrecision(6))', '0');
338 shouldBe('parseFloat(m2.m42.toPrecision(6))', '0');
339 shouldBe('parseFloat(m2.m43.toPrecision(6))', '0');
340 shouldBe('parseFloat(m2.m44.toPrecision(6))', '1');
341
342 debug("");
343 debug("Test immutability of rotate");
344 shouldBe('m.m11', '1');
345 shouldBe('m.m12', '0');
346 shouldBe('m.m13', '0');
347 shouldBe('m.m14', '0');
348 shouldBe('m.m21', '0');
349 shouldBe('m.m22', '1');
350 shouldBe('m.m23', '0');
351 shouldBe('m.m24', '0');
352 shouldBe('m.m31', '0');
353 shouldBe('m.m32', '0');
354 shouldBe('m.m33', '1');
355 shouldBe('m.m34', '0');
356 shouldBe('m.m41', '0');
357 shouldBe('m.m42', '0');
358 shouldBe('m.m43', '0');
359 shouldBe('m.m44', '1');
360
361 debug("");
362 debug("Test rotateAxisAngle");
363 m = new WebKitCSSMatrix();
364 m2 = m.rotateAxisAngle(0.707, 0.707, 0.707, 45);
365 shouldBe('parseFloat(m2.m11.toPrecision(6))', '0.804738');
366 shouldBe('parseFloat(m2.m12.toPrecision(6))', '0.505879');
367 shouldBe('parseFloat(m2.m13.toPrecision(6))', '-0.310617');
368 shouldBe('parseFloat(m2.m14.toPrecision(6))', '0');
369 shouldBe('parseFloat(m2.m21.toPrecision(6))', '-0.310617');
370 shouldBe('parseFloat(m2.m22.toPrecision(6))', '0.804738');
371 shouldBe('parseFloat(m2.m23.toPrecision(6))', '0.505879');
372 shouldBe('parseFloat(m2.m24.toPrecision(6))', '0');
373 shouldBe('parseFloat(m2.m31.toPrecision(6))', '0.505879');
374 shouldBe('parseFloat(m2.m32.toPrecision(6))', '-0.310617');
375 shouldBe('parseFloat(m2.m33.toPrecision(6))', '0.804738');
376 shouldBe('parseFloat(m2.m34.toPrecision(6))', '0');
377 shouldBe('parseFloat(m2.m41.toPrecision(6))', '0');
378 shouldBe('parseFloat(m2.m42.toPrecision(6))', '0');
379 shouldBe('parseFloat(m2.m43.toPrecision(6))', '0');
380 shouldBe('parseFloat(m2.m44.toPrecision(6))', '1');
381
382 debug("");
383 debug("Test immutability of rotateAxisAngle");
384 shouldBe('m.m11', '1');
385 shouldBe('m.m12', '0');
386 shouldBe('m.m13', '0');
387 shouldBe('m.m14', '0');
388 shouldBe('m.m21', '0');
389 shouldBe('m.m22', '1');
390 shouldBe('m.m23', '0');
391 shouldBe('m.m24', '0');
392 shouldBe('m.m31', '0');
393 shouldBe('m.m32', '0');
394 shouldBe('m.m33', '1');
395 shouldBe('m.m34', '0');
396 shouldBe('m.m41', '0');
397 shouldBe('m.m42', '0');
398 shouldBe('m.m43', '0');
399 shouldBe('m.m44', '1');
400
401 debug("");
402 successfullyParsed = true;
403
404 </script>
405 <script src="../../fast/js/resources/js-test-post.js"></script>
406
407 <script>
408 </script>
409
410 </body>
411 </html>