• file
• revisions
• annotate
• diff
• comparison
• raw

browser/devtools/layoutview/test/browser_layoutview.js@b8a032363ba2 (annotated)

browser/devtools/layoutview/test/browser_layoutview.js

Thu, 22 Jan 2015 13:21:57 +0100

author

Michael Schloh von Bennewitz <michael@schloh.com>

date

Thu, 22 Jan 2015 13:21:57 +0100

branch

TOR_BUG_9701

changeset 15

b8a032363ba2

permissions

-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

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