michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:    http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: // Expected values:
michael@0: let res1 = [
michael@0:       {selector: "#element-size",              value: "160x160"},
michael@0:       {selector: ".size > span",               value: "100x100"},
michael@0:       {selector: ".margin.top > span",         value: 30},
michael@0:       {selector: ".margin.left > span",        value: "auto"},
michael@0:       {selector: ".margin.bottom > span",      value: 30},
michael@0:       {selector: ".margin.right > span",       value: "auto"},
michael@0:       {selector: ".padding.top > span",        value: 20},
michael@0:       {selector: ".padding.left > span",       value: 20},
michael@0:       {selector: ".padding.bottom > span",     value: 20},
michael@0:       {selector: ".padding.right > span",      value: 20},
michael@0:       {selector: ".border.top > span",         value: 10},
michael@0:       {selector: ".border.left > span",        value: 10},
michael@0:       {selector: ".border.bottom > span",      value: 10},
michael@0:       {selector: ".border.right > span",       value: 10},
michael@0: ];
michael@0: 
michael@0: let res2 = [
michael@0:       {selector: "#element-size",              value: "190x210"},
michael@0:       {selector: ".size > span",               value: "100x150"},
michael@0:       {selector: ".margin.top > span",         value: 30},
michael@0:       {selector: ".margin.left > span",        value: "auto"},
michael@0:       {selector: ".margin.bottom > span",      value: 30},
michael@0:       {selector: ".margin.right > span",       value: "auto"},
michael@0:       {selector: ".padding.top > span",        value: 20},
michael@0:       {selector: ".padding.left > span",       value: 20},
michael@0:       {selector: ".padding.bottom > span",     value: 20},
michael@0:       {selector: ".padding.right > span",      value: 50},
michael@0:       {selector: ".border.top > span",         value: 10},
michael@0:       {selector: ".border.left > span",        value: 10},
michael@0:       {selector: ".border.bottom > span",      value: 10},
michael@0:       {selector: ".border.right > span",       value: 10},
michael@0: ];
michael@0: 
michael@0: let inspector;
michael@0: let view;
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   let style = "div { position: absolute; top: 42px; left: 42px; height: 100px; width: 100px; border: 10px solid black; padding: 20px; margin: 30px auto;}";
michael@0:   let html = "<style>" + style + "</style><div></div>"
michael@0: 
michael@0:   let content = yield loadTab("data:text/html," + encodeURIComponent(html));
michael@0:   let node = content.document.querySelector("div");
michael@0:   ok(node, "node found");
michael@0: 
michael@0:   let target = TargetFactory.forTab(gBrowser.selectedTab);
michael@0:   let toolbox = yield gDevTools.showToolbox(target, "inspector");
michael@0:   inspector = toolbox.getCurrentPanel();
michael@0: 
michael@0:   info("Inspector open");
michael@0: 
michael@0:   inspector.sidebar.select("layoutview");
michael@0:   yield inspector.sidebar.once("layoutview-ready");
michael@0: 
michael@0:   inspector.selection.setNode(node);
michael@0:   yield inspector.once("inspector-updated");
michael@0: 
michael@0:   info("Layout view ready");
michael@0: 
michael@0:   view = inspector.sidebar.getWindowForTab("layoutview");
michael@0:   ok(!!view.layoutview, "LayoutView document is alive.");
michael@0: 
michael@0:   yield runTests();
michael@0: 
michael@0:   executeSoon(function() {
michael@0:     inspector._toolbox.destroy();
michael@0:   });
michael@0: 
michael@0:   yield gDevTools.once("toolbox-destroyed");
michael@0: });
michael@0: 
michael@0: addTest("Test that the initial values of the box model are correct",
michael@0: function*() {
michael@0:   let viewdoc = view.document;
michael@0: 
michael@0:   for (let i = 0; i < res1.length; i++) {
michael@0:     let elt = viewdoc.querySelector(res1[i].selector);
michael@0:     is(elt.textContent, res1[i].value, res1[i].selector + " has the right value.");
michael@0:   }
michael@0: });
michael@0: 
michael@0: addTest("Test that changing the document updates the box model",
michael@0: function*() {
michael@0:   let viewdoc = view.document;
michael@0: 
michael@0:   inspector.selection.node.style.height = "150px";
michael@0:   inspector.selection.node.style.paddingRight = "50px";
michael@0: 
michael@0:   yield waitForUpdate();
michael@0: 
michael@0:   for (let i = 0; i < res2.length; i++) {
michael@0:     let elt = viewdoc.querySelector(res2[i].selector);
michael@0:     is(elt.textContent, res2[i].value, res2[i].selector + " has the right value after style update.");
michael@0:   }
michael@0: });
michael@0: 
michael@0: addTest("Test that long labels on left/right are rotated 90 degrees",
michael@0: function*() {
michael@0:   let viewdoc = view.document;
michael@0:   const LONG_TEXT_ROTATE_LIMIT = 3;
michael@0: 
michael@0:   for (let i = 0; i < res1.length; i++) {
michael@0:     let elt = viewdoc.querySelector(res1[i].selector);
michael@0:     let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
michael@0:     let classList = elt.parentNode.classList
michael@0:     let canBeRotated = classList.contains("left") || classList.contains("right");
michael@0:     let isRotated = classList.contains("rotate");
michael@0: 
michael@0:     is(canBeRotated && isLong, isRotated, res1[i].selector + " correctly rotated.");
michael@0:   }
michael@0: });