LayoutTests/transforms/cssmatrix-2d-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 interface");
  12
  13 debug("");
  14 debug("CSSMatrix constructors");
  15
  16
  17 var m = new WebKitCSSMatrix();
  18 shouldBeNonNull('m');
  19 shouldBeNonNull('new WebKitCSSMatrix()');
  20 shouldBeNonNull('new WebKitCSSMatrix(m)');
  21 shouldBeNonNull('new WebKitCSSMatrix("matrix(1, 0, 0, 1, 0, 0)")');
  22 shouldBeNonNull('new WebKitCSSMatrix("")');
  23 shouldBeNonNull('new WebKitCSSMatrix("none")');
  24 shouldBeNonNull('new WebKitCSSMatrix("   none   ")');
  25
  26 debug("");
  27 debug("Test toString");
  28 var m = new WebKitCSSMatrix("matrix(1, 0, 0, 1, 0, 0)");
  29 var s = m.toString();
  30 var a = s.split('(');
  31 shouldBe('a[0]', '"matrix"');
  32 var a2 = a[1].split(',');
  33 shouldBe('parseFloat(a2[0])', '1');
  34 shouldBe('parseFloat(a2[1])', '0');
  35 shouldBe('parseFloat(a2[2])', '0');
  36 shouldBe('parseFloat(a2[3])', '1');
  37 shouldBe('parseFloat(a2[4])', '0');
  38 var a3 = a2[5].split(")");
  39 shouldBe('parseFloat(a3[0])', '0');
  40 shouldBe('a3[1]', '""');
  41
  42 debug("");
  43 debug("Test bad input to string constructor");
  44 shouldThrow('new WebKitCSSMatrix("banana")');
  45
  46 debug("");
  47 debug("Test attributes on default matrix");
  48 m = new WebKitCSSMatrix();
  49 shouldBe('m.a', '1');
  50 shouldBe('m.b', '0');
  51 shouldBe('m.c', '0');
  52 shouldBe('m.d', '1');
  53 shouldBe('m.e', '0');
  54 shouldBe('m.f', '0');
  55
  56 debug("");
  57 debug("Test attributes on custom matrix");
  58 m = new WebKitCSSMatrix("matrix(11, 12, 21, 22, 41, 42)");
  59 shouldBe('m.a', '11');
  60 shouldBe('m.b', '12');
  61 shouldBe('m.c', '21');
  62 shouldBe('m.d', '22');
  63 shouldBe('m.e', '41');
  64 shouldBe('m.f', '42');
  65
  66 debug("");
  67 debug("Test setMatrixValue - set to matrix()");
  68 m = new WebKitCSSMatrix();
  69 m.setMatrixValue("matrix(11, 12, 21, 22, 41, 42)");
  70 shouldBe('m.a', '11');
  71 shouldBe('m.b', '12');
  72 shouldBe('m.c', '21');
  73 shouldBe('m.d', '22');
  74 shouldBe('m.e', '41');
  75 shouldBe('m.f', '42');
  76
  77 debug("");
  78 debug("Test setMatrixValue - set to translate(10px, 20px) scale(2, 3)");
  79 m = new WebKitCSSMatrix();
  80 m.setMatrixValue("translate(10px, 20px) scale(2, 3)");
  81 shouldBe('m.a', '2');
  82 shouldBe('m.b', '0');
  83 shouldBe('m.c', '0');
  84 shouldBe('m.d', '3');
  85 shouldBe('m.e', '10');
  86 shouldBe('m.f', '20');
  87
  88 debug("");
  89 debug("Test throwing exception from setMatrixValue");
  90 shouldThrow('m.setMatrixValue("banana")');
  91 shouldThrow('m.setMatrixValue("translate(10em, 20%)")');
  92 shouldThrow('m.setMatrixValue("translate(10px, 20px) scale()")');
  93
  94 debug("");
  95 debug("Test attributes on translate() and accumulation");
  96 m = new WebKitCSSMatrix();
  97 var m2 = m.translate(50,0);
  98 m2 = m2.translate(50,50);
  99 shouldBe('m2.a', '1');
 100 shouldBe('m2.b', '0');
 101 shouldBe('m2.c', '0');
 102 shouldBe('m2.d', '1');
 103 shouldBe('m2.e', '100');
 104 shouldBe('m2.f', '50');
 105
 106 debug("");
 107 debug("Test immutability of translate");
 108 shouldBe('parseFloat(m.a)', '1');
 109 shouldBe('parseFloat(m.b)', '0');
 110 shouldBe('parseFloat(m.c)', '0');
 111 shouldBe('parseFloat(m.d)', '1');
 112 shouldBe('parseFloat(m.e)', '0');
 113 shouldBe('parseFloat(m.f)', '0');
 114
 115 debug("");
 116 debug("Test attributes on scale()");
 117 var m3 = m2.scale(5);
 118 shouldBe('m3.a', '5');
 119 shouldBe('m3.b', '0');
 120 shouldBe('m3.c', '0');
 121 shouldBe('m3.d', '5');
 122 shouldBe('m3.e', '100');
 123 shouldBe('m3.f', '50');
 124
 125 debug("");
 126 debug("Test immutability of scale()");
 127 shouldBe('parseFloat(m2.a)', '1');
 128 shouldBe('parseFloat(m2.b)', '0');
 129 shouldBe('parseFloat(m2.c)', '0');
 130 shouldBe('parseFloat(m2.d)', '1');
 131 shouldBe('parseFloat(m2.e)', '100');
 132 shouldBe('parseFloat(m2.f)', '50');
 133
 134 debug("");
 135 debug("Test attributes on non-uniform scale()");
 136 var m4 = m3.scale(2,1);
 137 shouldBe('m4.a', '10');
 138 shouldBe('m4.b', '0');
 139 shouldBe('m4.c', '0');
 140 shouldBe('m4.d', '5');
 141 shouldBe('m4.e', '100');
 142 shouldBe('m4.f', '50');
 143
 144 debug("");
 145 debug("Test immutability of non-uniform scale()");
 146 shouldBe('parseFloat(m3.a)', '5');
 147 shouldBe('parseFloat(m3.b)', '0');
 148 shouldBe('parseFloat(m3.c)', '0');
 149 shouldBe('parseFloat(m3.d)', '5');
 150 shouldBe('parseFloat(m3.e)', '100');
 151 shouldBe('parseFloat(m3.f)', '50');
 152
 153 debug("");
 154 debug("Test rotate");
 155 m = new WebKitCSSMatrix();
 156 m2 = m.rotate(10);
 157 shouldBe('parseFloat(m2.a.toPrecision(6))', '0.984808');
 158 shouldBe('parseFloat(m2.b.toPrecision(6))', '0.173648');
 159 shouldBe('parseFloat(m2.c.toPrecision(6))', '-0.173648');
 160 shouldBe('parseFloat(m2.d.toPrecision(6))', '0.984808');
 161 shouldBe('m.e', '0');
 162 shouldBe('m.f', '0');
 163
 164 debug("");
 165 debug("Test immutability of rotate");
 166 shouldBe('parseFloat(m.a)', '1');
 167 shouldBe('parseFloat(m.b)', '0');
 168 shouldBe('parseFloat(m.c)', '0');
 169 shouldBe('parseFloat(m.d)', '1');
 170 shouldBe('parseFloat(m.e)', '0');
 171 shouldBe('parseFloat(m.f)', '0');
 172
 173 debug("");
 174 debug("Test skew in horizontal direction");
 175 m = new WebKitCSSMatrix();
 176 m2 = m.skewX(10);
 177 shouldBe('parseFloat(m2.a)', '1');
 178 shouldBe('parseFloat(m2.b)', '0');
 179 shouldBe('parseFloat(m2.c.toPrecision(6))', '0.176327');
 180 shouldBe('parseFloat(m2.d)', '1');
 181 shouldBe('parseFloat(m2.e)', '0');
 182 shouldBe('parseFloat(m2.f)', '0');
 183
 184 debug("");
 185 debug("Test immutability of horizontal skew");
 186 shouldBe('parseFloat(m.a)', '1');
 187 shouldBe('parseFloat(m.b)', '0');
 188 shouldBe('parseFloat(m.c)', '0');
 189 shouldBe('parseFloat(m.d)', '1');
 190 shouldBe('parseFloat(m.e)', '0');
 191 shouldBe('parseFloat(m.f)', '0');
 192
 193 debug("");
 194 debug("Test skew in vertical direction");
 195 m = new WebKitCSSMatrix();
 196 m2 = m.skewY(35);
 197 shouldBe('parseFloat(m2.a)', '1');
 198 shouldBe('parseFloat(m2.b.toPrecision(6))', '0.700208');
 199 shouldBe('parseFloat(m2.c)', '0');
 200 shouldBe('parseFloat(m2.d)', '1');
 201 shouldBe('parseFloat(m2.e)', '0');
 202 shouldBe('parseFloat(m2.f)', '0');
 203
 204 debug("");
 205 debug("Test immutability of vertical skew");
 206 shouldBe('parseFloat(m.a)', '1');
 207 shouldBe('parseFloat(m.b)', '0');
 208 shouldBe('parseFloat(m.c)', '0');
 209 shouldBe('parseFloat(m.d)', '1');
 210 shouldBe('parseFloat(m.e)', '0');
 211 shouldBe('parseFloat(m.f)', '0');
 212
 213 debug("");
 214 debug("Test multiply");
 215 m = new WebKitCSSMatrix("matrix(1, 2, 3, 4, 5, 6)");
 216 m2 = new WebKitCSSMatrix("matrix(7, 8, 9, 10, 11, 12)");
 217 var m3 = m.multiply(m2);
 218 shouldBe('parseFloat(m3.a)', '31');
 219 shouldBe('parseFloat(m3.b)', '46');
 220 shouldBe('parseFloat(m3.c)', '39');
 221 shouldBe('parseFloat(m3.d)', '58');
 222 shouldBe('parseFloat(m3.e)', '52');
 223 shouldBe('parseFloat(m3.f)', '76');
 224
 225 debug("");
 226 debug("Test that multiply works in the right direction");
 227 var tx = new WebKitCSSMatrix();
 228 var sx = new WebKitCSSMatrix();
 229 tx = tx.translate(100,0);
 230 sx = sx.scale(2,1);
 231 m = tx.multiply(sx);
 232 shouldBe('m.a', '2');
 233 shouldBe('m.b', '0');
 234 shouldBe('m.c', '0');
 235 shouldBe('m.d', '1');
 236 shouldBe('m.e', '100');
 237 shouldBe('m.f', '0');
 238
 239 debug("")
 240 debug("Test immutability of multiply");
 241 shouldBe('tx.a', '1');
 242 shouldBe('tx.b', '0');
 243 shouldBe('tx.c', '0');
 244 shouldBe('tx.d', '1');
 245 shouldBe('tx.e', '100');
 246 shouldBe('tx.f', '0');
 247 shouldBe('sx.a', '2');
 248 shouldBe('sx.b', '0');
 249 shouldBe('sx.c', '0');
 250 shouldBe('sx.d', '1');
 251 shouldBe('sx.e', '0');
 252 shouldBe('sx.f', '0');
 253
 254 debug("");
 255 debug("Test multiply with missing argument");
 256 m = new WebKitCSSMatrix("matrix(1, 2, 3, 4, 5, 6)");
 257 m2 = m.multiply();
 258 shouldBe('m2', 'null');
 259
 260 debug("");
 261 debug("Test inverse");
 262 m = new WebKitCSSMatrix("matrix(2, 0, 0, 2, 10, 20)");
 263 m2 = m.inverse();
 264
 265 shouldBe('parseFloat(m2.a)', '0.5');
 266 shouldBe('parseFloat(m2.b)', '0');
 267 shouldBe('parseFloat(m2.c)', '0');
 268 shouldBe('parseFloat(m2.d)', '0.5');
 269 shouldBe('parseFloat(m2.e)', '-5');
 270 shouldBe('parseFloat(m2.f)', '-10');
 271
 272 debug("");
 273 debug("Test immutability of inverse");
 274 shouldBe('parseFloat(m.a)', '2');
 275 shouldBe('parseFloat(m.b)', '0');
 276 shouldBe('parseFloat(m.c)', '0');
 277 shouldBe('parseFloat(m.d)', '2');
 278 shouldBe('parseFloat(m.e)', '10');
 279 shouldBe('parseFloat(m.f)', '20');
 280
 281 debug("");
 282 debug("Test throwing exception from inverse");
 283 m = new WebKitCSSMatrix("matrix(0, 0, 0, 0, 0, 0)"); // not invertible
 284 shouldThrow('m.inverse()');
 285
 286 debug("");
 287
 288 </script>
 289 <script src="../fast/js/resources/js-test-post.js"></script>
 290
 291 <script>
 292 </script>
 293
 294 </body>
 295 </html>