Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Latest commit

 

History

History
History
92 lines (86 loc) · 3.84 KB

File metadata and controls

92 lines (86 loc) · 3.84 KB
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<title>Geometry APIs spec examples</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<link rel=help href="https://drafts.fxtf.org/geometry/">
<script>
test(() => {
var point = new DOMPoint(5, 4);
var matrix = new DOMMatrix([2, 0, 0, 2, 10, 10]);
var transformedPoint = point.matrixTransform(matrix);
// The point variable is set to a new DOMPoint object with x coordinate initialized to 5 and y
// coordinate initialized to 4.
assert_equals(point.x, 5, 'point.x');
assert_equals(point.y, 4, 'point.y');
assert_equals(point.z, 0, 'point.z');
assert_equals(point.w, 1, 'point.w');
// This new DOMPoint is now scaled and the translated by matrix. This resulting transformedPoint
// has the x coordinate 20 and y coordinate 18.
assert_equals(transformedPoint.x, 20, 'transformedPoint.x');
assert_equals(transformedPoint.y, 18, 'transformedPoint.x');
assert_equals(transformedPoint.z, 0, 'transformedPoint.z');
assert_equals(transformedPoint.w, 1, 'transformedPoint.w');
}, 'matrixTransform');
test(() => {
var point = new DOMPoint(2, 0);
var quad1 = new DOMQuad(point, {x: 12, y: 0}, {x: 12, y: 10}, {x: 2, y: 10});
// The attribute values of the resulting DOMQuad quad1 above are also equivalent to the attribute
// values of the following DOMQuad quad2:
var rect = new DOMRect(2, 0, 10, 10);
var quad2 = DOMQuad.fromRect(rect);
for (var p of ['p1', 'p2', 'p3', 'p4']) {
for (var attr of ['x', 'y', 'z', 'w']) {
assert_equals(quad2[p][attr], quad1[p][attr], `${p}.${attr}`);
}
}
}, 'DOMQuad');
test(() => {
var quad = new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180});
// <circle cx="40" cy="25" r="3" fill="rgb(204, 51, 51)"/>
assert_equals(quad.p1.x, 40, 'p1.x');
assert_equals(quad.p1.y, 25, 'p1.y');
// <circle cx="180" cy="8" r="3" fill="rgb(204, 51, 51)"/>
assert_equals(quad.p2.x, 180, 'p2.x');
assert_equals(quad.p2.y, 8, 'p2.y');
// <circle cx="210" cy="150" r="3" fill="rgb(204, 51, 51)"/>
assert_equals(quad.p3.x, 210, 'p3.x');
assert_equals(quad.p3.y, 150, 'p3.y');
// <circle cx="10" cy="180" r="3" fill="rgb(204, 51, 51)"/>
assert_equals(quad.p4.x, 10, 'p4.x');
assert_equals(quad.p4.y, 180, 'p4.y');
var bounds = quad.getBounds();
// <rect x="10" y="8" width="200" height="172" fill="none" stroke="black" stroke-dasharray="3 2"/>
assert_equals(bounds.x, 10, 'bounds.x');
assert_equals(bounds.y, 8, 'bounds.x');
assert_equals(bounds.width, 200, 'bounds.width');
assert_equals(bounds.height, 172, 'bounds.height');
}, 'DOMQuad irregular');
test(() => {
// In this example, a matrix is created and several 2D transformation methods are called:
var matrix = new DOMMatrix();
matrix.scaleSelf(2);
matrix.translateSelf(20,20);
assert_equals(matrix.toString(), "matrix(2, 0, 0, 2, 40, 40)");
}, 'DOMMatrix 2D transformation');
test(() => {
// In the following example, a matrix is created and several 3D transformation methods are called:
var matrix = new DOMMatrix();
matrix.scale3dSelf(2);
assert_equals(matrix.toString(), "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)");
}, 'DOMMatrix 3D transformation');
test(() => {
// This example will throw an exception because there are non-finite values in the matrix.
var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]);
assert_throws_dom("InvalidStateError", () => { var string = matrix + " Batman!"; });
}, 'DOMMatrix NaN');
test(() => {
var matrix = new DOMMatrix();
matrix.translateSelf(20, 20);
matrix.scaleSelf(2);
matrix.translateSelf(-20, -20);
// is equivalent to:
var matrix2 = new DOMMatrix();
matrix2.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20);
assert_equals(matrix.toString(), matrix2.toString());
}, 'DOMMatrix mutable');
</script>
Morty Proxy This is a proxified and sanitized view of the page, visit original site.