wpt / css / geometry / DOMMatrix-003.html

Status: FAIL | Duration: 59ms | Subtests: 0/24 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/24)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
test translate()FAILDOMMatrixReadOnly is not defined
test scale() without offsetsFAILDOMMatrixReadOnly is not defined
test scale() with offsetsFAILDOMMatrixReadOnly is not defined
test scale() with identity scale and nonzero originZFAILDOMMatrixReadOnly is not defined
test scaleNonUniform()FAILDOMMatrixReadOnly is not defined
test scaleNonUniform() with sxFAILDOMMatrixReadOnly is not defined
test scaleNonUniform() with sx, syFAILDOMMatrixReadOnly is not defined
test scale3d()FAILDOMMatrixReadOnly is not defined
test rotate() 2dFAILDOMMatrixReadOnly is not defined
test rotate()FAILDOMMatrixReadOnly is not defined
test rotate() orderFAILDOMMatrixReadOnly is not defined
test rotateFromVector()FAILDOMMatrixReadOnly is not defined
test rotateFromVector() with x being zeroFAILDOMMatrixReadOnly is not defined
test rotateFromVector() with y being zeroFAILDOMMatrixReadOnly is not defined
test rotateFromVector() with two zerosFAILDOMMatrixReadOnly is not defined
test rotateAxisAngle() FAILDOMMatrixReadOnly is not defined
test rotateAxisAngle() on 2D matrix with 2D rotationFAILDOMMatrix is not defined
test skewX()FAILDOMMatrixReadOnly is not defined
test skewY()FAILDOMMatrixReadOnly is not defined
test multiply with inverse is identityFAILDOMMatrixReadOnly is not defined
test flipX()FAILDOMMatrixReadOnly is not defined
test flipY()FAILDOMMatrixReadOnly is not defined
test transformPoint() - 2d matrixFAILDOMPointReadOnly is not defined
test transformPoint() - 3d matrixFAILDOMPointReadOnly is not defined

/css/geometry/DOMMatrix-003.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/#DOMMatrix">
    <script src="support/dommatrix-test-util.js"></script>
    <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;
          });
          checkMatrix(result, expected, { epsilon });
        },"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;
          });
          checkMatrix(result, expected, { epsilon });
        },"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);
          checkMatrix(result, expected, { epsilon });
        },"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]);
          checkMatrix(result, expected, { epsilon });
        },"test scale() with identity scale and nonzero originZ");

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

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

        test(function() {
          var result = initialDOMMatrix().scaleNonUniform(5, 7);
          var expected = initialDOMMatrix()
                          .scale(5, 7, 1, 0, 0, 0);
          checkMatrix(result, expected, { epsilon });
        },"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);
          checkMatrix(result, expected, { epsilon });
        },"test scale3d()");

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

        test(function() {
          var result = initialDOMMatrix().rotate(180, 180, 90);
          var expected = initialDOMMatrix().rotate(0,0,-90);
          checkMatrix(result, expected, { epsilon });
        },"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);
          checkMatrix(result, expected, { epsilon });
        },"test rotate() order");

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

        test(function() {
          var result = initialDOMMatrix().rotateFromVector(0, 1);
          var expected = initialDOMMatrix().rotate(90);
          checkMatrix(result, expected, { epsilon });
        },"test rotateFromVector() with x being zero");

        test(function() {
          var result = initialDOMMatrix().rotateFromVector(1, 0);
          var expected = initialDOMMatrix()
          checkMatrix(result, expected, { epsilon });
        },"test rotateFromVector() with y being zero");

        test(function() {
          var result = initialDOMMatrix().rotateFromVector(0, 0);
          var expected = initialDOMMatrix()
          checkMatrix(result, expected, { epsilon });
        },"test rotateFromVector() with two zeros");

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

        test(function() {
          var result = new DOMMatrix([1, 1, 1, 1, 1, 1]).rotateAxisAngle(0, 0, 3, 90);
          var expected = new DOMMatrix([1, 1, -1, -1, 1, 1]);
          checkMatrix(result, expected, { epsilon });
        },"test rotateAxisAngle() on 2D matrix with 2D rotation");

        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);
          checkMatrix(result, expected, { epsilon });
        },"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);
          checkMatrix(result, result, { epsilon });
        },"test skewY()");

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

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

        test(function() {
          var result = initialDOMMatrix().flipY();
          var expected = initialDOMMatrix().multiply(new DOMMatrix([1, 0, 0, -1, 0, 0]));
          checkMatrix(result, expected, { epsilon });
        },"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 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>