third_party/WebKit/LayoutTests/typedcssom/cssRotation.html - chromium/src - Git at Google

 <!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(() => {
   assert_throws(new TypeError(), () => { new CSSRotation(); });
   assert_throws(new TypeError(), () => { new CSSRotation(null); });
   // Wrong number of arguments.
   assert_throws(new TypeError(), () => {
     new CSSRotation(1, 2, new CSSUnitValue(10, 'deg'));
   });
   // Length instead of angle.
   assert_throws(new TypeError(), () => {
     new CSSRotation(new CSSUnitValue(10, 'px'));
   });
   assert_throws(new TypeError(), () => {
     new CSSRotation(1, 2, 3, new CSSUnitValue(10, 'px'));
   });
 }, "Invalid arguments to constructor should throw");

 for (let params of testParams) {
   test(() => {
     assert_equals(params.input.angle.value, params.angle);
     assert_equals(params.input.x, params.x);
     assert_equals(params.input.y, params.y);
     assert_equals(params.input.z, params.z);
   }, "x, y, z and angle values are correct for " + params.cssText);
 }

 for (let params of testParams) {
   test(() => {
     assert_equals(params.input.is2D, params.is2D);
   }, "is2D value is correct for " + params.cssText);
 }

 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");

 for (let params of testParams) {
   let input = params.input;
   test(() => {
     var transformValue = new CSSTransformValue([input]);
     var result = transformValue.toMatrix();
     assert_matrix_approx_equals(result, params.asMatrix, EPSILON);
   }, "toMatrix works for " + params.cssText + " in a CSSTransformValue");
 }

 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");

 for (let attribute of ["x", "y", "z"]) {
   test(() => {
     let rotation = new CSSRotation(1, 2, 3, new CSSUnitValue(10, 'deg'));
     assert_equals(rotation.x, 1);
     assert_equals(rotation.y, 2);
     assert_equals(rotation.z, 3);

     rotation[attribute] = 4;
     assert_equals(rotation[attribute], 4);
   }, "Setting " + attribute + " with valid values");
 }

 test(() => {
   let rotation = new CSSRotation(new CSSUnitValue(10, 'deg'));
   assert_equals(rotation.angle.value, 10);
   assert_equals(rotation.angle.unit, 'deg');

   rotation.angle = new CSSUnitValue(20, 'rad');
   assert_equals(rotation.angle.value, 20);
   assert_equals(rotation.angle.unit, 'rad');
 }, "Setting angle with valid value");

 test(() => {
   let rotation = new CSSRotation(new CSSUnitValue(10, 'deg'));

   assert_throws(new TypeError(), () => {
     rotation.angle = new CSSUnitValue(20, 'px');
   });
 }, "Setting angle with invalid value");

 </script>
	<!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(() => {
	assert_throws(new TypeError(), () => { new CSSRotation(); });
	assert_throws(new TypeError(), () => { new CSSRotation(null); });
	// Wrong number of arguments.
	assert_throws(new TypeError(), () => {
	new CSSRotation(1, 2, new CSSUnitValue(10, 'deg'));
	});
	// Length instead of angle.
	assert_throws(new TypeError(), () => {
	new CSSRotation(new CSSUnitValue(10, 'px'));
	});
	assert_throws(new TypeError(), () => {
	new CSSRotation(1, 2, 3, new CSSUnitValue(10, 'px'));
	});
	}, "Invalid arguments to constructor should throw");

	for (let params of testParams) {
	test(() => {
	assert_equals(params.input.angle.value, params.angle);
	assert_equals(params.input.x, params.x);
	assert_equals(params.input.y, params.y);
	assert_equals(params.input.z, params.z);
	}, "x, y, z and angle values are correct for " + params.cssText);
	}

	for (let params of testParams) {
	test(() => {
	assert_equals(params.input.is2D, params.is2D);
	}, "is2D value is correct for " + params.cssText);
	}

	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");

	for (let params of testParams) {
	let input = params.input;
	test(() => {
	var transformValue = new CSSTransformValue([input]);
	var result = transformValue.toMatrix();
	assert_matrix_approx_equals(result, params.asMatrix, EPSILON);
	}, "toMatrix works for " + params.cssText + " in a CSSTransformValue");
	}

	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");

	for (let attribute of ["x", "y", "z"]) {
	test(() => {
	let rotation = new CSSRotation(1, 2, 3, new CSSUnitValue(10, 'deg'));
	assert_equals(rotation.x, 1);
	assert_equals(rotation.y, 2);
	assert_equals(rotation.z, 3);

	rotation[attribute] = 4;
	assert_equals(rotation[attribute], 4);
	}, "Setting " + attribute + " with valid values");
	}

	test(() => {
	let rotation = new CSSRotation(new CSSUnitValue(10, 'deg'));
	assert_equals(rotation.angle.value, 10);
	assert_equals(rotation.angle.unit, 'deg');

	rotation.angle = new CSSUnitValue(20, 'rad');
	assert_equals(rotation.angle.value, 20);
	assert_equals(rotation.angle.unit, 'rad');
	}, "Setting angle with valid value");

	test(() => {
	let rotation = new CSSRotation(new CSSUnitValue(10, 'deg'));

	assert_throws(new TypeError(), () => {
	rotation.angle = new CSSUnitValue(20, 'px');
	});
	}, "Setting angle with invalid value");

	</script>