Bug 717722 - Implement WebKitCSSMatrix. r=baku

dom/base/DOMMatrix.h

@@ -142,7 +142,7 @@ private:
   DOMMatrixReadOnly& operator=(const DOMMatrixReadOnly&) = delete;
 };
 
-class DOMMatrix final : public DOMMatrixReadOnly
+class DOMMatrix : public DOMMatrixReadOnly
 {
 public:
   explicit DOMMatrix(nsISupports* aParent)
@@ -244,8 +244,10 @@ public:
   DOMMatrix* SkewYSelf(double aSy);
   DOMMatrix* InvertSelf();
   DOMMatrix* SetMatrixValue(const nsAString& aTransformList, ErrorResult& aRv);
-private:
+protected:
   void Ensure3DMatrix();
+
+  virtual ~DOMMatrix() {}
 };
 
 } // namespace dom

dom/base/WebKitCSSMatrix.cpp

@@ -0,0 +1,192 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "mozilla/dom/WebKitCSSMatrix.h"
+
+#include "mozilla/dom/BindingUtils.h"
+#include "mozilla/dom/WebKitCSSMatrixBinding.h"
+
+namespace mozilla {
+namespace dom {
+
+static const double sRadPerDegree = 2.0 * M_PI / 360.0;
+
+bool
+WebKitCSSMatrix::FeatureEnabled(JSContext* aCx, JSObject* aObj)
+{
+  return Preferences::GetBool("layout.css.DOMMatrix.enabled", false) &&
+         Preferences::GetBool("layout.css.prefixes.webkit", false);
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Constructor(const GlobalObject& aGlobal, ErrorResult& aRv)
+{
+  RefPtr<WebKitCSSMatrix> obj = new WebKitCSSMatrix(aGlobal.GetAsSupports());
+  return obj.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Constructor(const GlobalObject& aGlobal,
+                             const nsAString& aTransformList, ErrorResult& aRv)
+{
+  RefPtr<WebKitCSSMatrix> obj = new WebKitCSSMatrix(aGlobal.GetAsSupports());
+  obj = obj->SetMatrixValue(aTransformList, aRv);
+  return obj.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Constructor(const GlobalObject& aGlobal,
+                             const DOMMatrixReadOnly& aOther, ErrorResult& aRv)
+{
+  RefPtr<WebKitCSSMatrix> obj = new WebKitCSSMatrix(aGlobal.GetAsSupports(),
+                                                    aOther);
+  return obj.forget();
+}
+
+JSObject*
+WebKitCSSMatrix::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+  return WebKitCSSMatrixBinding::Wrap(aCx, this, aGivenProto);
+}
+
+WebKitCSSMatrix*
+WebKitCSSMatrix::SetMatrixValue(const nsAString& aTransformList,
+                                ErrorResult& aRv)
+{
+  DOMMatrix::SetMatrixValue(aTransformList, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+
+  return this;
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Multiply(const WebKitCSSMatrix& other) const
+{
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->MultiplySelf(other);
+
+  return retval.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Inverse() const
+{
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->InvertSelf();
+
+  return retval.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Translate(double aTx,
+                           double aTy,
+                           double aTz) const
+{
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->TranslateSelf(aTx, aTy, aTz);
+
+  return retval.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Scale(double aScaleX,
+                       const Optional<double>& aScaleY,
+                       double aScaleZ) const
+{
+  double scaleX = aScaleX;
+  double scaleY = aScaleY.WasPassed() ? aScaleY.Value() : scaleX;
+  double scaleZ = aScaleZ;
+
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->ScaleNonUniformSelf(scaleX, scaleY, scaleZ);
+
+  return retval.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::Rotate(double aRotX,
+                        const Optional<double>& aRotY,
+                        const Optional<double>& aRotZ) const
+{
+  double rotX = aRotX;
+  double rotY;
+  double rotZ;
+
+  if (!aRotY.WasPassed() && !aRotZ.WasPassed()) {
+    rotZ = rotX;
+    rotX = 0;
+    rotY = 0;
+  } else {
+    rotY = aRotY.WasPassed() ? aRotY.Value() : 0;
+    rotZ = aRotZ.WasPassed() ? aRotZ.Value() : 0;
+  }
+
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->Rotate3dSelf(rotX, rotY, rotZ);
+
+  return retval.forget();
+}
+
+WebKitCSSMatrix*
+WebKitCSSMatrix::Rotate3dSelf(double aRotX,
+                              double aRotY,
+                              double aRotZ)
+{
+  if (aRotX != 0 || aRotY != 0) {
+    Ensure3DMatrix();
+  }
+
+  if (mMatrix3D) {
+    if (fmod(aRotZ, 360) != 0) {
+      mMatrix3D->RotateZ(aRotZ * sRadPerDegree);
+    }
+    if (fmod(aRotY, 360) != 0) {
+      mMatrix3D->RotateY(aRotY * sRadPerDegree);
+    }
+    if (fmod(aRotX, 360) != 0) {
+      mMatrix3D->RotateX(aRotX * sRadPerDegree);
+    }
+  } else if (fmod(aRotZ, 360) != 0) {
+    mMatrix2D->PreRotate(aRotZ * sRadPerDegree);
+  }
+
+  return this;
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::RotateAxisAngle(double aX,
+                                 double aY,
+                                 double aZ,
+                                 double aAngle) const
+{
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->RotateAxisAngleSelf(aX, aY, aZ, aAngle);
+
+  return retval.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::SkewX(double aSx) const
+{
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->SkewXSelf(aSx);
+
+  return retval.forget();
+}
+
+already_AddRefed<WebKitCSSMatrix>
+WebKitCSSMatrix::SkewY(double aSy) const
+{
+  RefPtr<WebKitCSSMatrix> retval = new WebKitCSSMatrix(mParent, *this);
+  retval->SkewYSelf(aSy);
+
+  return retval.forget();
+}
+
+} // namespace dom
+} // namespace mozilla

dom/base/WebKitCSSMatrix.h

@@ -0,0 +1,70 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_webkitcssmatrix_h__
+#define mozilla_dom_webkitcssmatrix_h__
+
+#include "mozilla/dom/DOMMatrix.h"
+
+namespace mozilla {
+namespace dom {
+
+class WebKitCSSMatrix final : public DOMMatrix
+{
+public:
+  explicit WebKitCSSMatrix(nsISupports* aParent)
+    : DOMMatrix(aParent)
+  {}
+
+  WebKitCSSMatrix(nsISupports* aParent, const DOMMatrixReadOnly& other)
+    : DOMMatrix(aParent, other)
+  {}
+
+  static bool FeatureEnabled(JSContext* aCx, JSObject* aObj);
+
+  static already_AddRefed<WebKitCSSMatrix>
+  Constructor(const GlobalObject& aGlobal, ErrorResult& aRv);
+  static already_AddRefed<WebKitCSSMatrix>
+  Constructor(const GlobalObject& aGlobal,
+              const nsAString& aTransformList, ErrorResult& aRv);
+  static already_AddRefed<WebKitCSSMatrix>
+  Constructor(const GlobalObject& aGlobal,
+              const DOMMatrixReadOnly& aOther, ErrorResult& aRv);
+
+  nsISupports* GetParentObject() const { return mParent; }
+  virtual JSObject* WrapObject(JSContext* aCx,
+                               JS::Handle<JSObject*> aGivenProto) override;
+
+  WebKitCSSMatrix* SetMatrixValue(const nsAString& aTransformList,
+                                  ErrorResult& aRv);
+
+  already_AddRefed<WebKitCSSMatrix> Multiply(const WebKitCSSMatrix& aOther) const;
+  already_AddRefed<WebKitCSSMatrix> Inverse() const;
+  already_AddRefed<WebKitCSSMatrix> Translate(double aTx,
+                                              double aTy,
+                                              double aTz) const;
+  already_AddRefed<WebKitCSSMatrix> Scale(double aScaleX,
+                                          const Optional<double>& aScaleY,
+                                          double aScaleZ) const;
+  already_AddRefed<WebKitCSSMatrix> Rotate(double aRotX,
+                                           const Optional<double>& aRotY,
+                                           const Optional<double>& aRotZ) const;
+  already_AddRefed<WebKitCSSMatrix> RotateAxisAngle(double aX,
+                                                    double aY,
+                                                    double aZ,
+                                                    double aAngle) const;
+  already_AddRefed<WebKitCSSMatrix> SkewX(double aSx) const;
+  already_AddRefed<WebKitCSSMatrix> SkewY(double aSy) const;
+protected:
+  WebKitCSSMatrix* Rotate3dSelf(double aRotX,
+                                double aRotY,
+                                double aRotZ);
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_webkitcssmatrix_h__ */

dom/base/WindowNamedPropertiesHandler.cpp

@@ -7,6 +7,7 @@
 #include "WindowNamedPropertiesHandler.h"
 #include "mozilla/dom/EventTargetBinding.h"
 #include "mozilla/dom/WindowBinding.h"
+#include "nsContentUtils.h"
 #include "nsDOMClassInfo.h"
 #include "nsGlobalWindow.h"
 #include "nsHTMLDocument.h"

dom/base/moz.build

@@ -212,6 +212,7 @@ EXPORTS.mozilla.dom += [
     'TreeWalker.h',
     'URL.h',
     'URLSearchParams.h',
+    'WebKitCSSMatrix.h',
     'WebSocket.h',
     'WindowOrientationObserver.h',
 ]
@@ -359,6 +360,7 @@ UNIFIED_SOURCES += [
     'TreeWalker.cpp',
     'URL.cpp',
     'URLSearchParams.cpp',
+    'WebKitCSSMatrix.cpp',
     'WebSocket.cpp',
     'WindowNamedPropertiesHandler.cpp',
     'WindowOrientationObserver.cpp',

dom/base/nsXMLContentSerializer.cpp

@@ -19,6 +19,7 @@
 #include "nsIContent.h"
 #include "nsIDocument.h"
 #include "nsIDocumentEncoder.h"
+#include "nsIParserService.h"
 #include "nsNameSpaceManager.h"
 #include "nsTextFragment.h"
 #include "nsString.h"

dom/tests/mochitest/general/mochitest.ini

@@ -127,3 +127,4 @@ skip-if = buildapp == 'b2g' # Bug 1184427 - no SSL certs on b2g
 [test_selectevents.html]
 skip-if = buildapp == 'b2g' || buildapp == 'mulet' || toolkit == 'android' # Mouse doesn't select in the same way
 # Disabled on Android, see bug 1230232
+[test_WebKitCSSMatrix.html]

dom/tests/mochitest/general/test_WebKitCSSMatrix.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for WebKitCSSMatrix</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+function RoughCompareMatrix(dm1, dm2)
+{
+  var m1 = dm1.toFloat32Array();
+  var m2 = dm2.toFloat32Array();
+
+  if (m1.length != m2.length) {
+    return false;
+  }
+
+  const tolerance = 1 / 65535;
+  for (var x = 0; x < m1.length; x++) {
+    if (Math.abs(m1[x] - m2[x]) > tolerance) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function CompareMatrix(dm1, dm2)
+{
+  var m1 = dm1.toFloat32Array();
+  var m2 = dm2.toFloat32Array();
+
+  if (m1.length != m2.length) {
+    return false;
+  }
+
+  for (var x = 0; x < m1.length; x++) {
+    if (m1[x] != m2[x]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+test(function() {
+  var m = new WebKitCSSMatrix();
+
+  assert_equals(m.m11, 1, "m11 should be 1");
+  assert_equals(m.m22, 1, "m22 should be 1");
+  assert_equals(m.m33, 1, "m33 should be 1");
+  assert_equals(m.m44, 1, "m44 should be 1");
+  assert_equals(m.m12, 0, "m12 should be 0");
+  assert_equals(m.m13, 0, "m13 should be 0");
+  assert_equals(m.m14, 0, "m14 should be 0");
+  assert_equals(m.m21, 0, "m21 should be 0");
+  assert_equals(m.m23, 0, "m23 should be 0");
+  assert_equals(m.m24, 0, "m24 should be 0");
+  assert_equals(m.m31, 0, "m31 should be 0");
+  assert_equals(m.m32, 0, "m32 should be 0");
+  assert_equals(m.m34, 0, "m34 should be 0");
+  assert_equals(m.m41, 0, "m41 should be 0");
+  assert_equals(m.m42, 0, "m42 should be 0");
+  assert_equals(m.m43, 0, "m43 should be 0");
+}, "Test constructor with no arguments.");
+
+test(function() {
+  var m = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  assert_equals(m.m11, 1, "m11 should be 1");
+  assert_equals(m.m12, 2, "m12 should be 2");
+  assert_equals(m.m21, 3, "m21 should be 3");
+  assert_equals(m.m22, 4, "m22 should be 4");
+  assert_equals(m.m41, 5, "m41 should be 5");
+  assert_equals(m.m42, 6, "m42 should be 6");
+}, "Test constructor with transform list.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new WebKitCSSMatrix(m1);
+
+  assert_true(RoughCompareMatrix(m1, m2), "Matrix should be equal.");
+}, "Test constructor with other matrix.");
+
+test(function() {
+  var m = new WebKitCSSMatrix();
+  var mr = m.setMatrixValue("matrix(1,2,3,4,5,6)");
+
+  assert_equals(m.m11, 1, "m11 should be 1");
+  assert_equals(m.m12, 2, "m12 should be 2");
+  assert_equals(m.m21, 3, "m21 should be 3");
+  assert_equals(m.m22, 4, "m22 should be 4");
+  assert_equals(m.m41, 5, "m41 should be 5");
+  assert_equals(m.m42, 6, "m42 should be 6");
+
+  assert_equals(m, mr, "Return value of setMatrixValue should be the same matrix.");
+}, "Test setMatrixValue.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(6,5,4,3,2,1)");
+  var m4 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.multiply(m3);
+  var m2r = m2.multiply(m3);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "multiply should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m4), "Multiply should not mutate original matrix.");
+}, "Test multiply.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.inverse();
+  var m2r = m2.inverse();
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "inverse should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "inverse should not mutate original matrix.");
+}, "Test inverse.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.translate(2, 3, 4);
+  var m2r = m2.translate(2, 3, 4);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "translate should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "translate should not mutate original matrix.");
+}, "Test inverse.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.scale(2);
+  var m2r = m2.scaleNonUniform(2, 2, 1);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix.");
+}, "Test scale with 1 argument.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.scale(2, 3);
+  var m2r = m2.scaleNonUniform(2, 3, 1);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix.");
+}, "Test scale with 2 arguments.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.scale(2, 3, 4);
+  var m2r = m2.scaleNonUniform(2, 3, 4);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix.");
+}, "Test scale with 3 arguments.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.scale(undefined, 3, 4);
+  var m2r = m2.scaleNonUniform(1, 3, 4);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix.");
+}, "Test scale with undefined scaleX argument.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.scale(2, undefined, 4);
+  var m2r = m2.scaleNonUniform(2, 2, 4);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix.");
+}, "Test scale with undefined scaleY argument.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.scale(2, 3, undefined);
+  var m2r = m2.scaleNonUniform(2, 3, 1);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "scale should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "scale should not mutate original matrix.");
+}, "Test scale with undefined scaleZ argument.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.rotate(2);
+  var m2r = m2.rotateAxisAngle(0, 0, 1, 2); // Rotate around unit vector on z-axis.
+
+  assert_true(RoughCompareMatrix(m1r, m2r));
+  assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix.");
+}, "Test rotate with 1 argument.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.rotate(2, 3);
+  var m2r = m2.rotateAxisAngle(0, 1, 0, 3); // Rotate around unit vector on x-axis.
+  m2r = m2r.rotateAxisAngle(1, 0, 0, 2); // Rotate around unit vector on y-axis.
+
+  assert_true(RoughCompareMatrix(m1r, m2r));
+  assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix.");
+}, "Test rotate with 2 arguments.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.rotate(2, 3, 4);
+  var m2r = m2.rotateAxisAngle(0, 0, 1, 4); // Rotate around unit vector on z-axis.
+  m2r = m2r.rotateAxisAngle(0, 1, 0, 3); // Rotate around unit vector on y-axis.
+  m2r = m2r.rotateAxisAngle(1, 0, 0, 2); // Rotate around unit vector on x-axis.
+
+  assert_true(RoughCompareMatrix(m1r, m2r));
+  assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix.");
+}, "Test rotate with 3 arguments.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.rotate(2, undefined, undefined);
+  var m2r = m2.rotateAxisAngle(0, 0, 1, 2); // Rotate around unit vector on z-axis.
+
+  assert_true(RoughCompareMatrix(m1r, m2r));
+  assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix.");
+}, "Test rotate with rotY and rotZ as undefined.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.rotate(undefined, 3, 4);
+  var m2r = m2.rotateAxisAngle(0, 0, 1, 4); // Rotate around unit vector on z-axis.
+  m2r = m2r.rotateAxisAngle(0, 1, 0, 3); // Rotate around unit vector on y-axis.
+
+  assert_true(RoughCompareMatrix(m1r, m2r));
+  assert_true(CompareMatrix(m1, m3), "rotate should not mutate original matrix.");
+}, "Test rotate with rotX as undefined.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.rotateAxisAngle(2, 3, 4, 5);
+  var m2r = m2.rotateAxisAngle(2, 3, 4, 5);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "rotateAxisAngle should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "rotateAxisAngle should not mutate original matrix.");
+}, "Test rotateAxisAngle.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.skewX(2);
+  var m2r = m2.skewX(2);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "skewX should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "skewX should not mutate original matrix.");
+}, "Test skewX.");
+
+test(function() {
+  var m1 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+  var m2 = new DOMMatrix("matrix(1,2,3,4,5,6)");
+  var m3 = new WebKitCSSMatrix("matrix(1,2,3,4,5,6)");
+
+  var m1r = m1.skewY(2);
+  var m2r = m2.skewY(2);
+
+  assert_true(RoughCompareMatrix(m1r, m2r), "skewY should return the same result as DOMMatrixReadOnly.");
+  assert_true(CompareMatrix(m1, m3), "skewY should not mutate original matrix.");
+}, "Test skewY.");
+</script>

dom/tests/mochitest/general/test_interfaces.html

@@ -1441,6 +1441,8 @@ var interfaceNamesInGlobalScope =
     "WebGLUniformLocation",
 // IMPORTANT: Do not change this list without review from a DOM peer!
     {name: "WebGLVertexArrayObject", nightly: true},
+// IMPORTANT: Do not change this list without review from a DOM peer!
+    "WebKitCSSMatrix",
 // IMPORTANT: Do not change this list without review from a DOM peer!
     "WebSocket",
 // IMPORTANT: Do not change this list without review from a DOM peer!

dom/webidl/WebKitCSSMatrix.webidl

@@ -0,0 +1,38 @@
+/* -*- Mode: IDL; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * The origin of this IDL file is
+ * https://compat.spec.whatwg.org/#webkitcssmatrix-interface
+ */
+
+[Constructor,
+ Constructor(DOMString transformList),
+ Constructor(WebKitCSSMatrix other),
+ Exposed=Window,
+ Func="mozilla::dom::WebKitCSSMatrix::FeatureEnabled"]
+interface WebKitCSSMatrix : DOMMatrix {
+    // Mutable transform methods
+    [Throws]
+    WebKitCSSMatrix setMatrixValue(DOMString transformList);
+
+    // Immutable transform methods
+    WebKitCSSMatrix multiply(WebKitCSSMatrix other);
+    WebKitCSSMatrix inverse();
+    WebKitCSSMatrix translate(unrestricted double tx,
+                              unrestricted double ty,
+                              unrestricted double tz);
+    WebKitCSSMatrix scale(optional unrestricted double scaleX = 1,
+                          optional unrestricted double scaleY,
+                          optional unrestricted double scaleZ = 1);
+    WebKitCSSMatrix rotate(optional unrestricted double rotX = 0,
+                           optional unrestricted double rotY,
+                           optional unrestricted double rotZ);
+    WebKitCSSMatrix rotateAxisAngle(unrestricted double x,
+                                    unrestricted double y,
+                                    unrestricted double z,
+                                    unrestricted double angle);
+    WebKitCSSMatrix skewX(unrestricted double sx);
+    WebKitCSSMatrix skewY(unrestricted double sy);
+};

dom/webidl/moz.build

@@ -590,6 +590,7 @@ WEBIDL_FILES = [
     'WebComponents.webidl',
     'WebGL2RenderingContext.webidl',
     'WebGLRenderingContext.webidl',
+    'WebKitCSSMatrix.webidl',
     'WebSocket.webidl',
     'WheelEvent.webidl',
     'WifiOptions.webidl',