Bug 1359522 - added test_dom_matrix_2d.html; r=gregtatum

MozReview-Commit-ID: 9HHOdFg78He
This commit is contained in:
Matteo Ferretti 2017-05-03 20:50:09 +02:00
Родитель 5b891c93dd
Коммит cb85a61c17
2 изменённых файлов: 89 добавлений и 0 удалений

Просмотреть файл

@ -5,5 +5,6 @@ skip-if = os == 'android'
[test_css-logic-getCssPath.html] [test_css-logic-getCssPath.html]
[test_css-logic.html] [test_css-logic.html]
[test_devtools_extensions.html] [test_devtools_extensions.html]
[test_dom_matrix_2d.html]
[test_eventemitter_basic.html] [test_eventemitter_basic.html]
skip-if = os == 'linux' && debug # Bug 1205739 skip-if = os == 'linux' && debug # Bug 1205739

Просмотреть файл

@ -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>