1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/layoutview/test/browser_layoutview.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,115 @@
1.4 +/* Any copyright is dedicated to the Public Domain.
1.5 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.6 +
1.7 +// Expected values:
1.8 +let res1 = [
1.9 + {selector: "#element-size", value: "160x160"},
1.10 + {selector: ".size > span", value: "100x100"},
1.11 + {selector: ".margin.top > span", value: 30},
1.12 + {selector: ".margin.left > span", value: "auto"},
1.13 + {selector: ".margin.bottom > span", value: 30},
1.14 + {selector: ".margin.right > span", value: "auto"},
1.15 + {selector: ".padding.top > span", value: 20},
1.16 + {selector: ".padding.left > span", value: 20},
1.17 + {selector: ".padding.bottom > span", value: 20},
1.18 + {selector: ".padding.right > span", value: 20},
1.19 + {selector: ".border.top > span", value: 10},
1.20 + {selector: ".border.left > span", value: 10},
1.21 + {selector: ".border.bottom > span", value: 10},
1.22 + {selector: ".border.right > span", value: 10},
1.23 +];
1.24 +
1.25 +let res2 = [
1.26 + {selector: "#element-size", value: "190x210"},
1.27 + {selector: ".size > span", value: "100x150"},
1.28 + {selector: ".margin.top > span", value: 30},
1.29 + {selector: ".margin.left > span", value: "auto"},
1.30 + {selector: ".margin.bottom > span", value: 30},
1.31 + {selector: ".margin.right > span", value: "auto"},
1.32 + {selector: ".padding.top > span", value: 20},
1.33 + {selector: ".padding.left > span", value: 20},
1.34 + {selector: ".padding.bottom > span", value: 20},
1.35 + {selector: ".padding.right > span", value: 50},
1.36 + {selector: ".border.top > span", value: 10},
1.37 + {selector: ".border.left > span", value: 10},
1.38 + {selector: ".border.bottom > span", value: 10},
1.39 + {selector: ".border.right > span", value: 10},
1.40 +];
1.41 +
1.42 +let inspector;
1.43 +let view;
1.44 +
1.45 +let test = asyncTest(function*() {
1.46 + let style = "div { position: absolute; top: 42px; left: 42px; height: 100px; width: 100px; border: 10px solid black; padding: 20px; margin: 30px auto;}";
1.47 + let html = "<style>" + style + "</style><div></div>"
1.48 +
1.49 + let content = yield loadTab("data:text/html," + encodeURIComponent(html));
1.50 + let node = content.document.querySelector("div");
1.51 + ok(node, "node found");
1.52 +
1.53 + let target = TargetFactory.forTab(gBrowser.selectedTab);
1.54 + let toolbox = yield gDevTools.showToolbox(target, "inspector");
1.55 + inspector = toolbox.getCurrentPanel();
1.56 +
1.57 + info("Inspector open");
1.58 +
1.59 + inspector.sidebar.select("layoutview");
1.60 + yield inspector.sidebar.once("layoutview-ready");
1.61 +
1.62 + inspector.selection.setNode(node);
1.63 + yield inspector.once("inspector-updated");
1.64 +
1.65 + info("Layout view ready");
1.66 +
1.67 + view = inspector.sidebar.getWindowForTab("layoutview");
1.68 + ok(!!view.layoutview, "LayoutView document is alive.");
1.69 +
1.70 + yield runTests();
1.71 +
1.72 + executeSoon(function() {
1.73 + inspector._toolbox.destroy();
1.74 + });
1.75 +
1.76 + yield gDevTools.once("toolbox-destroyed");
1.77 +});
1.78 +
1.79 +addTest("Test that the initial values of the box model are correct",
1.80 +function*() {
1.81 + let viewdoc = view.document;
1.82 +
1.83 + for (let i = 0; i < res1.length; i++) {
1.84 + let elt = viewdoc.querySelector(res1[i].selector);
1.85 + is(elt.textContent, res1[i].value, res1[i].selector + " has the right value.");
1.86 + }
1.87 +});
1.88 +
1.89 +addTest("Test that changing the document updates the box model",
1.90 +function*() {
1.91 + let viewdoc = view.document;
1.92 +
1.93 + inspector.selection.node.style.height = "150px";
1.94 + inspector.selection.node.style.paddingRight = "50px";
1.95 +
1.96 + yield waitForUpdate();
1.97 +
1.98 + for (let i = 0; i < res2.length; i++) {
1.99 + let elt = viewdoc.querySelector(res2[i].selector);
1.100 + is(elt.textContent, res2[i].value, res2[i].selector + " has the right value after style update.");
1.101 + }
1.102 +});
1.103 +
1.104 +addTest("Test that long labels on left/right are rotated 90 degrees",
1.105 +function*() {
1.106 + let viewdoc = view.document;
1.107 + const LONG_TEXT_ROTATE_LIMIT = 3;
1.108 +
1.109 + for (let i = 0; i < res1.length; i++) {
1.110 + let elt = viewdoc.querySelector(res1[i].selector);
1.111 + let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
1.112 + let classList = elt.parentNode.classList
1.113 + let canBeRotated = classList.contains("left") || classList.contains("right");
1.114 + let isRotated = classList.contains("rotate");
1.115 +
1.116 + is(canBeRotated && isLong, isRotated, res1[i].selector + " correctly rotated.");
1.117 + }
1.118 +});
