The Tor Browser / file comparison
comparison: browser/devtools/shared/test/browser_csstransformpreview.js
browser/devtools/shared/test/browser_csstransformpreview.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:253e9482bd7b |
|---|---|
| 1 /* vim: set ts=2 et sw=2 tw=80: */ | |
| 2 /* Any copyright is dedicated to the Public Domain. | |
| 3 http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| 4 | |
| 5 // Tests that the spectrum color picker works correctly | |
| 6 | |
| 7 const TEST_URI = "data:text/html;charset=utf-8,<div></div>"; | |
| 8 const {CSSTransformPreviewer} = devtools.require("devtools/shared/widgets/CSSTransformPreviewer"); | |
| 9 | |
| 10 let doc, root; | |
| 11 | |
| 12 function test() { | |
| 13 waitForExplicitFinish(); | |
| 14 addTab(TEST_URI, () => { | |
| 15 doc = content.document; | |
| 16 root = doc.querySelector("div"); | |
| 17 startTests(); | |
| 18 }); | |
| 19 } | |
| 20 | |
| 21 function endTests() { | |
| 22 doc = root = null; | |
| 23 gBrowser.removeCurrentTab(); | |
| 24 finish(); | |
| 25 } | |
| 26 | |
| 27 function startTests() { | |
| 28 testCreateAndDestroyShouldAppendAndRemoveElements(); | |
| 29 } | |
| 30 | |
| 31 function testCreateAndDestroyShouldAppendAndRemoveElements() { | |
| 32 ok(root, "We have the root node to append the preview to"); | |
| 33 is(root.childElementCount, 0, "Root node is empty"); | |
| 34 | |
| 35 let p = new CSSTransformPreviewer(root); | |
| 36 p.preview("matrix(1, -0.2, 0, 1, 0, 0)"); | |
| 37 ok(root.childElementCount > 0, "Preview has appended elements"); | |
| 38 ok(root.querySelector("canvas"), "Canvas preview element is here"); | |
| 39 | |
| 40 p.destroy(); | |
| 41 is(root.childElementCount, 0, "Destroying preview removed all nodes"); | |
| 42 | |
| 43 testCanvasDimensionIsConstrainedByMaxDim(); | |
| 44 } | |
| 45 | |
| 46 function testCanvasDimensionIsConstrainedByMaxDim() { | |
| 47 let p = new CSSTransformPreviewer(root); | |
| 48 p.MAX_DIM = 500; | |
| 49 p.preview("scale(1)", "center", 1000, 1000); | |
| 50 | |
| 51 let canvas = root.querySelector("canvas"); | |
| 52 is(canvas.width, 500, "Canvas width is correct"); | |
| 53 is(canvas.height, 500, "Canvas height is correct"); | |
| 54 | |
| 55 p.destroy(); | |
| 56 | |
| 57 testCallingPreviewSeveralTimesReusesTheSameCanvas(); | |
| 58 } | |
| 59 | |
| 60 function testCallingPreviewSeveralTimesReusesTheSameCanvas() { | |
| 61 let p = new CSSTransformPreviewer(root); | |
| 62 | |
| 63 p.preview("scale(1)", "center", 1000, 1000); | |
| 64 let canvas = root.querySelector("canvas"); | |
| 65 | |
| 66 p.preview("rotate(90deg)"); | |
| 67 let canvases = root.querySelectorAll("canvas"); | |
| 68 is(canvases.length, 1, "Still one canvas element"); | |
| 69 is(canvases[0], canvas, "Still the same canvas element"); | |
| 70 p.destroy(); | |
| 71 | |
| 72 testCanvasDimensionAreCorrect(); | |
| 73 } | |
| 74 | |
| 75 function testCanvasDimensionAreCorrect() { | |
| 76 // Only test a few simple transformations | |
| 77 let p = new CSSTransformPreviewer(root); | |
| 78 | |
| 79 // Make sure we have a square | |
| 80 let w = 200, h = w; | |
| 81 p.MAX_DIM = w; | |
| 82 | |
| 83 // We can't test the content of the canvas here, just that, given a max width | |
| 84 // the aspect ratio of the canvas seems correct. | |
| 85 | |
| 86 // Translate a square by its width, should be a rectangle | |
| 87 p.preview("translateX(200px)", "center", w, h); | |
| 88 let canvas = root.querySelector("canvas"); | |
| 89 is(canvas.width, w, "width is correct"); | |
| 90 is(canvas.height, h/2, "height is half of the width"); | |
| 91 | |
| 92 // Rotate on the top right corner, should be a rectangle | |
| 93 p.preview("rotate(-90deg)", "top right", w, h); | |
| 94 is(canvas.width, w, "width is correct"); | |
| 95 is(canvas.height, h/2, "height is half of the width"); | |
| 96 | |
| 97 // Rotate on the bottom left corner, should be a rectangle | |
| 98 p.preview("rotate(90deg)", "top right", w, h); | |
| 99 is(canvas.width, w/2, "width is half of the height"); | |
| 100 is(canvas.height, h, "height is correct"); | |
| 101 | |
| 102 // Scale from center, should still be a square | |
| 103 p.preview("scale(2)", "center", w, h); | |
| 104 is(canvas.width, w, "width is correct"); | |
| 105 is(canvas.height, h, "height is correct"); | |
| 106 | |
| 107 // Skew from center, 45deg, should be a rectangle | |
| 108 p.preview("skew(45deg)", "center", w, h); | |
| 109 is(canvas.width, w, "width is correct"); | |
| 110 is(canvas.height, h/2, "height is half of the height"); | |
| 111 | |
| 112 p.destroy(); | |
| 113 | |
| 114 testPreviewingInvalidTransformReturnsFalse(); | |
| 115 } | |
| 116 | |
| 117 function testPreviewingInvalidTransformReturnsFalse() { | |
| 118 let p = new CSSTransformPreviewer(root); | |
| 119 ok(!p.preview("veryWow(muchPx) suchTransform(soDeg)"), "Returned false for invalid transform"); | |
| 120 ok(!p.preview("rotae(3deg)"), "Returned false for invalid transform"); | |
| 121 | |
| 122 // Verify the canvas is empty by checking the image data | |
| 123 let canvas = root.querySelector("canvas"), ctx = canvas.getContext("2d"); | |
| 124 let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; | |
| 125 for (let i = 0, n = data.length; i < n; i += 4) { | |
| 126 // Let's not log 250*250*4 asserts! Instead, just log when it fails | |
| 127 let red = data[i]; | |
| 128 let green = data[i + 1]; | |
| 129 let blue = data[i + 2]; | |
| 130 let alpha = data[i + 3]; | |
| 131 if (red !== 0 || green !== 0 || blue !== 0 || alpha !== 0) { | |
| 132 ok(false, "Image data is not empty after an invalid transformed was previewed"); | |
| 133 break; | |
| 134 } | |
| 135 } | |
| 136 | |
| 137 is(p.preview("translateX(30px)"), true, "Returned true for a valid transform"); | |
| 138 endTests(); | |
| 139 } |
