browser/devtools/inspector/test/browser_inspector_highlighter.js@6474c204b198
browser/devtools/inspector/test/browser_inspector_highlighter.js
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/. */
7 let doc;
8 let h1;
9 let inspector;
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);
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 }
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 });
66 EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
67 }
69 function testBoxModelDimensions() {
70 let h1Dims = h1.getBoundingClientRect();
71 let h1Width = Math.ceil(h1Dims.width);
72 let h1Height = Math.ceil(h1Dims.height);
74 let outlineDims = getSimpleBorderRect();
75 let outlineWidth = Math.ceil(outlineDims.width);
76 let outlineHeight = Math.ceil(outlineDims.height);
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)");
82 // zoom the page by a factor of 2
83 let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
84 .QueryInterface(Ci.nsIMarkupDocumentViewer);
85 contentViewer.fullZoom = 2;
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);
94 let outlineDims = getSimpleBorderRect();
95 let outlineWidth = Math.floor(outlineDims.width);
96 let outlineHeight = Math.floor(outlineDims.height);
98 is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
100 is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
102 executeSoon(finishUp);
103 }
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 }
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);
124 content.location = "data:text/html;charset=utf-8,browser_inspector_highlighter.js";
125 }
