The Tor Browser / file comparison
comparison: browser/devtools/inspector/test/browser_inspector_highlighter.js
browser/devtools/inspector/test/browser_inspector_highlighter.js
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a9d683f79cb7 |
|---|---|
| 1 /* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ | |
| 2 /* vim: set ts=2 et sw=2 tw=80: */ | |
| 3 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 4 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 5 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 6 | |
| 7 let doc; | |
| 8 let h1; | |
| 9 let inspector; | |
| 10 | |
| 11 function createDocument() { | |
| 12 let div = doc.createElement("div"); | |
| 13 h1 = doc.createElement("h1"); | |
| 14 let p1 = doc.createElement("p"); | |
| 15 let p2 = doc.createElement("p"); | |
| 16 let div2 = doc.createElement("div"); | |
| 17 let p3 = doc.createElement("p"); | |
| 18 doc.title = "Inspector Highlighter Meatballs"; | |
| 19 h1.textContent = "Inspector Tree Selection Test"; | |
| 20 p1.textContent = "This is some example text"; | |
| 21 p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " + | |
| 22 "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " + | |
| 23 "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " + | |
| 24 "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " + | |
| 25 "dolor in reprehenderit in voluptate velit esse cillum dolore eu " + | |
| 26 "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " + | |
| 27 "proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; | |
| 28 p3.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " + | |
| 29 "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " + | |
| 30 "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " + | |
| 31 "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " + | |
| 32 "dolor in reprehenderit in voluptate velit esse cillum dolore eu " + | |
| 33 "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " + | |
| 34 "proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; | |
| 35 let div3 = doc.createElement("div"); | |
| 36 div3.id = "checkOutThisWickedSpread"; | |
| 37 div3.setAttribute("style", "position: absolute; top: 20px; right: 20px; height: 20px; width: 20px; background-color: yellow; border: 1px dashed black;"); | |
| 38 let p4 = doc.createElement("p"); | |
| 39 p4.setAttribute("style", "font-weight: 200; font-size: 8px; text-align: center;"); | |
| 40 p4.textContent = "Smörgåsbord!"; | |
| 41 div.appendChild(h1); | |
| 42 div.appendChild(p1); | |
| 43 div.appendChild(p2); | |
| 44 div2.appendChild(p3); | |
| 45 div3.appendChild(p4); | |
| 46 doc.body.appendChild(div); | |
| 47 doc.body.appendChild(div2); | |
| 48 doc.body.appendChild(div3); | |
| 49 | |
| 50 openInspector(aInspector => { | |
| 51 inspector = aInspector; | |
| 52 inspector.selection.setNode(div, null); | |
| 53 inspector.once("inspector-updated", () => { | |
| 54 inspector.toolbox.highlighterUtils.startPicker().then(testMouseOverH1Highlights); | |
| 55 }); | |
| 56 }); | |
| 57 } | |
| 58 | |
| 59 function testMouseOverH1Highlights() { | |
| 60 inspector.toolbox.once("highlighter-ready", () => { | |
| 61 ok(isHighlighting(), "Highlighter is shown"); | |
| 62 is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node"); | |
| 63 testBoxModelDimensions(); | |
| 64 }); | |
| 65 | |
| 66 EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content); | |
| 67 } | |
| 68 | |
| 69 function testBoxModelDimensions() { | |
| 70 let h1Dims = h1.getBoundingClientRect(); | |
| 71 let h1Width = Math.ceil(h1Dims.width); | |
| 72 let h1Height = Math.ceil(h1Dims.height); | |
| 73 | |
| 74 let outlineDims = getSimpleBorderRect(); | |
| 75 let outlineWidth = Math.ceil(outlineDims.width); | |
| 76 let outlineHeight = Math.ceil(outlineDims.height); | |
| 77 | |
| 78 // Disabled due to bug 716245 | |
| 79 is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)"); | |
| 80 is(outlineHeight, h1Height, "outline height matches dimensions of element (no zoom)"); | |
| 81 | |
| 82 // zoom the page by a factor of 2 | |
| 83 let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer | |
| 84 .QueryInterface(Ci.nsIMarkupDocumentViewer); | |
| 85 contentViewer.fullZoom = 2; | |
| 86 | |
| 87 // simulate the zoomed dimensions of the div element | |
| 88 let h1Dims = h1.getBoundingClientRect(); | |
| 89 // There seems to be some very minor differences in the floats, so let's | |
| 90 // floor the values | |
| 91 let h1Width = Math.floor(h1Dims.width * contentViewer.fullZoom); | |
| 92 let h1Height = Math.floor(h1Dims.height * contentViewer.fullZoom); | |
| 93 | |
| 94 let outlineDims = getSimpleBorderRect(); | |
| 95 let outlineWidth = Math.floor(outlineDims.width); | |
| 96 let outlineHeight = Math.floor(outlineDims.height); | |
| 97 | |
| 98 is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)"); | |
| 99 | |
| 100 is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)"); | |
| 101 | |
| 102 executeSoon(finishUp); | |
| 103 } | |
| 104 | |
| 105 function finishUp() { | |
| 106 inspector.toolbox.highlighterUtils.stopPicker().then(() => { | |
| 107 doc = h1 = inspector = null; | |
| 108 let target = TargetFactory.forTab(gBrowser.selectedTab); | |
| 109 gDevTools.closeToolbox(target); | |
| 110 gBrowser.removeCurrentTab(); | |
| 111 finish(); | |
| 112 }); | |
| 113 } | |
| 114 | |
| 115 function test() { | |
| 116 waitForExplicitFinish(); | |
| 117 gBrowser.selectedTab = gBrowser.addTab(); | |
| 118 gBrowser.selectedBrowser.addEventListener("load", function() { | |
| 119 gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true); | |
| 120 doc = content.document; | |
| 121 waitForFocus(createDocument, content); | |
| 122 }, true); | |
| 123 | |
| 124 content.location = "data:text/html;charset=utf-8,browser_inspector_highlighter.js"; | |
| 125 } |
