third_party/blink/web_tests/external/wpt/css/geometry/DOMMatrix-003.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <title>Geometry Interfaces: Test DOMMatrix non-mutating methods</title>
     <link href="mailto:peter.hall@algomi.com" rel="author" title="Peter Hall">
     <link rel="help" href="https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
 </head>
 <body>
     <p>Test DOMMatrix non-mutating methods</p>
     <div id="log"></div>
     <script>
         var epsilon = 0.0000000005;

         function initialMatrix(){
           return {
               m11:1,   m12:-0.5, m13: 0.5,  m14:0,
               m21:0.5, m22:2,    m23: -0.5, m24:0,
               m31:0,   m32:0,    m33: 1,    m34:0,
               m41:10,  m42:20,   m43: 10,   m44:1,
               is2D: false
             };
         }

         function initialDOMMatrix() {
           return DOMMatrixReadOnly.fromMatrix(initialMatrix())
         }

         function identity() {
           return new DOMMatrix(
             [1, 0, 0, 0,
              0, 1, 0 ,0,
              0, 0, 1, 0,
              0, 0, 0, 1]);
         }

         function update(matrix, f) {
           f(matrix);
           return matrix;
         }

         function deg2rad(degrees) {
           return degrees * Math.PI / 180;
         }

         function getRotationMatrix(x, y, z, alpha_in_degrees) {
           // Vector normalizing
           var nx = x;
           var ny = y;
           var nz = z;
           var length = Math.sqrt(x * x + y * y + z * z);
           if (length) {
             nx = x / length;
             ny = y / length;
             nz = z / length;
           }

           // The 3D rotation matrix is described in CSS Transforms with alpha.
           // Please see: https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined
           var alpha_in_radians = deg2rad(alpha_in_degrees / 2);
           var sc = Math.sin(alpha_in_radians) * Math.cos(alpha_in_radians);
           var sq = Math.sin(alpha_in_radians) * Math.sin(alpha_in_radians);

           var m11 = 1 - 2 * (ny * ny + nz * nz) * sq;
           var m12 = 2 * (nx * ny * sq + nz * sc);
           var m13 = 2 * (nx * nz * sq - ny * sc);
           var m14 = 0;
           var m21 = 2 * (nx * ny * sq - nz * sc);
           var m22 = 1 - 2 * (nx * nx + nz * nz) * sq;
           var m23 = 2 * (ny * nz * sq + nx * sc);
           var m24 = 0;
           var m31 = 2 * (nx * nz * sq + ny * sc);
           var m32 = 2 * (ny * nz * sq - nx * sc);
           var m33 = 1 - 2 * (nx * nx + ny * ny) * sq;
           var m34 = 0;
           var m41 = 0;
           var m42 = 0;
           var m43 = 0;
           var m44 = 1;

           return new DOMMatrix([
             m11, m12, m13, m14,
             m21, m22, m23, m24,
             m31, m32, m33, m34,
             m41, m42, m43, m44]);
         }

         function getMatrixTransform(matrix, point) {
             var x = point.x * matrix.m11 + point.y * matrix.m21 + point.z * matrix.m31 + point.w * matrix.m41;
             var y = point.x * matrix.m12 + point.y * matrix.m22 + point.z * matrix.m32 + point.w * matrix.m42;
             var w = point.x * matrix.m13 + point.y * matrix.m23 + point.z * matrix.m33 + point.w * matrix.m43;
             var z = point.x * matrix.m14 + point.y * matrix.m24 + point.z * matrix.m34 + point.w * matrix.m44;
             return new DOMPoint(x, y, w, z)
         }

         test(function() {
           var tx = 1;
           var ty = 5;
           var tz = 3;
           var result = initialDOMMatrix().translate(tx, ty, tz);
           var expected = update(initialMatrix(), function(m) {
             m.m41 += tx * m.m11 + ty * m.m21 + tz * m.m31;
             m.m42 += tx * m.m12 + ty * m.m22 + tz * m.m32;
             m.m43 += tx * m.m13 + ty * m.m23 + tz * m.m33;
             m.m44 += tx * m.m14 + ty * m.m24 + tz * m.m34;
           });
           checkDOMMatrix(result, expected);
         },"test translate()");

         test(function() {
           var sx = 2;
           var sy = 5;
           var sz = 3;
           var result = initialDOMMatrix().scale(sx, sy, sz);
           var expected = update(initialMatrix(), function(m) {
             m.m11 *= sx;
             m.m12 *= sx;
             m.m13 *= sx;
             m.m14 *= sx;
             m.m21 *= sy;
             m.m22 *= sy;
             m.m23 *= sy;
             m.m24 *= sy;
             m.m31 *= sz;
             m.m32 *= sz;
             m.m33 *= sz;
             m.m34 *= sz;
           });
           checkDOMMatrix(result, expected);
         },"test scale() without offsets");

         test(function() {
           var result = initialDOMMatrix().scale(2, 5, 3, 11, 7, 13);
           var expected = initialDOMMatrix()
                           .translate(11, 7, 13)
                           .scale(2, 5, 3)
                           .translate(-11, -7, -13);
           checkDOMMatrix(result, expected);
         },"test scale() with offsets");

         test(function() {
           var result = initialDOMMatrix().scaleNonUniform();
           var expected = initialDOMMatrix()
                           .scale(1, 1, 1, 0, 0, 0);
           checkDOMMatrix(result, expected);
         },"test scaleNonUniform()");

         test(function() {
           var result = initialDOMMatrix().scaleNonUniform(6);
           var expected = initialDOMMatrix()
                           .scale(6, 1, 1, 0, 0, 0);
           checkDOMMatrix(result, expected);
         },"test scaleNonUniform() with sx");

         test(function() {
           var result = initialDOMMatrix().scaleNonUniform(5, 7);
           var expected = initialDOMMatrix()
                           .scale(5, 7, 1, 0, 0, 0);
           checkDOMMatrix(result, expected);
         },"test scaleNonUniform() with sx, sy");

         test(function() {
           var result = initialDOMMatrix().scale3d(7, 5, 2, 3);
           var expected = initialDOMMatrix()
                           .translate(5, 2, 3)
                           .scale(7, 7, 7)
                           .translate(-5, -2, -3);
           checkDOMMatrix(result, expected);
         },"test scale3d()");

         test(function() {
           var result = initialDOMMatrix().rotate(-90);
           var expected = initialDOMMatrix().multiply(getRotationMatrix(0, 0, 1, -90));
           checkDOMMatrix(result, expected);
         },"test rotate() 2d");

         test(function() {
           var result = initialDOMMatrix().rotate(180, 180, 90);
           var expected = initialDOMMatrix().rotate(0,0,-90);
           checkDOMMatrix(result, expected);
         },"test rotate()");

         test(function() {
           var result = initialDOMMatrix().rotateFromVector(1, 1);
           var expected = initialDOMMatrix().rotate(45);
           checkDOMMatrix(result, expected);
         },"test rotateFromVector()");

         test(function() {
           var result = initialDOMMatrix().rotateAxisAngle(3, 3, 3, 120);
           var expected = initialDOMMatrix().multiply(getRotationMatrix(3, 3, 3, 120));
           checkDOMMatrix(result, expected);
         },"test rotateAxisAngle() ");

         test(function() {
           var angleDeg = 75;
           var result = initialDOMMatrix().skewX(angleDeg);
           var tangent = Math.tan(angleDeg * Math.PI/180);
           var skew = new DOMMatrix([
                 1,       0, 0, 0,
                 tangent, 1, 0, 0,
                 0,       0, 1, 0,
                 0,       0, 0, 1])
           var expected = initialDOMMatrix().multiply(skew);
           checkDOMMatrix(result, expected);
         },"test skewX()");

         test(function() {
           var angleDeg = 18;
           var result = initialDOMMatrix().skewY(angleDeg);
           var tangent = Math.tan(angleDeg * Math.PI/180);
           var skew = new DOMMatrix([
                 1, tangent, 0, 0,
                 0, 1,       0, 0,
                 0, 0,       1, 0,
                 0, 0,       0, 1])
           var expected = initialDOMMatrix().multiply(skew);
           checkDOMMatrix(result, expected);
         },"test skewY()");

         test(function() {
           var result = initialDOMMatrix().multiply(initialDOMMatrix().inverse());
           checkDOMMatrix(result, identity());
         },"test multiply with inverse is identity");

         test(function() {
           var result = initialDOMMatrix().flipX();
           var expected = initialDOMMatrix().multiply(new DOMMatrix([-1, 0, 0, 1, 0, 0]));
           checkDOMMatrix(result, expected);
         },"test flipX()");

         test(function() {
           var result = initialDOMMatrix().flipY();
           var expected = initialDOMMatrix().multiply(new DOMMatrix([1, 0, 0, -1, 0, 0]));
           checkDOMMatrix(result, expected);
         },"test flipY()");

         test(function() {
           var point = new DOMPointReadOnly(1, 2, 3, 4);
           var matrix = new DOMMatrix([1, 2, 3, 4, 5, 6]);
           var result = matrix.transformPoint(point);
           var expected = getMatrixTransform(matrix, point);
           checkDOMPoint(result, expected);
         },"test transformPoint() - 2d matrix");

         test(function() {
           var point = new DOMPointReadOnly(1, 2, 3, 4);
           var matrix = new DOMMatrix([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
           var result = matrix.transformPoint(point);
           var expected = getMatrixTransform(matrix, point);
           checkDOMPoint(result, expected);
         },"test transformPoint() - 3d matrix");

         function checkDOMMatrix(m, exp) {
           assert_approx_equals(m.m11, exp.m11, epsilon, "Expected value for m11 is " + exp.m11);
           assert_approx_equals(m.m12, exp.m12, epsilon, "Expected value for m12 is " + exp.m12);
           assert_approx_equals(m.m13, exp.m13, epsilon, "Expected value for m13 is " + exp.m13);
           assert_approx_equals(m.m14, exp.m14, epsilon, "Expected value for m14 is " + exp.m14);
           assert_approx_equals(m.m21, exp.m21, epsilon, "Expected value for m21 is " + exp.m21);
           assert_approx_equals(m.m22, exp.m22, epsilon, "Expected value for m22 is " + exp.m22);
           assert_approx_equals(m.m23, exp.m23, epsilon, "Expected value for m23 is " + exp.m23);
           assert_approx_equals(m.m24, exp.m24, epsilon, "Expected value for m24 is " + exp.m24);
           assert_approx_equals(m.m31, exp.m31, epsilon, "Expected value for m31 is " + exp.m31);
           assert_approx_equals(m.m32, exp.m32, epsilon, "Expected value for m32 is " + exp.m32);
           assert_approx_equals(m.m33, exp.m33, epsilon, "Expected value for m33 is " + exp.m33);
           assert_approx_equals(m.m34, exp.m34, epsilon, "Expected value for m34 is " + exp.m34);
           assert_approx_equals(m.m41, exp.m41, epsilon, "Expected value for m41 is " + exp.m41);
           assert_approx_equals(m.m42, exp.m42, epsilon, "Expected value for m42 is " + exp.m42);
           assert_approx_equals(m.m43, exp.m43, epsilon, "Expected value for m43 is " + exp.m43);
           assert_approx_equals(m.m44, exp.m44, epsilon, "Expected value for m44 is " + exp.m44);
           assert_equals(m.is2D, exp.is2D, "Expected value for is2D is " + exp.is2D);
         }

         function checkDOMPoint(p, exp) {
             assert_equals(p.x, exp.x, "x is not matched");
             assert_equals(p.y, exp.y, "y is not matched");
             assert_equals(p.z, exp.z, "z is not matched");
             assert_equals(p.w, exp.w, "w is not matched");
         }

     </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Geometry Interfaces: Test DOMMatrix non-mutating methods</title>
	<link href="mailto:peter.hall@algomi.com" rel="author" title="Peter Hall">
	<link rel="help" href="https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	</head>
	<body>
	<p>Test DOMMatrix non-mutating methods</p>
	<div id="log"></div>
	<script>
	var epsilon = 0.0000000005;

	function initialMatrix(){
	return {
	m11:1, m12:-0.5, m13: 0.5, m14:0,
	m21:0.5, m22:2, m23: -0.5, m24:0,
	m31:0, m32:0, m33: 1, m34:0,
	m41:10, m42:20, m43: 10, m44:1,
	is2D: false
	};
	}

	function initialDOMMatrix() {
	return DOMMatrixReadOnly.fromMatrix(initialMatrix())
	}

	function identity() {
	return new DOMMatrix(
	[1, 0, 0, 0,
	0, 1, 0 ,0,
	0, 0, 1, 0,
	0, 0, 0, 1]);
	}

	function update(matrix, f) {
	f(matrix);
	return matrix;
	}

	function deg2rad(degrees) {
	return degrees * Math.PI / 180;
	}

	function getRotationMatrix(x, y, z, alpha_in_degrees) {
	// Vector normalizing
	var nx = x;
	var ny = y;
	var nz = z;
	var length = Math.sqrt(x * x + y * y + z * z);
	if (length) {
	nx = x / length;
	ny = y / length;
	nz = z / length;
	}

	// The 3D rotation matrix is described in CSS Transforms with alpha.
	// Please see: https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined
	var alpha_in_radians = deg2rad(alpha_in_degrees / 2);
	var sc = Math.sin(alpha_in_radians) * Math.cos(alpha_in_radians);
	var sq = Math.sin(alpha_in_radians) * Math.sin(alpha_in_radians);

	var m11 = 1 - 2 * (ny * ny + nz * nz) * sq;
	var m12 = 2 * (nx * ny * sq + nz * sc);
	var m13 = 2 * (nx * nz * sq - ny * sc);
	var m14 = 0;
	var m21 = 2 * (nx * ny * sq - nz * sc);
	var m22 = 1 - 2 * (nx * nx + nz * nz) * sq;
	var m23 = 2 * (ny * nz * sq + nx * sc);
	var m24 = 0;
	var m31 = 2 * (nx * nz * sq + ny * sc);
	var m32 = 2 * (ny * nz * sq - nx * sc);
	var m33 = 1 - 2 * (nx * nx + ny * ny) * sq;
	var m34 = 0;
	var m41 = 0;
	var m42 = 0;
	var m43 = 0;
	var m44 = 1;

	return new DOMMatrix([
	m11, m12, m13, m14,
	m21, m22, m23, m24,
	m31, m32, m33, m34,
	m41, m42, m43, m44]);
	}

	function getMatrixTransform(matrix, point) {
	var x = point.x * matrix.m11 + point.y * matrix.m21 + point.z * matrix.m31 + point.w * matrix.m41;
	var y = point.x * matrix.m12 + point.y * matrix.m22 + point.z * matrix.m32 + point.w * matrix.m42;
	var w = point.x * matrix.m13 + point.y * matrix.m23 + point.z * matrix.m33 + point.w * matrix.m43;
	var z = point.x * matrix.m14 + point.y * matrix.m24 + point.z * matrix.m34 + point.w * matrix.m44;
	return new DOMPoint(x, y, w, z)
	}

	test(function() {
	var tx = 1;
	var ty = 5;
	var tz = 3;
	var result = initialDOMMatrix().translate(tx, ty, tz);
	var expected = update(initialMatrix(), function(m) {
	m.m41 += tx * m.m11 + ty * m.m21 + tz * m.m31;
	m.m42 += tx * m.m12 + ty * m.m22 + tz * m.m32;
	m.m43 += tx * m.m13 + ty * m.m23 + tz * m.m33;
	m.m44 += tx * m.m14 + ty * m.m24 + tz * m.m34;
	});
	checkDOMMatrix(result, expected);
	},"test translate()");

	test(function() {
	var sx = 2;
	var sy = 5;
	var sz = 3;
	var result = initialDOMMatrix().scale(sx, sy, sz);
	var expected = update(initialMatrix(), function(m) {
	m.m11 *= sx;
	m.m12 *= sx;
	m.m13 *= sx;
	m.m14 *= sx;
	m.m21 *= sy;
	m.m22 *= sy;
	m.m23 *= sy;
	m.m24 *= sy;
	m.m31 *= sz;
	m.m32 *= sz;
	m.m33 *= sz;
	m.m34 *= sz;
	});
	checkDOMMatrix(result, expected);
	},"test scale() without offsets");

	test(function() {
	var result = initialDOMMatrix().scale(2, 5, 3, 11, 7, 13);
	var expected = initialDOMMatrix()
	.translate(11, 7, 13)
	.scale(2, 5, 3)
	.translate(-11, -7, -13);
	checkDOMMatrix(result, expected);
	},"test scale() with offsets");

	test(function() {
	var result = initialDOMMatrix().scaleNonUniform();
	var expected = initialDOMMatrix()
	.scale(1, 1, 1, 0, 0, 0);
	checkDOMMatrix(result, expected);
	},"test scaleNonUniform()");

	test(function() {
	var result = initialDOMMatrix().scaleNonUniform(6);
	var expected = initialDOMMatrix()
	.scale(6, 1, 1, 0, 0, 0);
	checkDOMMatrix(result, expected);
	},"test scaleNonUniform() with sx");

	test(function() {
	var result = initialDOMMatrix().scaleNonUniform(5, 7);
	var expected = initialDOMMatrix()
	.scale(5, 7, 1, 0, 0, 0);
	checkDOMMatrix(result, expected);
	},"test scaleNonUniform() with sx, sy");

	test(function() {
	var result = initialDOMMatrix().scale3d(7, 5, 2, 3);
	var expected = initialDOMMatrix()
	.translate(5, 2, 3)
	.scale(7, 7, 7)
	.translate(-5, -2, -3);
	checkDOMMatrix(result, expected);
	},"test scale3d()");

	test(function() {
	var result = initialDOMMatrix().rotate(-90);
	var expected = initialDOMMatrix().multiply(getRotationMatrix(0, 0, 1, -90));
	checkDOMMatrix(result, expected);
	},"test rotate() 2d");

	test(function() {
	var result = initialDOMMatrix().rotate(180, 180, 90);
	var expected = initialDOMMatrix().rotate(0,0,-90);
	checkDOMMatrix(result, expected);
	},"test rotate()");

	test(function() {
	var result = initialDOMMatrix().rotateFromVector(1, 1);
	var expected = initialDOMMatrix().rotate(45);
	checkDOMMatrix(result, expected);
	},"test rotateFromVector()");

	test(function() {
	var result = initialDOMMatrix().rotateAxisAngle(3, 3, 3, 120);
	var expected = initialDOMMatrix().multiply(getRotationMatrix(3, 3, 3, 120));
	checkDOMMatrix(result, expected);
	},"test rotateAxisAngle() ");

	test(function() {
	var angleDeg = 75;
	var result = initialDOMMatrix().skewX(angleDeg);
	var tangent = Math.tan(angleDeg * Math.PI/180);
	var skew = new DOMMatrix([
	1, 0, 0, 0,
	tangent, 1, 0, 0,
	0, 0, 1, 0,
	0, 0, 0, 1])
	var expected = initialDOMMatrix().multiply(skew);
	checkDOMMatrix(result, expected);
	},"test skewX()");

	test(function() {
	var angleDeg = 18;
	var result = initialDOMMatrix().skewY(angleDeg);
	var tangent = Math.tan(angleDeg * Math.PI/180);
	var skew = new DOMMatrix([
	1, tangent, 0, 0,
	0, 1, 0, 0,
	0, 0, 1, 0,
	0, 0, 0, 1])
	var expected = initialDOMMatrix().multiply(skew);
	checkDOMMatrix(result, expected);
	},"test skewY()");

	test(function() {
	var result = initialDOMMatrix().multiply(initialDOMMatrix().inverse());
	checkDOMMatrix(result, identity());
	},"test multiply with inverse is identity");

	test(function() {
	var result = initialDOMMatrix().flipX();
	var expected = initialDOMMatrix().multiply(new DOMMatrix([-1, 0, 0, 1, 0, 0]));
	checkDOMMatrix(result, expected);
	},"test flipX()");

	test(function() {
	var result = initialDOMMatrix().flipY();
	var expected = initialDOMMatrix().multiply(new DOMMatrix([1, 0, 0, -1, 0, 0]));
	checkDOMMatrix(result, expected);
	},"test flipY()");

	test(function() {
	var point = new DOMPointReadOnly(1, 2, 3, 4);
	var matrix = new DOMMatrix([1, 2, 3, 4, 5, 6]);
	var result = matrix.transformPoint(point);
	var expected = getMatrixTransform(matrix, point);
	checkDOMPoint(result, expected);
	},"test transformPoint() - 2d matrix");

	test(function() {
	var point = new DOMPointReadOnly(1, 2, 3, 4);
	var matrix = new DOMMatrix([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
	var result = matrix.transformPoint(point);
	var expected = getMatrixTransform(matrix, point);
	checkDOMPoint(result, expected);
	},"test transformPoint() - 3d matrix");

	function checkDOMMatrix(m, exp) {
	assert_approx_equals(m.m11, exp.m11, epsilon, "Expected value for m11 is " + exp.m11);
	assert_approx_equals(m.m12, exp.m12, epsilon, "Expected value for m12 is " + exp.m12);
	assert_approx_equals(m.m13, exp.m13, epsilon, "Expected value for m13 is " + exp.m13);
	assert_approx_equals(m.m14, exp.m14, epsilon, "Expected value for m14 is " + exp.m14);
	assert_approx_equals(m.m21, exp.m21, epsilon, "Expected value for m21 is " + exp.m21);
	assert_approx_equals(m.m22, exp.m22, epsilon, "Expected value for m22 is " + exp.m22);
	assert_approx_equals(m.m23, exp.m23, epsilon, "Expected value for m23 is " + exp.m23);
	assert_approx_equals(m.m24, exp.m24, epsilon, "Expected value for m24 is " + exp.m24);
	assert_approx_equals(m.m31, exp.m31, epsilon, "Expected value for m31 is " + exp.m31);
	assert_approx_equals(m.m32, exp.m32, epsilon, "Expected value for m32 is " + exp.m32);
	assert_approx_equals(m.m33, exp.m33, epsilon, "Expected value for m33 is " + exp.m33);
	assert_approx_equals(m.m34, exp.m34, epsilon, "Expected value for m34 is " + exp.m34);
	assert_approx_equals(m.m41, exp.m41, epsilon, "Expected value for m41 is " + exp.m41);
	assert_approx_equals(m.m42, exp.m42, epsilon, "Expected value for m42 is " + exp.m42);
	assert_approx_equals(m.m43, exp.m43, epsilon, "Expected value for m43 is " + exp.m43);
	assert_approx_equals(m.m44, exp.m44, epsilon, "Expected value for m44 is " + exp.m44);
	assert_equals(m.is2D, exp.is2D, "Expected value for is2D is " + exp.is2D);
	}

	function checkDOMPoint(p, exp) {
	assert_equals(p.x, exp.x, "x is not matched");
	assert_equals(p.y, exp.y, "y is not matched");
	assert_equals(p.z, exp.z, "z is not matched");
	assert_equals(p.w, exp.w, "w is not matched");
	}

	</script>
	</body>
	</html>