LayoutTests/transforms/cssmatrix-3d-interface.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3 <script src="../fast/js/resources/js-test-pre.js"></script>
   4 </head>
   5 <body>
   6 <div id="description"></div>
   7 <div id="console"></div>
   8
   9 <script>
  10
  11 description("This test exercises the CSSMatrix 3D interface");
  12
  13 debug("");
  14 debug("CSSMatrix constructors");
  15
  16 var m = null;
  17 m = new WebKitCSSMatrix();
  18 if (m)
  19   testPassed("default constructor");
  20 else
  21   testFailed("default constructor");
  22
  23 var m2 = new WebKitCSSMatrix(m);
  24 if (m2)
  25   testPassed("object constructor");
  26 else
  27   testFailed("object constructor");
  28
  29 m = new WebKitCSSMatrix("matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
  30 if (m)
  31   testPassed("string constructor");
  32 else
  33   testFailed("string constructor");
  34
  35 debug("");
  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)");
  38 var s = m.toString();
  39 var a = s.split('(');
  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]', '""');
  60
  61 debug("");
  62 debug("Test bad input to string constructor");
  63 shouldThrow('new WebKitCSSMatrix("banana")');
  64
  65 debug("");
  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');
  84
  85 debug("");
  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');
 104
 105 debug("");
 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');
 125
 126 debug("");
 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');
 146
 147 debug("");
 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()")');
 152
 153 debug("");
 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');
 174
 175 debug("");
 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');
 193
 194 debug("");
 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');
 215
 216 debug("");
 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)");
 220 m = tx.multiply(sx);
 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');
 237
 238 debug("");
 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)");
 241 m2 = m.inverse();
 242
 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');
 259
 260 debug("");
 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');
 278
 279 debug("");
 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()');
 283
 284 debug("");
 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');
 304
 305 debug("");
 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');
 323
 324 debug("");
 325 debug("Test scale");
 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');
 344
 345 debug("");
 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');
 363
 364 debug("");
 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');
 384
 385 debug("");
 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');
 403
 404 debug("");
 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');
 424
 425 debug("");
 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');
 443
 444 debug("");
 445
 446 </script>
 447 <script src="../fast/js/resources/js-test-post.js"></script>
 448
 449 <script>
 450 </script>
 451
 452 </body>
 453 </html>