1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!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>
|
