| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <script src="resources/comparisons.js"></script> | 4 <script src="resources/comparisons.js"></script> |
| 5 | 5 |
| 6 <script> | 6 <script> |
| 7 var EPSILON = 1e-6; // float epsilon | 7 var EPSILON = 1e-6; // float epsilon |
| 8 | 8 |
| 9 var testParams = [ | 9 var testParams = [ |
| 10 { | 10 { |
| (...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 132 assert_equals(params.input.is2D, params.is2D); | 132 assert_equals(params.input.is2D, params.is2D); |
| 133 }, "is2D value is correct for " + params.cssText); | 133 }, "is2D value is correct for " + params.cssText); |
| 134 } | 134 } |
| 135 | 135 |
| 136 for (let params of testParams) { | 136 for (let params of testParams) { |
| 137 test(() => { | 137 test(() => { |
| 138 assert_equals(params.input.toString(), params.cssText); | 138 assert_equals(params.input.toString(), params.cssText); |
| 139 }, "toString value is correct for " + params.cssText); | 139 }, "toString value is correct for " + params.cssText); |
| 140 } | 140 } |
| 141 | 141 |
| 142 test(() => { |
| 143 let rotation = new CSSRotation(1, 2, 3, CSS.deg(10)); |
| 144 assert_equals(rotation.toString(), 'rotate3d(1, 2, 3, 10deg)'); |
| 145 rotation.is2D = true; |
| 146 assert_true(rotation.is2D); |
| 147 assert_equals(rotation.toString(), 'rotate(10deg)'); |
| 148 }, "x, y, and z components are not included in toString when is2D is true"); |
| 149 |
| 142 for (let params of testParams) { | 150 for (let params of testParams) { |
| 143 var input = params.input; | 151 let input = params.input; |
| 144 test(() => { | 152 test(() => { |
| 145 var transformValue = new CSSTransformValue([input]); | 153 var transformValue = new CSSTransformValue([input]); |
| 146 var result = transformValue.toMatrix(); | 154 var result = transformValue.toMatrix(); |
| 147 assert_equals(result.is2D, input.is2D, 'is2D'); | |
| 148 assert_matrix_approx_equals(result, params.asMatrix, EPSILON); | 155 assert_matrix_approx_equals(result, params.asMatrix, EPSILON); |
| 149 }, "toMatrix works for " + params.cssText); | 156 }, "toMatrix works for " + params.cssText + " in a CSSTransformValue"); |
| 150 } | 157 } |
| 151 | 158 |
| 159 test(() => { |
| 160 // Obtained by doing the following in a console: |
| 161 // $0.style.transform = 'rotate3d(1, 2, 3, 10rad)'; |
| 162 // getComputedStyle($0).transform |
| 163 let expected3DMatrix = new DOMMatrixReadOnly( |
| 164 [-0.707709, -0.173463, 0.684878, 0, |
| 165 0.698912, -0.313623, 0.642778, 0, |
| 166 0.103295, 0.933569, 0.343189, 0, |
| 167 0, 0, 0, 1]); |
| 168 let expected2DMatrix = new DOMMatrixReadOnly( |
| 169 [Math.cos(10), Math.sin(10), -Math.sin(10), Math.cos(10), 0, 0]); |
| 170 |
| 171 let rotation = new CSSRotation(1, 2, 3, CSS.rad(10)); |
| 172 let transformValue = new CSSTransformValue([rotation]); |
| 173 |
| 174 assert_matrix_approx_equals( |
| 175 transformValue.toMatrix(), expected3DMatrix, EPSILON); |
| 176 |
| 177 rotation.is2D = true; |
| 178 |
| 179 assert_matrix_approx_equals( |
| 180 transformValue.toMatrix(), expected2DMatrix, EPSILON); |
| 181 }, "x, y, and z attributes have no effect on toMatrix if is2D is set to true"); |
| 182 |
| 152 for (let attribute of ["x", "y", "z"]) { | 183 for (let attribute of ["x", "y", "z"]) { |
| 153 test(() => { | 184 test(() => { |
| 154 let rotation = new CSSRotation(1, 2, 3, new CSSUnitValue(10, 'deg')); | 185 let rotation = new CSSRotation(1, 2, 3, new CSSUnitValue(10, 'deg')); |
| 155 assert_equals(rotation.x, 1); | 186 assert_equals(rotation.x, 1); |
| 156 assert_equals(rotation.y, 2); | 187 assert_equals(rotation.y, 2); |
| 157 assert_equals(rotation.z, 3); | 188 assert_equals(rotation.z, 3); |
| 158 | 189 |
| 159 rotation[attribute] = 4; | 190 rotation[attribute] = 4; |
| 160 assert_equals(rotation[attribute], 4); | 191 assert_equals(rotation[attribute], 4); |
| 161 }, "Setting " + attribute + " with valid values"); | 192 }, "Setting " + attribute + " with valid values"); |
| (...skipping 11 matching lines...) Expand all Loading... |
| 173 | 204 |
| 174 test(() => { | 205 test(() => { |
| 175 let rotation = new CSSRotation(new CSSUnitValue(10, 'deg')); | 206 let rotation = new CSSRotation(new CSSUnitValue(10, 'deg')); |
| 176 | 207 |
| 177 assert_throws(new TypeError(), () => { | 208 assert_throws(new TypeError(), () => { |
| 178 rotation.angle = new CSSUnitValue(20, 'px'); | 209 rotation.angle = new CSSUnitValue(20, 'px'); |
| 179 }); | 210 }); |
| 180 }, "Setting angle with invalid value"); | 211 }, "Setting angle with invalid value"); |
| 181 | 212 |
| 182 </script> | 213 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2957603002:
[CSS Typed OM] Re-implement ToCSSValue and AsMatrix for CSSRotation (Closed)
