test_WebKitCSSMatrix.html (12656B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Test for WebKitCSSMatrix</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <div id="log"></div> 7 <script> 8 function RoughCompareMatrix(dm1, dm2) 9 { 10 var m1 = dm1.toFloat32Array(); 11 var m2 = dm2.toFloat32Array(); 12 13 if (m1.length != m2.length) { 14 return false; 15 } 16 17 const tolerance = 1 / 65535; 18 for (var x = 0; x < m1.length; x++) { 19 if (Math.abs(m1[x] - m2[x]) > tolerance) { 20 return false; 21 } 22 } 23 24 return true; 25 } 26 27 function CompareMatrix(dm1, dm2) 28 { 29 var m1 = dm1.toFloat32Array(); 30 var m2 = dm2.toFloat32Array(); 31 32 if (m1.length != m2.length) { 33 return false; 34 } 35 36 for (var x = 0; x < m1.length; x++) { 37 if (m1[x] != m2[x] && !(Number.isNaN(m1[x]) && Number.isNaN(m2[x]))) { 38 return false; 39 } 40 } 41 42 return true; 43 } 44 45 test(function() { 46 var m = new WebKitCSSMatrix(); 47 48 assert_equals(m.m11, 1, "m11 should be 1"); 49 assert_equals(m.m22, 1, "m22 should be 1"); 50 assert_equals(m.m33, 1, "m33 should be 1"); 51 assert_equals(m.m44, 1, "m44 should be 1"); 52 assert_equals(m.m12, 0, "m12 should be 0"); 53 assert_equals(m.m13, 0, "m13 should be 0"); 54 assert_equals(m.m14, 0, "m14 should be 0"); 55 assert_equals(m.m21, 0, "m21 should be 0"); 56 assert_equals(m.m23, 0, "m23 should be 0"); 57 assert_equals(m.m24, 0, "m24 should be 0"); 58 assert_equals(m.m31, 0, "m31 should be 0"); 59 assert_equals(m.m32, 0, "m32 should be 0"); 60 assert_equals(m.m34, 0, "m34 should be 0"); 61 assert_equals(m.m41, 0, "m41 should be 0"); 62 assert_equals(m.m42, 0, "m42 should be 0"); 63 assert_equals(m.m43, 0, "m43 should be 0"); 64 }, "Test constructor with no arguments."); 65 66 test(function() { 67 var m = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 68 69 assert_equals(m.m11, 1, "m11 should be 1"); 70 assert_equals(m.m12, 2, "m12 should be 2"); 71 assert_equals(m.m21, 3, "m21 should be 3"); 72 assert_equals(m.m22, 4, "m22 should be 4"); 73 assert_equals(m.m41, 5, "m41 should be 5"); 74 assert_equals(m.m42, 6, "m42 should be 6"); 75 }, "Test constructor with transform list."); 76 77 test(function() { 78 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 79 var m2 = new WebKitCSSMatrix(m1); 80 81 assert_true(RoughCompareMatrix(m1, m2), "Matrix should be equal."); 82 }, "Test constructor with other matrix."); 83 84 test(function() { 85 var m = new WebKitCSSMatrix(); 86 var mr = m.setMatrixValue("matrix(1,2,3,4,5,6)"); 87 88 assert_equals(m.m11, 1, "m11 should be 1"); 89 assert_equals(m.m12, 2, "m12 should be 2"); 90 assert_equals(m.m21, 3, "m21 should be 3"); 91 assert_equals(m.m22, 4, "m22 should be 4"); 92 assert_equals(m.m41, 5, "m41 should be 5"); 93 assert_equals(m.m42, 6, "m42 should be 6"); 94 95 assert_equals(m, mr, "Return value of setMatrixValue should be the same matrix."); 96 }, "Test setMatrixValue."); 97 98 test(function() { 99 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 100 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 101 var m3 = new WebKitCSSMatrix("matrix(6,5,4,3,2,1)"); 102 var m4 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 103 104 var m1r = m1.multiply(m3); 105 var m2r = m2.multiply(m3); 106 107 assert_true(RoughCompareMatrix(m1r, m2r), "multiply should return the same result as DOMMatrixReadOnly."); 108 assert_true(CompareMatrix(m1, m4), "Multiply should not mutate original matrix."); 109 }, "Test multiply."); 110 111 test(function() { 112 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 113 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 114 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 115 116 var m1r = m1.inverse(); 117 var m2r = m2.inverse(); 118 119 assert_true(RoughCompareMatrix(m1r, m2r), "inverse should return the same result as DOMMatrixReadOnly."); 120 assert_true(CompareMatrix(m1, m3), "inverse should not mutate original matrix."); 121 }, "Test inverse."); 122 123 test(function() { 124 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 125 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 126 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 127 128 var m1r = m1.translate(2, 3, 4); 129 var m2r = m2.translate(2, 3, 4); 130 131 assert_true(RoughCompareMatrix(m1r, m2r), "translate should return the same result as DOMMatrixReadOnly."); 132 assert_true(CompareMatrix(m1, m3), "translate should not mutate original matrix."); 133 }, "Test translate."); 134 135 test(function() { 136 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 137 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 138 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 139 140 var m1r = m1.scale(2); 141 var m2r = m2.scale(2, 2, 1); 142 143 assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly."); 144 assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix."); 145 }, "Test scale with 1 argument."); 146 147 test(function() { 148 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 149 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 150 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 151 152 var m1r = m1.scale(2, 3); 153 var m2r = m2.scale(2, 3, 1); 154 155 assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly."); 156 assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix."); 157 }, "Test scale with 2 arguments."); 158 159 test(function() { 160 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 161 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 162 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 163 164 var m1r = m1.scale(2, 3, 4); 165 var m2r = m2.scale(2, 3, 4); 166 167 assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly."); 168 assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix."); 169 }, "Test scale with 3 arguments."); 170 171 test(function() { 172 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 173 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 174 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 175 176 var m1r = m1.scale(undefined, 3, 4); 177 var m2r = m2.scale(1, 3, 4); 178 179 assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly."); 180 assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix."); 181 }, "Test scale with undefined scaleX argument."); 182 183 test(function() { 184 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 185 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 186 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 187 188 var m1r = m1.scale(2, undefined, 4); 189 var m2r = m2.scale(2, 2, 4); 190 191 assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly."); 192 assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix."); 193 }, "Test scale with undefined scaleY argument."); 194 195 test(function() { 196 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 197 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 198 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 199 200 var m1r = m1.scale(2, 3, undefined); 201 var m2r = m2.scale(2, 3, 1); 202 203 assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly."); 204 assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix."); 205 }, "Test scale with undefined scaleZ argument."); 206 207 test(function() { 208 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 209 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 210 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 211 212 var m1r = m1.rotate(2); 213 var m2r = m2.rotateAxisAngle(0, 0, 1, 2); // Rotate around unit vector on z-axis. 214 215 assert_true(RoughCompareMatrix(m1r, m2r)); 216 assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix."); 217 }, "Test rotate with 1 argument."); 218 219 test(function() { 220 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 221 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 222 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 223 224 var m1r = m1.rotate(2, 3); 225 var m2r = m2.rotateAxisAngle(0, 1, 0, 3); // Rotate around unit vector on x-axis. 226 m2r = m2r.rotateAxisAngle(1, 0, 0, 2); // Rotate around unit vector on y-axis. 227 228 assert_true(RoughCompareMatrix(m1r, m2r)); 229 assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix."); 230 }, "Test rotate with 2 arguments."); 231 232 test(function() { 233 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 234 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 235 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 236 237 var m1r = m1.rotate(2, 3, 4); 238 var m2r = m2.rotateAxisAngle(0, 0, 1, 4); // Rotate around unit vector on z-axis. 239 m2r = m2r.rotateAxisAngle(0, 1, 0, 3); // Rotate around unit vector on y-axis. 240 m2r = m2r.rotateAxisAngle(1, 0, 0, 2); // Rotate around unit vector on x-axis. 241 242 assert_true(RoughCompareMatrix(m1r, m2r)); 243 assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix."); 244 }, "Test rotate with 3 arguments."); 245 246 test(function() { 247 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 248 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 249 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 250 251 var m1r = m1.rotate(2, undefined, undefined); 252 var m2r = m2.rotateAxisAngle(0, 0, 1, 2); // Rotate around unit vector on z-axis. 253 254 assert_true(RoughCompareMatrix(m1r, m2r)); 255 assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix."); 256 }, "Test rotate with rotY and rotZ as undefined."); 257 258 test(function() { 259 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 260 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 261 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 262 263 var m1r = m1.rotate(undefined, 3, 4); 264 var m2r = m2.rotateAxisAngle(0, 0, 1, 4); // Rotate around unit vector on z-axis. 265 m2r = m2r.rotateAxisAngle(0, 1, 0, 3); // Rotate around unit vector on y-axis. 266 267 assert_true(RoughCompareMatrix(m1r, m2r)); 268 assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix."); 269 }, "Test rotate with rotX as undefined."); 270 271 test(function() { 272 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 273 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 274 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 275 276 var m1r = m1.rotateAxisAngle(2, 3, 4, 5); 277 var m2r = m2.rotateAxisAngle(2, 3, 4, 5); 278 279 assert_true(RoughCompareMatrix(m1r, m2r), "rotateAxisAngle should return the same result as DOMMatrixReadOnly."); 280 assert_true(CompareMatrix(m1, m3), "rotateAxisAngle should not mutate original matrix."); 281 }, "Test rotateAxisAngle."); 282 283 test(function() { 284 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 285 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 286 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 287 288 var m1r = m1.skewX(2); 289 var m2r = m2.skewX(2); 290 291 assert_true(RoughCompareMatrix(m1r, m2r), "skewX should return the same result as DOMMatrixReadOnly."); 292 assert_true(CompareMatrix(m1, m3), "skewX should not mutate original matrix."); 293 }, "Test skewX."); 294 295 test(function() { 296 var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 297 var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)"); 298 var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)"); 299 300 var m1r = m1.skewY(2); 301 var m2r = m2.skewY(2); 302 303 assert_true(RoughCompareMatrix(m1r, m2r), "skewY should return the same result as DOMMatrixReadOnly."); 304 assert_true(CompareMatrix(m1, m3), "skewY should not mutate original matrix."); 305 }, "Test skewY."); 306 307 test(function() { 308 var m1 = new WebKitCSSMatrix("matrix(1,0,0,0,0,0)"); 309 m1 = m1.inverse(); 310 311 var m2 = new DOMMatrix(new Array(16).fill(NaN)); 312 assert_true(CompareMatrix(m1, m2), "Inverting a non-invertible matrix should set all attributes to NaN.") 313 }, "Test that inverting an invertible matrix throws."); 314 315 test(function() { 316 var m1 = new WebKitCSSMatrix("translate(10px, 10px)"); 317 var m2 = new DOMMatrix(); 318 m2.translateSelf(10, 10); 319 assert_true(RoughCompareMatrix(m1, m2), "translate in constructor should result in translated matrix"); 320 321 assert_throws("SyntaxError", function() { new WebKitCSSMatrix("translate(10em, 10em)"); }, "Transform function may not contain relative units.") 322 assert_throws("SyntaxError", function() { new WebKitCSSMatrix("translate(10%, 10%)"); }, "Transform function may not contain percentage.") 323 }, "Test constructor with translate"); 324 325 test(function() { 326 assert_throws("SyntaxError", function() { new WebKitCSSMatrix("initial"); }, "initial is not a valid constructor argument.") 327 assert_throws("SyntaxError", function() { new WebKitCSSMatrix("inherit"); }, "inherit is not a valid constructor arugment.") 328 }, "Test invalid constructor arguments."); 329 330 test(function() { 331 var m1 = new WebKitCSSMatrix(); 332 m1 = m1.rotateAxisAngle(0, 0, 1, 45); 333 334 var m2 = new WebKitCSSMatrix(); 335 m2 = m2.rotateAxisAngle(0, 0, 3, 45); 336 337 assert_true(RoughCompareMatrix(m1, m2), "rotateAxisAngle should normalize vector to unit vector."); 338 }, "Test normalization of vector for rotateAxisAngle"); 339 </script>