diff options
Diffstat (limited to 'testing/web-platform/tests/css/geometry/DOMMatrix-003.html')
| -rw-r--r-- | testing/web-platform/tests/css/geometry/DOMMatrix-003.html | 318 |
1 files changed, 318 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/geometry/DOMMatrix-003.html b/testing/web-platform/tests/css/geometry/DOMMatrix-003.html new file mode 100644 index 0000000000..56f463e2ac --- /dev/null +++ b/testing/web-platform/tests/css/geometry/DOMMatrix-003.html @@ -0,0 +1,318 @@ +<!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/#DOMMatrix"> + <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 = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6]) + .scale(1, 1, 1, 1, 1, 1); + var expected = new DOMMatrixReadOnly([1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 1, 0, 5, 6, 0, 1]); + checkDOMMatrix(result, expected); + },"test scale() with identity scale and nonzero originZ"); + + 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().rotate(90, 90, 90); + var expected = initialDOMMatrix() + .rotate(0, 0, 90) + .rotate(0, 90, 0) + .rotate(90, 0, 0); + checkDOMMatrix(result, expected); + },"test rotate() order"); + + test(function() { + var result = initialDOMMatrix().rotateFromVector(1, 1); + var expected = initialDOMMatrix().rotate(45); + checkDOMMatrix(result, expected); + },"test rotateFromVector()"); + + test(function() { + var result = initialDOMMatrix().rotateFromVector(0, 1); + var expected = initialDOMMatrix().rotate(90); + checkDOMMatrix(result, expected); + },"test rotateFromVector() with x being zero"); + + test(function() { + var result = initialDOMMatrix().rotateFromVector(1, 0); + var expected = initialDOMMatrix() + checkDOMMatrix(result, expected); + },"test rotateFromVector() with y being zero"); + + test(function() { + var result = initialDOMMatrix().rotateFromVector(0, 0); + var expected = initialDOMMatrix() + checkDOMMatrix(result, expected); + },"test rotateFromVector() with two zeros"); + + 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> |