Bug 1359522 - added test_dom_matrix_2d.html; r=gregtatum

MozReview-Commit-ID: 9HHOdFg78He
2017-05-03 20:50:09 +02:00 · 2017-05-03 20:50:09 +02:00 · cb85a61c17
--- a/devtools/shared/tests/mochitest/chrome.ini
+++ b/devtools/shared/tests/mochitest/chrome.ini
@ -5,5 +5,6 @@ skip-if = os == 'android'
 [test_css-logic-getCssPath.html]
 [test_css-logic.html]
 [test_devtools_extensions.html]
+[test_dom_matrix_2d.html]
 [test_eventemitter_basic.html]
 skip-if = os == 'linux' && debug # Bug 1205739
--- a/devtools/shared/tests/mochitest/test_dom_matrix_2d.html
+++ b/devtools/shared/tests/mochitest/test_dom_matrix_2d.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+  Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html>
+  <!--
+  https://bugzilla.mozilla.org/show_bug.cgi?id=1297072
+  -->
+  <head>
+    <meta charset="utf8">
+    <title>Testing 2d matrix utility functions for DOM</title>
+
+    <script type="application/javascript"
+            src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+    <link rel="stylesheet" type="text/css"
+          href="chrome://mochikit/content/tests/SimpleTest/test.css">
+    <style>
+      #element {
+        position: absolute;
+        top: 20px;
+        left: 10px;
+        width: 320px;
+        height: 200px;
+        background: salmon;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="element"></div>
+
+    <script type="application/javascript">
+      "use strict";
+
+      const { utils: Cu } = Components;
+      const { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+      const {
+        getNodeTransformationMatrix,
+        getNodeTransformOrigin
+      } = require("devtools/shared/layout/dom-matrix-2d");
+
+      let element = document.getElementById("element");
+
+      testNodeTransformOrigin(element);
+      testNodeTransformationMatrix(element);
+
+      function testNodeTransformOrigin(node) {
+        isDeeply(getNodeTransformOrigin(node), [160, 100],
+          "Default Transform Origin is correct.");
+
+        node.style.transformOrigin = "left 10%";
+        isDeeply(getNodeTransformOrigin(node), [0, 20],
+          "Transform Origin is properly computed.");
+
+        node.style.transformOrigin = "invalid";
+        isDeeply(getNodeTransformOrigin(node), [0, 20],
+          "Invalid values are ignored.");
+
+        node.style.transformOrigin = "left 5px -3px";
+        isDeeply(getNodeTransformOrigin(node), [0, 5, -3],
+          "3D coordinates and negative numbers are properly computed.");
+      }
+
+      function testNodeTransformationMatrix(node) {
+        is(getNodeTransformationMatrix(node), null,
+          "Default Transformation Matrix is `null`");
+
+        node.style.transform = "translate(10%, 20px)";
+        isDeeply(getNodeTransformationMatrix(node), [ 1, 0, 32, 0, 1, 20, 0, 0, 1 ],
+          "Transformation Matrix properly computed with translation.");
+
+        node.style.transform = "translate(10%, 20px) scale(2)";
+        isDeeply(getNodeTransformationMatrix(node), [ 2, 0, 32, 0, 2, 20, 0, 0, 1 ],
+          "Transformation Matrix properly translated and scaled.");
+
+        node.style.transform = "scale(2) translate(10%, 20px)";
+        isDeeply(getNodeTransformationMatrix(node), [ 2, 0, 64, 0, 2, 40, 0, 0, 1 ],
+          "Transformation Matrix properly scaled and translated.");
+
+        node.style.transform = "translate3d(12px, 50%, 3em)";
+        isDeeply(getNodeTransformationMatrix(node), [ 1, 0, 12, 0, 1, 100, 0, 0, 1 ],
+          "3D Transformation Matrix are handled for 2D values.");
+      }
+    </script>
+  </body>
+</html>