| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="resources/comparisons.js"></script> |
| |
| <script> |
| var EPSILON = 1e-6; // float epsilon |
| |
| var testParams = [ |
| { |
| input: new CSSRotation(new CSSUnitValue(0, 'deg')), |
| angle: 0, |
| x: 0, |
| y: 0, |
| z: 1, |
| is2D: true, |
| cssText: "rotate(0deg)", |
| asMatrix: new DOMMatrixReadOnly([1, 0, 0, 1, 0, 0]) |
| }, |
| { |
| input: new CSSRotation(new CSSUnitValue(10, 'deg')), |
| angle: 10, |
| x: 0, |
| y: 0, |
| z: 1, |
| is2D: true, |
| cssText: "rotate(10deg)", |
| asMatrix: new DOMMatrixReadOnly([0.9848077, 0.1736481, -0.1736481, 0.9848077, 0, 0]) |
| }, |
| { |
| input: new CSSRotation(new CSSUnitValue(-21, 'deg')), |
| angle: -21, |
| x: 0, |
| y: 0, |
| z: 1, |
| is2D: true, |
| cssText: "rotate(-21deg)", |
| asMatrix: new DOMMatrixReadOnly([0.9335804, -0.3583679, 0.3583679, 0.9335804, 0, 0]) |
| }, |
| { |
| input: new CSSRotation(new CSSUnitValue(3.2, 'deg')), |
| angle: 3.2, |
| x: 0, |
| y: 0, |
| z: 1, |
| is2D: true, |
| cssText: "rotate(3.2deg)", |
| asMatrix: new DOMMatrixReadOnly([0.9984407, 0.0558215, -0.0558215, 0.9984407, 0, 0]) |
| }, |
| { |
| input: new CSSRotation(0, 0, 1, new CSSUnitValue(90, 'deg')), |
| angle: 90, |
| x: 0, |
| y: 0, |
| z: 1, |
| is2D: false, |
| cssText: "rotate3d(0, 0, 1, 90deg)", |
| asMatrix: new DOMMatrixReadOnly([0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]) |
| }, |
| { |
| input: new CSSRotation(2.7, -3, 4.4, new CSSUnitValue(0, 'deg')), |
| angle: 0, |
| x: 2.7, |
| y: -3, |
| z: 4.4, |
| is2D: false, |
| cssText: "rotate3d(2.7, -3, 4.4, 0deg)", |
| asMatrix: new DOMMatrixReadOnly([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]) |
| }, |
| { |
| input: new CSSRotation(2, 3, 4, new CSSUnitValue(10, 'deg')), |
| angle: 10, |
| x: 2, |
| y: 3, |
| z: 4, |
| is2D: false, |
| cssText: "rotate3d(2, 3, 4, 10deg)", |
| asMatrix: new DOMMatrixReadOnly([0.9869032, 0.1321258, -0.0925460, 0, -0.1258394, |
| 0.9895225, 0.0707777, 0, 0.1009279, -0.0582048, 0.9931896, 0, 0, 0, 0, 1]) |
| }, |
| { |
| input: new CSSRotation(2, 3.7, -4, new CSSUnitValue(-1.2, 'deg')), |
| angle: -1.2, |
| x: 2, |
| y: 3.7, |
| z: -4, |
| is2D: false, |
| cssText: "rotate3d(2, 3.7, -4, -1.2deg)", |
| asMatrix: new DOMMatrixReadOnly([0.9998067, 0.01448049, 0.0132978, 0, -0.0143841, |
| 0.9998698, -0.0073125, 0, -0.0134019, 0.0071198, 0.9998848, 0, 0, 0, 0, 1]) |
| }, |
| { |
| input: new CSSRotation(1, 0, 0, new CSSUnitValue(0.5, 'turn')), |
| angle: 0.5, |
| x: 1, |
| y: 0, |
| z: 0, |
| is2D: false, |
| cssText: "rotate3d(1, 0, 0, 0.5turn)", |
| asMatrix: new DOMMatrixReadOnly([1, 0, 0, 0, 0, -1, 1.2246467991473532e-16, 0, 0, |
| -1.2246467991473532e-16, -1, 0, 0, 0, 0, 1]) |
| } |
| ]; |
| |
| test(() => { |
| // Wrong number of arguments. |
| assert_throws(new TypeError(), () => { new CSSRotation(); }); |
| assert_throws(new TypeError(), () => { new CSSRotation(null); }); |
| assert_throws(new TypeError(), () => { |
| new CSSRotation(1, 2, new CSSUnitValue(10, 'deg')); |
| }); |
| }, "Invalid arguments to constructor should throw"); |
| |
| for (let params of testParams) { |
| test(() => { |
| assert_equals(params.input.toString(), params.cssText); |
| }, "toString value is correct for " + params.cssText); |
| } |
| |
| test(() => { |
| let rotation = new CSSRotation(1, 2, 3, CSS.deg(10)); |
| assert_equals(rotation.toString(), 'rotate3d(1, 2, 3, 10deg)'); |
| rotation.is2D = true; |
| assert_true(rotation.is2D); |
| assert_equals(rotation.toString(), 'rotate(10deg)'); |
| }, "x, y, and z components are not included in toString when is2D is true"); |
| |
| test(() => { |
| // Obtained by doing the following in a console: |
| // $0.style.transform = 'rotate3d(1, 2, 3, 10rad)'; |
| // getComputedStyle($0).transform |
| let expected3DMatrix = new DOMMatrixReadOnly( |
| [-0.707709, -0.173463, 0.684878, 0, |
| 0.698912, -0.313623, 0.642778, 0, |
| 0.103295, 0.933569, 0.343189, 0, |
| 0, 0, 0, 1]); |
| let expected2DMatrix = new DOMMatrixReadOnly( |
| [Math.cos(10), Math.sin(10), -Math.sin(10), Math.cos(10), 0, 0]); |
| |
| let rotation = new CSSRotation(1, 2, 3, CSS.rad(10)); |
| let transformValue = new CSSTransformValue([rotation]); |
| |
| assert_matrix_approx_equals( |
| transformValue.toMatrix(), expected3DMatrix, EPSILON); |
| |
| rotation.is2D = true; |
| |
| assert_matrix_approx_equals( |
| transformValue.toMatrix(), expected2DMatrix, EPSILON); |
| }, "x, y, and z attributes have no effect on toMatrix if is2D is set to true"); |
| |
| </script> |
