<!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(() => {
  const length = 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/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>
