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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Transform Test</title>
<style>
th,
td {
border: solid #ccc 1px;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var outcome = d3.select("body").append("p");
var g = d3.select("body").append("svg")
.attr("width", 10)
.attr("height", 10)
.append("g");
var results = d3.select("body").append("table")
.style("display", "none");
results.append("tr").selectAll("th")
.data(["Expected", "Actual", "Expected matrix", "Actual matrix"])
.enter().append("th")
.text(function(d) { return d; });
var el = g[0][0],
v,
m,
a,
b,
failures = 0;
for (var tx = -10; tx <= 10; tx += 5) {
for (var ty = -10; ty <= 10; ty += 5) {
for (var r = -180; r <= 180; r += 15) {
for (var skx = -45; skx <= 45; skx += 45) {
for (var sx = -2; sx <= 2; sx++) {
for (var sy = -2; sy <= 2; sy++) {
v = "translate(" + tx + "," + ty + ")rotate(" + r + ")skewX(" + skx + ")scale(" + sx + "," + sy + ")";
g.attr("transform", v);
a = matrix(el);
g.attr("transform", d3.transform(v));
b = matrix(el);
if (!deepEqual(a, b, 1e-6)) {
failures++;
results
.style("display", null)
.append("tr").selectAll("td")
.data([v, d3.transform(v), a, b])
.enter().append("td")
.text(function(d) { return d; });
}
}
}
}
}
}
}
outcome.text(failures ? failures + " failures" : "Success!");
function matrix(el) {
var t = el.transform.baseVal.consolidate();
if (t) {
var m = t.matrix;
return [m.a, m.b, m.c, m.d, m.e, m.f];
}
return null;
}
function deepEqual(actual, expected, epsilon) {
epsilon = epsilon || 0;
if (actual === expected) return true;
if (actual == null || expected == null) return false;
if (actual.length !== expected.length) return false;
for (var i = 0; i < actual.length; i++) {
if (Math.abs(actual[i] - expected[i]) > epsilon) return false;
}
return true;
}
</script>
|
