wpt / css / css-typed-om / stylevalue-subclasses / cssTransformComponent-toMatrix.html

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

TestTest SourceSubtests (0/8)

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

SubtestStatusMessage
CSSTranslate.toMatrix() returns correct matrixFAILCSSTranslate is not defined
CSSRotate.toMatrix() returns correct matrixFAILCSSRotate is not defined
CSSScale.toMatrix() returns correct matrixFAILCSSScale is not defined
CSSSkew.toMatrix() returns correct matrixFAILCSSSkew is not defined
CSSSkewX.toMatrix() returns correct matrixFAILCSSSkewX is not defined
CSSSkewY.toMatrix() returns correct matrixFAILCSSSkewY is not defined
CSSPerspective.toMatrix() returns correct matrixFAILCSSPerspective is not defined
CSSMatrixComponent.toMatrix() returns correct matrixFAILDOMMatrixReadOnly is not defined

/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html

<!doctype html>
<meta charset="utf-8">
<title>CSSTransformComponent.toMatrix tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
<meta name="assert" content="Test CSSTransformComponent.toMatrix for each type of component" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';

const gEpsilon = 1e-6;

test(() => {
  const component = new CSSTranslate(
    new CSSUnitValue(1, 'px'),
    new CSSUnitValue(2, 'px'),
    new CSSUnitValue(3, 'px')
  );
  const expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, 1e-8);
}, 'CSSTranslate.toMatrix() returns correct matrix');

test(() => {
  const component = new CSSRotate(
    new CSSUnitValue(1, 'number'),
    new CSSUnitValue(2, 'number'),
    new CSSUnitValue(3, 'number'),
    new CSSUnitValue(90, 'deg')
  );
  const expectedMatrix = (new DOMMatrixReadOnly()).rotateAxisAngle(1, 2, 3, 90);
  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
}, 'CSSRotate.toMatrix() returns correct matrix');

test(() => {
  const component = new CSSScale(1, 2, 3);
  const expectedMatrix = (new DOMMatrixReadOnly()).scale(1, 2, 3);
  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
}, 'CSSScale.toMatrix() returns correct matrix');

test(() => {
  const alpha = 10, beta = 20;
  const component = new CSSSkew(
    new CSSUnitValue(alpha, 'rad'),
    new CSSUnitValue(beta, 'rad')
  );
  const expectedMatrix = new DOMMatrixReadOnly(
        [1, Math.tan(beta), 0, 0, Math.tan(alpha), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
}, 'CSSSkew.toMatrix() returns correct matrix');

test(() => {
  const component = new CSSSkewX(
    new CSSUnitValue(10, 'deg'),
  );
  const expectedMatrix = (new DOMMatrixReadOnly()).skewX(10);
  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
}, 'CSSSkewX.toMatrix() returns correct matrix');

test(() => {
  const component = new CSSSkewY(
    new CSSUnitValue(10, 'deg'),
  );
  const expectedMatrix = (new DOMMatrixReadOnly()).skewY(10);
  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
}, 'CSSSkewY.toMatrix() returns correct matrix');

test(() => {
  for (const length of [10, 1, 0.5, 0, -10]) {
    const component = new CSSPerspective(new CSSUnitValue(length, 'px'));
    const expectedMatrix = new DOMMatrixReadOnly(
          [1, 0, 0, 0,
           0, 1, 0, 0,
           0, 0, 1, -1/Math.max(1, length),
           0, 0, 0, 1]);
    assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
  }
}, 'CSSPerspective.toMatrix() returns correct matrix');

test(() => {
  const matrix = new DOMMatrixReadOnly(
          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
  const component = new CSSMatrixComponent(matrix);
  assert_matrix_approx_equals(component.toMatrix(), matrix, gEpsilon);
}, 'CSSMatrixComponent.toMatrix() returns correct matrix');

</script>