browser/devtools/layoutview/test/browser_layoutview.js@6474c204b198
browser/devtools/layoutview/test/browser_layoutview.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 /* Any copyright is dedicated to the Public Domain.
2 http://creativecommons.org/publicdomain/zero/1.0/ */
4 // Expected values:
5 let res1 = [
6 {selector: "#element-size", value: "160x160"},
7 {selector: ".size > span", value: "100x100"},
8 {selector: ".margin.top > span", value: 30},
9 {selector: ".margin.left > span", value: "auto"},
10 {selector: ".margin.bottom > span", value: 30},
11 {selector: ".margin.right > span", value: "auto"},
12 {selector: ".padding.top > span", value: 20},
13 {selector: ".padding.left > span", value: 20},
14 {selector: ".padding.bottom > span", value: 20},
15 {selector: ".padding.right > span", value: 20},
16 {selector: ".border.top > span", value: 10},
17 {selector: ".border.left > span", value: 10},
18 {selector: ".border.bottom > span", value: 10},
19 {selector: ".border.right > span", value: 10},
20 ];
22 let res2 = [
23 {selector: "#element-size", value: "190x210"},
24 {selector: ".size > span", value: "100x150"},
25 {selector: ".margin.top > span", value: 30},
26 {selector: ".margin.left > span", value: "auto"},
27 {selector: ".margin.bottom > span", value: 30},
28 {selector: ".margin.right > span", value: "auto"},
29 {selector: ".padding.top > span", value: 20},
30 {selector: ".padding.left > span", value: 20},
31 {selector: ".padding.bottom > span", value: 20},
32 {selector: ".padding.right > span", value: 50},
33 {selector: ".border.top > span", value: 10},
34 {selector: ".border.left > span", value: 10},
35 {selector: ".border.bottom > span", value: 10},
36 {selector: ".border.right > span", value: 10},
37 ];
39 let inspector;
40 let view;
42 let test = asyncTest(function*() {
43 let style = "div { position: absolute; top: 42px; left: 42px; height: 100px; width: 100px; border: 10px solid black; padding: 20px; margin: 30px auto;}";
44 let html = "<style>" + style + "</style><div></div>"
46 let content = yield loadTab("data:text/html," + encodeURIComponent(html));
47 let node = content.document.querySelector("div");
48 ok(node, "node found");
50 let target = TargetFactory.forTab(gBrowser.selectedTab);
51 let toolbox = yield gDevTools.showToolbox(target, "inspector");
52 inspector = toolbox.getCurrentPanel();
54 info("Inspector open");
56 inspector.sidebar.select("layoutview");
57 yield inspector.sidebar.once("layoutview-ready");
59 inspector.selection.setNode(node);
60 yield inspector.once("inspector-updated");
62 info("Layout view ready");
64 view = inspector.sidebar.getWindowForTab("layoutview");
65 ok(!!view.layoutview, "LayoutView document is alive.");
67 yield runTests();
69 executeSoon(function() {
70 inspector._toolbox.destroy();
71 });
73 yield gDevTools.once("toolbox-destroyed");
74 });
76 addTest("Test that the initial values of the box model are correct",
77 function*() {
78 let viewdoc = view.document;
80 for (let i = 0; i < res1.length; i++) {
81 let elt = viewdoc.querySelector(res1[i].selector);
82 is(elt.textContent, res1[i].value, res1[i].selector + " has the right value.");
83 }
84 });
86 addTest("Test that changing the document updates the box model",
87 function*() {
88 let viewdoc = view.document;
90 inspector.selection.node.style.height = "150px";
91 inspector.selection.node.style.paddingRight = "50px";
93 yield waitForUpdate();
95 for (let i = 0; i < res2.length; i++) {
96 let elt = viewdoc.querySelector(res2[i].selector);
97 is(elt.textContent, res2[i].value, res2[i].selector + " has the right value after style update.");
98 }
99 });
101 addTest("Test that long labels on left/right are rotated 90 degrees",
102 function*() {
103 let viewdoc = view.document;
104 const LONG_TEXT_ROTATE_LIMIT = 3;
106 for (let i = 0; i < res1.length; i++) {
107 let elt = viewdoc.querySelector(res1[i].selector);
108 let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
109 let classList = elt.parentNode.classList
110 let canBeRotated = classList.contains("left") || classList.contains("right");
111 let isRotated = classList.contains("rotate");
113 is(canBeRotated && isLong, isRotated, res1[i].selector + " correctly rotated.");
114 }
115 });
