cssTransformComponent-2d-flattening.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-typed-om/stylevalue-subclasses/cssTransformComponent-2d-flattening.html - WPT Dashboard Interop Dashboard

<!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>