wpt / css / css-typed-om / stylevalue-subclasses / cssTransformComponent-2d-flattening.html

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

TestTest SourceSubtests (0/4)

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

SubtestStatusMessage
CSSTranslate.toMatrix() flattens when told it is 2dFAILCSSTranslate is not defined
CSSRotate.toMatrix() flattens when told it is 2dFAILCSSRotate is not defined
CSSScale.toMatrix() flattens when told it is 2dFAILCSSScale is not defined
CSSMatrixComponent.toMatrix() flattens when told it is 2dFAILDOMMatrixReadOnly is not defined

/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-2d-flattening.html

<!doctype html>
<meta charset="utf-8">
<title>CSSTransformComponent 2d flattening</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
<meta name="assert" content="Test CSSTransformComponent.toMatrix handles 2d flattening" />
<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 translate = new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1));
  translate.is2D = true;
  const expectedTranslate = new DOMMatrix();
  expectedTranslate.translateSelf(1, 1);
  assert_matrix_approx_equals(translate.toMatrix(), expectedTranslate, gEpsilon);
}, 'CSSTranslate.toMatrix() flattens when told it is 2d');

test(() => {
  const rotate = new CSSRotate(1, 2, 3, CSS.deg(90));
  rotate.is2D = true;
  const expectedRotate = new DOMMatrix();
  expectedRotate.rotateSelf(90);
  assert_matrix_approx_equals(rotate.toMatrix(), expectedRotate, gEpsilon);
}, 'CSSRotate.toMatrix() flattens when told it is 2d');

test(() => {
  const scale = new CSSScale(2, 3, 2);
  scale.is2D = true;
  const expectedScale = new DOMMatrix();
  expectedScale.scaleSelf(2, 3);
  assert_matrix_approx_equals(scale.toMatrix(), expectedScale, gEpsilon);
}, 'CSSScale.toMatrix() flattens when told it is 2d');

test(() => {
  const transformMatrix = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
  const matrixComponent = new CSSMatrixComponent(transformMatrix);
  matrixComponent.is2D = true;
  const expectedMatrix = new DOMMatrix();
  expectedMatrix.multiplySelf(new DOMMatrixReadOnly([1, 2, 5, 6, 13, 14]));
  assert_matrix_approx_equals(matrixComponent.toMatrix(), expectedMatrix, gEpsilon);
}, 'CSSMatrixComponent.toMatrix() flattens when told it is 2d');

</script>