From 372a62c1bb3bb663feee64b295d5b44154a62b78 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 24 Aug 2018 09:27:48 -0700
Subject: [PATCH 1/2] Use DOMMatrix to parse CSS transforms.

---
 src/transform/parse.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/transform/parse.js b/src/transform/parse.js
index 8799bec..77ec290 100644
--- a/src/transform/parse.js
+++ b/src/transform/parse.js
@@ -1,18 +1,10 @@
 import decompose, {identity} from "./decompose";
 
-var cssNode,
-    cssRoot,
-    cssView,
-    svgNode;
+var svgNode;
 
 export function parseCss(value) {
-  if (value === "none") return identity;
-  if (!cssNode) cssNode = document.createElement("DIV"), cssRoot = document.documentElement, cssView = document.defaultView;
-  cssNode.style.transform = value;
-  value = cssView.getComputedStyle(cssRoot.appendChild(cssNode), null).getPropertyValue("transform");
-  cssRoot.removeChild(cssNode);
-  value = value.slice(7, -1).split(",");
-  return decompose(+value[0], +value[1], +value[2], +value[3], +value[4], +value[5]);
+  const m = new (typeof DOMMatrix === "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
+  return m.isIdentity ? identity : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
 }
 
 export function parseSvg(value) {

From 6c8db199f9991534e8c2948f7909ada4818f9604 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Thu, 4 Jun 2020 14:42:30 +0200
Subject: [PATCH 2/2] disable eslint error on undefined DOMMatrix and
 WebKitCSSMatrix add disabled tests for transformCss (they might work if we
 had DOMMatrix in node-canvas, cf.
 https://github.com/Automattic/node-canvas/issues/1313)

---
 src/transform/parse.js    |  1 +
 test/transformCss-test.js | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 test/transformCss-test.js

diff --git a/src/transform/parse.js b/src/transform/parse.js
index df68285..c62088e 100644
--- a/src/transform/parse.js
+++ b/src/transform/parse.js
@@ -2,6 +2,7 @@ import decompose, {identity} from "./decompose.js";
 
 var svgNode;
 
+/* eslint-disable no-undef */
 export function parseCss(value) {
   const m = new (typeof DOMMatrix === "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
   return m.isIdentity ? identity : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
diff --git a/test/transformCss-test.js b/test/transformCss-test.js
new file mode 100644
index 0000000..4fe0e2f
--- /dev/null
+++ b/test/transformCss-test.js
@@ -0,0 +1,26 @@
+var tape = require("tape"),
+    interpolate = require("../");
+
+/*
+
+// see https://github.com/d3/d3-interpolate/pull/83
+// and https://github.com/Automattic/node-canvas/issues/1313
+global.DOMMatrix = require("Canvas").DOMMatrix;
+
+tape("interpolateTransformCss(a, b) transforms as expected", function(test) {
+  test.equal(interpolate.interpolateTransformCss(
+    "translateY(12px) scale(2)",
+    "translateX(3em) rotate(5deg)"
+  )(0.5), "translate(24px, 6px) rotate(2.5deg) scale(1.5,1.5)");
+  test.deepEqual(interpolate.interpolateTransformCss(
+    "matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)",
+    "translate(3px,90px)"
+  )(0.5), "translate(4px, 48px) rotate(-58.282525588538995deg) skewX(-39.847576765616985deg) scale(-0.6180339887498949,0.9472135954999579)");
+  test.deepEqual(interpolate.interpolateTransformCss(
+    "skewX(-60)",
+    "skewX(60) translate(280,0)"
+  )(0.5), "translate(140, 0) skewX(0)");
+  test.end();
+});
+
+*/