michael@0: /* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
michael@0: /* vim: set ts=2 et sw=2 tw=80: */
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: let doc;
michael@0: let h1;
michael@0: let inspector;
michael@0: 
michael@0: function createDocument() {
michael@0:   let div = doc.createElement("div");
michael@0:   h1 = doc.createElement("h1");
michael@0:   let p1 = doc.createElement("p");
michael@0:   let p2 = doc.createElement("p");
michael@0:   let div2 = doc.createElement("div");
michael@0:   let p3 = doc.createElement("p");
michael@0:   doc.title = "Inspector Highlighter Meatballs";
michael@0:   h1.textContent = "Inspector Tree Selection Test";
michael@0:   p1.textContent = "This is some example text";
michael@0:   p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
michael@0:     "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
michael@0:     "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
michael@0:     "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
michael@0:     "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
michael@0:     "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
michael@0:     "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
michael@0:   p3.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
michael@0:     "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
michael@0:     "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
michael@0:     "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
michael@0:     "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
michael@0:     "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
michael@0:     "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
michael@0:   let div3 = doc.createElement("div");
michael@0:   div3.id = "checkOutThisWickedSpread";
michael@0:   div3.setAttribute("style", "position: absolute; top: 20px; right: 20px; height: 20px; width: 20px; background-color: yellow; border: 1px dashed black;");
michael@0:   let p4 = doc.createElement("p");
michael@0:   p4.setAttribute("style", "font-weight: 200; font-size: 8px; text-align: center;");
michael@0:   p4.textContent = "Smörgåsbord!";
michael@0:   div.appendChild(h1);
michael@0:   div.appendChild(p1);
michael@0:   div.appendChild(p2);
michael@0:   div2.appendChild(p3);
michael@0:   div3.appendChild(p4);
michael@0:   doc.body.appendChild(div);
michael@0:   doc.body.appendChild(div2);
michael@0:   doc.body.appendChild(div3);
michael@0: 
michael@0:   openInspector(aInspector => {
michael@0:     inspector = aInspector;
michael@0:     inspector.selection.setNode(div, null);
michael@0:     inspector.once("inspector-updated", () => {
michael@0:       inspector.toolbox.highlighterUtils.startPicker().then(testMouseOverH1Highlights);
michael@0:     });
michael@0:   });
michael@0: }
michael@0: 
michael@0: function testMouseOverH1Highlights() {
michael@0:   inspector.toolbox.once("highlighter-ready", () => {
michael@0:     ok(isHighlighting(), "Highlighter is shown");
michael@0:     is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
michael@0:     testBoxModelDimensions();
michael@0:   });
michael@0: 
michael@0:   EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
michael@0: }
michael@0: 
michael@0: function testBoxModelDimensions() {
michael@0:   let h1Dims = h1.getBoundingClientRect();
michael@0:   let h1Width = Math.ceil(h1Dims.width);
michael@0:   let h1Height = Math.ceil(h1Dims.height);
michael@0: 
michael@0:   let outlineDims = getSimpleBorderRect();
michael@0:   let outlineWidth = Math.ceil(outlineDims.width);
michael@0:   let outlineHeight = Math.ceil(outlineDims.height);
michael@0: 
michael@0:   // Disabled due to bug 716245
michael@0:   is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)");
michael@0:   is(outlineHeight, h1Height, "outline height matches dimensions of element (no zoom)");
michael@0: 
michael@0:   // zoom the page by a factor of 2
michael@0:   let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
michael@0:                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
michael@0:   contentViewer.fullZoom = 2;
michael@0: 
michael@0:   // simulate the zoomed dimensions of the div element
michael@0:   let h1Dims = h1.getBoundingClientRect();
michael@0:   // There seems to be some very minor differences in the floats, so let's
michael@0:   // floor the values
michael@0:   let h1Width = Math.floor(h1Dims.width * contentViewer.fullZoom);
michael@0:   let h1Height = Math.floor(h1Dims.height * contentViewer.fullZoom);
michael@0: 
michael@0:   let outlineDims = getSimpleBorderRect();
michael@0:   let outlineWidth = Math.floor(outlineDims.width);
michael@0:   let outlineHeight = Math.floor(outlineDims.height);
michael@0: 
michael@0:   is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
michael@0: 
michael@0:   is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
michael@0: 
michael@0:   executeSoon(finishUp);
michael@0: }
michael@0: 
michael@0: function finishUp() {
michael@0:   inspector.toolbox.highlighterUtils.stopPicker().then(() => {
michael@0:     doc = h1 = inspector = null;
michael@0:     let target = TargetFactory.forTab(gBrowser.selectedTab);
michael@0:     gDevTools.closeToolbox(target);
michael@0:     gBrowser.removeCurrentTab();
michael@0:     finish();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function test() {
michael@0:   waitForExplicitFinish();
michael@0:   gBrowser.selectedTab = gBrowser.addTab();
michael@0:   gBrowser.selectedBrowser.addEventListener("load", function() {
michael@0:     gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
michael@0:     doc = content.document;
michael@0:     waitForFocus(createDocument, content);
michael@0:   }, true);
michael@0: 
michael@0:   content.location = "data:text/html;charset=utf-8,browser_inspector_highlighter.js";
michael@0: }