DOMMatrix-001.html (8588B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Geometry Interfaces: DOMMatrix and DOMMatrixReadOnly constructors</title> 5 <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com" /> 6 <link rel="help" href="https://drafts.fxtf.org/geometry/#DOMMatrix"> 7 <link rel="help" href="https://drafts.fxtf.org/geometry/#dommatrix-constructors"> 8 <link rel="help" href="https://drafts.fxtf.org/geometry/#dom-dommatrix-dommatrix"> 9 <script src="support/dommatrix-test-util.js"></script> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 </head> 13 <body> 14 <div id="log"></div> 15 <script> 16 var initial = { 17 m11: 1, m21: 0, m31: 0, m41: 0, 18 m12: 0, m22: 1, m32: 0, m42: 0, 19 m13: 0, m23: 0, m33: 1, m43: 0, 20 m14: 0, m24: 0, m34: 0, m44: 1, 21 is2D: true, 22 isIdentity: true 23 }; 24 var scaleTranslate2D = { 25 m11: 2, m21: 0, m31: 0, m41: 10, 26 m12: 0, m22: 2, m32: 0, m42: 10, 27 m13: 0, m23: 0, m33: 1, m43: 0, 28 m14: 0, m24: 0, m34: 0, m44: 1, 29 is2D: true, 30 isIdentity: false 31 }; 32 ["DOMMatrix", "DOMMatrixReadOnly"].forEach(function(constr) { 33 test(function() { 34 checkMatrix(new self[constr](), initial); 35 }, `new ${constr}()`); 36 37 test(function() { 38 checkMatrix(new self[constr](undefined), initial); 39 }, `new ${constr}(undefined)`); 40 41 test(function() { 42 checkMatrix(new self[constr](new self[constr]()), initial); 43 }, `new ${constr}(new ${constr}())`); 44 45 ['none', 46 ' none', 47 'none ', 48 'NONE', 49 'none/**/', 50 '/**/none', 51 '', 52 ].forEach(function(string) { 53 test(function() { 54 checkMatrix(new self[constr](string), initial); 55 }, `new ${constr}(${format_value(string)})`); 56 }); 57 58 test(function() { 59 var float32Array = new Float32Array([ 60 2.0, 0.0, 0.0, 0.0, 61 0.0, 2.0, 0.0, 0.0, 62 0.0, 0.0, 1.0, 0.0, 63 10.0, 10.0, 0.0, 1.0]); 64 checkMatrix(new self[constr](float32Array), matrix3D(scaleTranslate2D)); 65 }, `new ${constr}(float32Array) 16 elements`); 66 67 test(function() { 68 var float32Array = new Float32Array([2.0, 0.0, 0.0, 2.0, 10.0, 10.0]); 69 checkMatrix(new self[constr](float32Array), scaleTranslate2D); 70 }, `new ${constr}(float32Array) 6 elements`); 71 72 test(function() { 73 var float64Array = new Float64Array([ 74 2.0, 0.0, 0.0, 0.0, 75 0.0, 2.0, 0.0, 0.0, 76 0.0, 0.0, 1.0, 0.0, 77 10.0, 10.0, 0.0, 1.0]); 78 checkMatrix(new self[constr](float64Array), matrix3D(scaleTranslate2D)); 79 }, `new ${constr}(float64Array) 16 elements`); 80 81 test(function() { 82 var float64Array = new Float64Array([2.0, 0.0, 0.0, 2.0, 10.0, 10.0]); 83 checkMatrix(new self[constr](float64Array), scaleTranslate2D); 84 }, `new ${constr}((float64Array) 6 elements`); 85 86 [ 87 [2.0, 0.0, 0.0, 0.0, 88 0.0, 2.0, 0.0, 0.0, 89 0.0, 0.0, 1.0, 0.0, 90 10.0, 10.0, 0.0, 1.0], 91 [2.0, 0.0, 0.0, 2.0, 10.0, 10.0], 92 ].forEach(function(sequence) { 93 test(function() { 94 var expected = sequence.length == 6 ? scaleTranslate2D : matrix3D(scaleTranslate2D); 95 checkMatrix(new self[constr](sequence), expected); 96 }, `new ${constr}(sequence) ${sequence.length} elements`); 97 }); 98 99 { 100 const epsilon = 0.0000000005; 101 ['scale(2) translateX(5px) translateY(5px)', 102 'scale(2, 2) translateX(5px) translateY(5px)', 103 'scale(2)translateX(5px)translateY(5px)', 104 'scale(2) translateX(calc(2 * 2.5px)) translateY(5px)', 105 'scale(2) translateX(5px) translateY(5px) rotate(5deg) rotate(-5deg)', 106 ].forEach(function(string) { 107 test(function() { 108 checkMatrix(new self[constr](string), scaleTranslate2D, { epsilon }); 109 }, `new ${constr}(${format_value(string)})`); 110 }); 111 } 112 113 ['translateX (5px)', 114 'scale(2 2) translateX(5) translateY(5)', 115 'scale(2, 2), translateX(5) ,translateY(5)', 116 'scale(sign(1em))', 117 'scale(sibling-index())', 118 'translateX(5em)', 119 'translateX(5ex)', 120 'translateX(5ch)', 121 'translateX(5rem)', 122 'translateX(5cqw)', 123 'translateX(5cqh)', 124 'translateX(5cqb)', 125 'translateX(5cqi)', 126 'translateX(5cqmin)', 127 'translateX(5cqmax)', 128 'translateX(5vw)', 129 'translateX(5vh)', 130 'translateX(5vb)', 131 'translateX(5vi)', 132 'translateX(5vmin)', 133 'translateX(5vmax)', 134 'translateX(5%)', 135 'translateX(calc(10px * sign(1em - 10px)))', 136 'translateX(calc(10px * sibling-index()))', 137 'rotate(5)', 138 'rotate(5, 5, 5)', 139 'rotate(5, 5px, 5px)', 140 'rotate(5deg, 5px, 5px)', 141 'rotate(calc(5deg * sign(1em - 10px)))', 142 'rotate(calc(5deg * sibling-index()))', 143 ' ', 144 '/**/', 145 '\0', 146 ';', 147 'none;', 148 'null', 149 null, // is converted to 'null' by IDL 150 'undefined', 151 'inherit', 152 'initial', 153 'unset', 154 ].forEach(function(string) { 155 test(function() { 156 assert_throws_dom('SyntaxError', function() { new self[constr](string); }); 157 }, `new ${constr}(${format_value(string)})`); 158 }); 159 160 test(function() { 161 var sequence = [ 162 2.0, 1.0, 0.0, 0.0, 163 1.0, 2.0, 0.0, 0.0, 164 0.0, 0.0, 1.0, 0.0, 165 10.0, 10.0, 0.0, 1.0]; 166 checkMatrix(new self[constr](sequence), { 167 m11: 2, m21: 1, m31: 0, m41: 10, 168 m12: 1, m22: 2, m32: 0, m42: 10, 169 m13: 0, m23: 0, m33: 1, m43: 0, 170 m14: 0, m24: 0, m34: 0, m44: 1, 171 is2D: false, 172 isIdentity: false 173 }); 174 }, `new ${constr}(sequence)`); 175 176 test(function() { 177 var matrix = new self[constr]([ 178 2.0, 1.0, 0.0, 0.0, 179 1.0, 2.0, 0.0, 0.0, 180 0.0, 0.0, 1.0, 0.0, 181 10.0, 10.0, 0.0, 1.0]); 182 checkMatrix(new self[constr](matrix), { 183 m11: 2, m21: 1, m31: 0, m41: 10, 184 m12: 1, m22: 2, m32: 0, m42: 10, 185 m13: 0, m23: 0, m33: 1, m43: 0, 186 m14: 0, m24: 0, m34: 0, m44: 1, 187 is2D: false, 188 isIdentity: false 189 }); 190 }, `new ${constr}(matrix)`); 191 192 ['scale(2, 2), translateX(5px) translateY(5px)', 193 ].forEach(function(string) { 194 test(function() { 195 assert_throws_dom("SyntaxError", function() { new self[constr](string); }); 196 }, `new ${constr}(${format_value(string)})`); 197 }); 198 199 [ 200 [2.0, 0.0, 0.0, 0.0, 201 0.0, 2.0, 0.0, 0.0, 202 0.0, 0.0, 1.0, 0.0, 203 10.0, 10.0, 0.0, 2.0, 0.0], // 17 elements 204 [2.0, 0.0, 0.0, 0.0, 205 0.0, 2.0, 0.0, 0.0, 206 0.0, 0.0, 1.0, 0.0, 207 10.0, 10.0, 0.0], // 15 elements 208 [2.0, 0.0, 0.0, 2.0, 10.0], // 5 elements 209 [], // 0 elements 210 ].forEach(function(sequence) { 211 test(function() { 212 assert_throws_js(TypeError, function() { new self[constr](sequence); }); 213 }, `new ${constr}(sequence) ${sequence.length} elements`); 214 }); 215 }); 216 </script> 217 </body> 218 </html>