| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSSTransformValue.toMatrix</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix"> |
| <meta name="assert" content="Test CSSTransformValue.toMatrix multiplies component matrices" /> |
| <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 transformMatrix = new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1]); |
| const transformArray = [ |
| new CSSScale(2, 2), |
| new CSSMatrixComponent(transformMatrix), |
| new CSSScale(5, 6) |
| ]; |
| |
| let expectedMatrix = new DOMMatrix(); |
| expectedMatrix.scaleSelf(2, 2); |
| expectedMatrix.multiplySelf(transformMatrix); |
| expectedMatrix.scaleSelf(5, 6); |
| |
| const transform = new CSSTransformValue(transformArray); |
| assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, gEpsilon); |
| }, 'CSSTransformValue.toMatrix() multiplies its component matrices'); |
| |
| test(() => { |
| const transformMatrix = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]); |
| let transformArray = [ |
| new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1)), |
| new CSSRotate(1, 2, 3, CSS.deg(90)), |
| new CSSScale(2, 3, 2), |
| new CSSMatrixComponent(transformMatrix), |
| ]; |
| |
| transformArray.forEach(transform => transform.is2D = true); |
| |
| let expectedMatrix = new DOMMatrix(); |
| expectedMatrix.translateSelf(1, 1); |
| expectedMatrix.rotateSelf(90); |
| expectedMatrix.scaleSelf(2, 3); |
| expectedMatrix.multiplySelf(new DOMMatrixReadOnly([1, 2, 5, 6, 13, 14])); |
| |
| const transform = new CSSTransformValue(transformArray); |
| assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, gEpsilon); |
| }, 'CSSTransformValue.toMatrix() respects is2D changes in its components'); |
| |
| </script> |
