1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,125 @@
1.4 +/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
1.5 +/* vim: set ts=2 et sw=2 tw=80: */
1.6 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.7 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.8 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.9 +
1.10 +let doc;
1.11 +let h1;
1.12 +let inspector;
1.13 +
1.14 +function createDocument() {
1.15 + let div = doc.createElement("div");
1.16 + h1 = doc.createElement("h1");
1.17 + let p1 = doc.createElement("p");
1.18 + let p2 = doc.createElement("p");
1.19 + let div2 = doc.createElement("div");
1.20 + let p3 = doc.createElement("p");
1.21 + doc.title = "Inspector Highlighter Meatballs";
1.22 + h1.textContent = "Inspector Tree Selection Test";
1.23 + p1.textContent = "This is some example text";
1.24 + p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
1.25 + "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
1.26 + "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
1.27 + "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
1.28 + "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
1.29 + "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
1.30 + "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
1.31 + p3.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
1.32 + "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
1.33 + "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
1.34 + "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
1.35 + "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
1.36 + "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
1.37 + "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
1.38 + let div3 = doc.createElement("div");
1.39 + div3.id = "checkOutThisWickedSpread";
1.40 + div3.setAttribute("style", "position: absolute; top: 20px; right: 20px; height: 20px; width: 20px; background-color: yellow; border: 1px dashed black;");
1.41 + let p4 = doc.createElement("p");
1.42 + p4.setAttribute("style", "font-weight: 200; font-size: 8px; text-align: center;");
1.43 + p4.textContent = "Smörgåsbord!";
1.44 + div.appendChild(h1);
1.45 + div.appendChild(p1);
1.46 + div.appendChild(p2);
1.47 + div2.appendChild(p3);
1.48 + div3.appendChild(p4);
1.49 + doc.body.appendChild(div);
1.50 + doc.body.appendChild(div2);
1.51 + doc.body.appendChild(div3);
1.52 +
1.53 + openInspector(aInspector => {
1.54 + inspector = aInspector;
1.55 + inspector.selection.setNode(div, null);
1.56 + inspector.once("inspector-updated", () => {
1.57 + inspector.toolbox.highlighterUtils.startPicker().then(testMouseOverH1Highlights);
1.58 + });
1.59 + });
1.60 +}
1.61 +
1.62 +function testMouseOverH1Highlights() {
1.63 + inspector.toolbox.once("highlighter-ready", () => {
1.64 + ok(isHighlighting(), "Highlighter is shown");
1.65 + is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
1.66 + testBoxModelDimensions();
1.67 + });
1.68 +
1.69 + EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
1.70 +}
1.71 +
1.72 +function testBoxModelDimensions() {
1.73 + let h1Dims = h1.getBoundingClientRect();
1.74 + let h1Width = Math.ceil(h1Dims.width);
1.75 + let h1Height = Math.ceil(h1Dims.height);
1.76 +
1.77 + let outlineDims = getSimpleBorderRect();
1.78 + let outlineWidth = Math.ceil(outlineDims.width);
1.79 + let outlineHeight = Math.ceil(outlineDims.height);
1.80 +
1.81 + // Disabled due to bug 716245
1.82 + is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)");
1.83 + is(outlineHeight, h1Height, "outline height matches dimensions of element (no zoom)");
1.84 +
1.85 + // zoom the page by a factor of 2
1.86 + let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
1.87 + .QueryInterface(Ci.nsIMarkupDocumentViewer);
1.88 + contentViewer.fullZoom = 2;
1.89 +
1.90 + // simulate the zoomed dimensions of the div element
1.91 + let h1Dims = h1.getBoundingClientRect();
1.92 + // There seems to be some very minor differences in the floats, so let's
1.93 + // floor the values
1.94 + let h1Width = Math.floor(h1Dims.width * contentViewer.fullZoom);
1.95 + let h1Height = Math.floor(h1Dims.height * contentViewer.fullZoom);
1.96 +
1.97 + let outlineDims = getSimpleBorderRect();
1.98 + let outlineWidth = Math.floor(outlineDims.width);
1.99 + let outlineHeight = Math.floor(outlineDims.height);
1.100 +
1.101 + is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
1.102 +
1.103 + is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
1.104 +
1.105 + executeSoon(finishUp);
1.106 +}
1.107 +
1.108 +function finishUp() {
1.109 + inspector.toolbox.highlighterUtils.stopPicker().then(() => {
1.110 + doc = h1 = inspector = null;
1.111 + let target = TargetFactory.forTab(gBrowser.selectedTab);
1.112 + gDevTools.closeToolbox(target);
1.113 + gBrowser.removeCurrentTab();
1.114 + finish();
1.115 + });
1.116 +}
1.117 +
1.118 +function test() {
1.119 + waitForExplicitFinish();
1.120 + gBrowser.selectedTab = gBrowser.addTab();
1.121 + gBrowser.selectedBrowser.addEventListener("load", function() {
1.122 + gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
1.123 + doc = content.document;
1.124 + waitForFocus(createDocument, content);
1.125 + }, true);
1.126 +
1.127 + content.location = "data:text/html;charset=utf-8,browser_inspector_highlighter.js";
1.128 +}
