1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/shared/test/browser_csstransformpreview.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,139 @@
1.4 +/* vim: set ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +// Tests that the spectrum color picker works correctly
1.9 +
1.10 +const TEST_URI = "data:text/html;charset=utf-8,<div></div>";
1.11 +const {CSSTransformPreviewer} = devtools.require("devtools/shared/widgets/CSSTransformPreviewer");
1.12 +
1.13 +let doc, root;
1.14 +
1.15 +function test() {
1.16 + waitForExplicitFinish();
1.17 + addTab(TEST_URI, () => {
1.18 + doc = content.document;
1.19 + root = doc.querySelector("div");
1.20 + startTests();
1.21 + });
1.22 +}
1.23 +
1.24 +function endTests() {
1.25 + doc = root = null;
1.26 + gBrowser.removeCurrentTab();
1.27 + finish();
1.28 +}
1.29 +
1.30 +function startTests() {
1.31 + testCreateAndDestroyShouldAppendAndRemoveElements();
1.32 +}
1.33 +
1.34 +function testCreateAndDestroyShouldAppendAndRemoveElements() {
1.35 + ok(root, "We have the root node to append the preview to");
1.36 + is(root.childElementCount, 0, "Root node is empty");
1.37 +
1.38 + let p = new CSSTransformPreviewer(root);
1.39 + p.preview("matrix(1, -0.2, 0, 1, 0, 0)");
1.40 + ok(root.childElementCount > 0, "Preview has appended elements");
1.41 + ok(root.querySelector("canvas"), "Canvas preview element is here");
1.42 +
1.43 + p.destroy();
1.44 + is(root.childElementCount, 0, "Destroying preview removed all nodes");
1.45 +
1.46 + testCanvasDimensionIsConstrainedByMaxDim();
1.47 +}
1.48 +
1.49 +function testCanvasDimensionIsConstrainedByMaxDim() {
1.50 + let p = new CSSTransformPreviewer(root);
1.51 + p.MAX_DIM = 500;
1.52 + p.preview("scale(1)", "center", 1000, 1000);
1.53 +
1.54 + let canvas = root.querySelector("canvas");
1.55 + is(canvas.width, 500, "Canvas width is correct");
1.56 + is(canvas.height, 500, "Canvas height is correct");
1.57 +
1.58 + p.destroy();
1.59 +
1.60 + testCallingPreviewSeveralTimesReusesTheSameCanvas();
1.61 +}
1.62 +
1.63 +function testCallingPreviewSeveralTimesReusesTheSameCanvas() {
1.64 + let p = new CSSTransformPreviewer(root);
1.65 +
1.66 + p.preview("scale(1)", "center", 1000, 1000);
1.67 + let canvas = root.querySelector("canvas");
1.68 +
1.69 + p.preview("rotate(90deg)");
1.70 + let canvases = root.querySelectorAll("canvas");
1.71 + is(canvases.length, 1, "Still one canvas element");
1.72 + is(canvases[0], canvas, "Still the same canvas element");
1.73 + p.destroy();
1.74 +
1.75 + testCanvasDimensionAreCorrect();
1.76 +}
1.77 +
1.78 +function testCanvasDimensionAreCorrect() {
1.79 + // Only test a few simple transformations
1.80 + let p = new CSSTransformPreviewer(root);
1.81 +
1.82 + // Make sure we have a square
1.83 + let w = 200, h = w;
1.84 + p.MAX_DIM = w;
1.85 +
1.86 + // We can't test the content of the canvas here, just that, given a max width
1.87 + // the aspect ratio of the canvas seems correct.
1.88 +
1.89 + // Translate a square by its width, should be a rectangle
1.90 + p.preview("translateX(200px)", "center", w, h);
1.91 + let canvas = root.querySelector("canvas");
1.92 + is(canvas.width, w, "width is correct");
1.93 + is(canvas.height, h/2, "height is half of the width");
1.94 +
1.95 + // Rotate on the top right corner, should be a rectangle
1.96 + p.preview("rotate(-90deg)", "top right", w, h);
1.97 + is(canvas.width, w, "width is correct");
1.98 + is(canvas.height, h/2, "height is half of the width");
1.99 +
1.100 + // Rotate on the bottom left corner, should be a rectangle
1.101 + p.preview("rotate(90deg)", "top right", w, h);
1.102 + is(canvas.width, w/2, "width is half of the height");
1.103 + is(canvas.height, h, "height is correct");
1.104 +
1.105 + // Scale from center, should still be a square
1.106 + p.preview("scale(2)", "center", w, h);
1.107 + is(canvas.width, w, "width is correct");
1.108 + is(canvas.height, h, "height is correct");
1.109 +
1.110 + // Skew from center, 45deg, should be a rectangle
1.111 + p.preview("skew(45deg)", "center", w, h);
1.112 + is(canvas.width, w, "width is correct");
1.113 + is(canvas.height, h/2, "height is half of the height");
1.114 +
1.115 + p.destroy();
1.116 +
1.117 + testPreviewingInvalidTransformReturnsFalse();
1.118 +}
1.119 +
1.120 +function testPreviewingInvalidTransformReturnsFalse() {
1.121 + let p = new CSSTransformPreviewer(root);
1.122 + ok(!p.preview("veryWow(muchPx) suchTransform(soDeg)"), "Returned false for invalid transform");
1.123 + ok(!p.preview("rotae(3deg)"), "Returned false for invalid transform");
1.124 +
1.125 + // Verify the canvas is empty by checking the image data
1.126 + let canvas = root.querySelector("canvas"), ctx = canvas.getContext("2d");
1.127 + let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
1.128 + for (let i = 0, n = data.length; i < n; i += 4) {
1.129 + // Let's not log 250*250*4 asserts! Instead, just log when it fails
1.130 + let red = data[i];
1.131 + let green = data[i + 1];
1.132 + let blue = data[i + 2];
1.133 + let alpha = data[i + 3];
1.134 + if (red !== 0 || green !== 0 || blue !== 0 || alpha !== 0) {
1.135 + ok(false, "Image data is not empty after an invalid transformed was previewed");
1.136 + break;
1.137 + }
1.138 + }
1.139 +
1.140 + is(p.preview("translateX(30px)"), true, "Returned true for a valid transform");
1.141 + endTests();
1.142 +}
