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

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

browser/devtools/layoutview/test/browser_editablemodel.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	function getStyle(node, property) {
michael@0	5	return node.style.getPropertyValue(property);
michael@0	6	}
michael@0	7
michael@0	8	let doc;
michael@0	9	let inspector;
michael@0	10
michael@0	11	let test = asyncTest(function*() {
michael@0	12	let style = "div { margin: 10px; padding: 3px } #div1 { margin-top: 5px } #div2 { border-bottom: 1em solid black; } #div3 { padding: 2em; }";
michael@0	13	let html = "<style>" + style + "</style><div id='div1'></div><div id='div2'></div><div id='div3'></div>"
michael@0	14
michael@0	15	let content = yield loadTab("data:text/html," + encodeURIComponent(html));
michael@0	16	doc = content.document;
michael@0	17
michael@0	18	let target = TargetFactory.forTab(gBrowser.selectedTab);
michael@0	19	let toolbox = yield gDevTools.showToolbox(target, "inspector");
michael@0	20	inspector = toolbox.getCurrentPanel();
michael@0	21
michael@0	22	inspector.sidebar.select("layoutview");
michael@0	23	yield inspector.sidebar.once("layoutview-ready");
michael@0	24	yield runTests();
michael@0	25	// TODO: Closing the toolbox in this test leaks - bug 994314
michael@0	26	// yield gDevTools.closeToolbox(target);
michael@0	27	});
michael@0	28
michael@0	29	addTest("Test that editing margin dynamically updates the document, pressing escape cancels the changes",
michael@0	30	function*() {
michael@0	31	let node = doc.getElementById("div1");
michael@0	32	is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
michael@0	33	let view = yield selectNode(node);
michael@0	34
michael@0	35	let span = view.document.querySelector(".margin.top > span");
michael@0	36	is(span.textContent, 5, "Should have the right value in the box model.");
michael@0	37
michael@0	38	EventUtils.synthesizeMouseAtCenter(span, {}, view);
michael@0	39	let editor = view.document.querySelector(".styleinspector-propertyeditor");
michael@0	40	ok(editor, "Should have opened the editor.");
michael@0	41	is(editor.value, "5px", "Should have the right value in the editor.");
michael@0	42
michael@0	43	EventUtils.synthesizeKey("3", {}, view);
michael@0	44	yield waitForUpdate();
michael@0	45
michael@0	46	is(getStyle(node, "margin-top"), "3px", "Should have updated the margin.");
michael@0	47
michael@0	48	EventUtils.synthesizeKey("VK_ESCAPE", {}, view);
michael@0	49	yield waitForUpdate();
michael@0	50
michael@0	51	is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
michael@0	52	is(span.textContent, 5, "Should have the right value in the box model.");
michael@0	53	});
michael@0	54
michael@0	55	addTest("Test that arrow keys work correctly and pressing enter commits the changes",
michael@0	56	function*() {
michael@0	57	let node = doc.getElementById("div1");
michael@0	58	is(getStyle(node, "margin-left"), "", "Should be no margin-top on the element.")
michael@0	59	let view = yield selectNode(node);
michael@0	60
michael@0	61	let span = view.document.querySelector(".margin.left > span");
michael@0	62	is(span.textContent, 10, "Should have the right value in the box model.");
michael@0	63
michael@0	64	EventUtils.synthesizeMouseAtCenter(span, {}, view);
michael@0	65	let editor = view.document.querySelector(".styleinspector-propertyeditor");
michael@0	66	ok(editor, "Should have opened the editor.");
michael@0	67	is(editor.value, "10px", "Should have the right value in the editor.");
michael@0	68
michael@0	69	EventUtils.synthesizeKey("VK_UP", {}, view);
michael@0	70	yield waitForUpdate();
michael@0	71
michael@0	72	is(editor.value, "11px", "Should have the right value in the editor.");
michael@0	73	is(getStyle(node, "margin-left"), "11px", "Should have updated the margin.");
michael@0	74
michael@0	75	EventUtils.synthesizeKey("VK_DOWN", {}, view);
michael@0	76	yield waitForUpdate();
michael@0	77
michael@0	78	is(editor.value, "10px", "Should have the right value in the editor.");
michael@0	79	is(getStyle(node, "margin-left"), "10px", "Should have updated the margin.");
michael@0	80
michael@0	81	EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view);
michael@0	82	yield waitForUpdate();
michael@0	83
michael@0	84	is(editor.value, "20px", "Should have the right value in the editor.");
michael@0	85	is(getStyle(node, "margin-left"), "20px", "Should have updated the margin.");
michael@0	86
michael@0	87	EventUtils.synthesizeKey("VK_RETURN", {}, view);
michael@0	88	yield waitForUpdate();
michael@0	89
michael@0	90	is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
michael@0	91	is(span.textContent, 20, "Should have the right value in the box model.");
michael@0	92	});
michael@0	93
michael@0	94	addTest("Test that deleting the value removes the property but escape undoes that",
michael@0	95	function*() {
michael@0	96	let node = doc.getElementById("div1");
michael@0	97	is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
michael@0	98	let view = yield selectNode(node);
michael@0	99
michael@0	100	let span = view.document.querySelector(".margin.left > span");
michael@0	101	is(span.textContent, 20, "Should have the right value in the box model.");
michael@0	102
michael@0	103	EventUtils.synthesizeMouseAtCenter(span, {}, view);
michael@0	104	let editor = view.document.querySelector(".styleinspector-propertyeditor");
michael@0	105	ok(editor, "Should have opened the editor.");
michael@0	106	is(editor.value, "20px", "Should have the right value in the editor.");
michael@0	107
michael@0	108	EventUtils.synthesizeKey("VK_DELETE", {}, view);
michael@0	109	yield waitForUpdate();
michael@0	110
michael@0	111	is(editor.value, "", "Should have the right value in the editor.");
michael@0	112	is(getStyle(node, "margin-left"), "", "Should have updated the margin.");
michael@0	113
michael@0	114	EventUtils.synthesizeKey("VK_ESCAPE", {}, view);
michael@0	115	yield waitForUpdate();
michael@0	116
michael@0	117	is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
michael@0	118	is(span.textContent, 20, "Should have the right value in the box model.");
michael@0	119	});
michael@0	120
michael@0	121	addTest("Test that deleting the value removes the property",
michael@0	122	function*() {
michael@0	123	let node = doc.getElementById("div1");
michael@0	124	node.style.marginRight = "15px";
michael@0	125	let view = yield selectNode(node);
michael@0	126
michael@0	127	let span = view.document.querySelector(".margin.right > span");
michael@0	128	is(span.textContent, 15, "Should have the right value in the box model.");
michael@0	129
michael@0	130	EventUtils.synthesizeMouseAtCenter(span, {}, view);
michael@0	131	let editor = view.document.querySelector(".styleinspector-propertyeditor");
michael@0	132	ok(editor, "Should have opened the editor.");
michael@0	133	is(editor.value, "15px", "Should have the right value in the editor.");
michael@0	134
michael@0	135	EventUtils.synthesizeKey("VK_DELETE", {}, view);
michael@0	136	yield waitForUpdate();
michael@0	137
michael@0	138	is(editor.value, "", "Should have the right value in the editor.");
michael@0	139	is(getStyle(node, "margin-right"), "", "Should have updated the margin.");
michael@0	140
michael@0	141	EventUtils.synthesizeKey("VK_RETURN", {}, view);
michael@0	142	yield waitForUpdate();
michael@0	143
michael@0	144	is(getStyle(node, "margin-right"), "", "Should be the right margin-top on the element.")
michael@0	145	is(span.textContent, 10, "Should have the right value in the box model.");
michael@0	146	});