mirror of
https://github.com/d3/d3.git
synced 2026-01-25 15:24:06 +00:00
86 lines
2.2 KiB
HTML
86 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
|
<title>Transform Test</title>
|
|
<script type="text/javascript" src="../../d3.js"></script>
|
|
<style type="text/css">
|
|
th, td { border: solid #ccc 1px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
|
|
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(String);
|
|
|
|
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(String);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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>
|
|
</body>
|
|
</html>
|