<!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],

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>