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

browser/devtools/styleeditor/test/browser_styleeditor_new.js@6474c204b198 (annotated)

browser/devtools/styleeditor/test/browser_styleeditor_new.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.

michael@0	1	/* vim: set ts=2 et sw=2 tw=80: */
michael@0	2	/* Any copyright is dedicated to the Public Domain.
michael@0	3	http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0	4
michael@0	5	const TESTCASE_URI = TEST_BASE + "simple.html";
michael@0	6
michael@0	7	let TRANSITION_CLASS = "moz-styleeditor-transitioning";
michael@0	8	let TESTCASE_CSS_SOURCE = "body{background-color:red;";
michael@0	9
michael@0	10	let gUI;
michael@0	11
michael@0	12	function test()
michael@0	13	{
michael@0	14	waitForExplicitFinish();
michael@0	15
michael@0	16	addTabAndCheckOnStyleEditorAdded(panel => gUI = panel.UI, testEditorAdded);
michael@0	17
michael@0	18	content.location = TESTCASE_URI;
michael@0	19	}
michael@0	20
michael@0	21	let gAddedCount = 0; // to add new stylesheet after the 2 initial stylesheets
michael@0	22	let gNewEditor; // to make sure only one new stylesheet got created
michael@0	23	let gOriginalHref;
michael@0	24
michael@0	25	let checksCompleted = 0;
michael@0	26
michael@0	27	function testEditorAdded(aEditor)
michael@0	28	{
michael@0	29	info("added " + gAddedCount + " editors");
michael@0	30	if (++gAddedCount == 2) {
michael@0	31	waitForFocus(function () {// create a new style sheet
michael@0	32	let newButton = gPanelWindow.document.querySelector(".style-editor-newButton");
michael@0	33	ok(newButton, "'new' button exists");
michael@0	34
michael@0	35	EventUtils.synthesizeMouseAtCenter(newButton, {}, gPanelWindow);
michael@0	36	}, gPanelWindow);
michael@0	37	}
michael@0	38	if (gAddedCount < 3) {
michael@0	39	return;
michael@0	40	}
michael@0	41
michael@0	42	ok(!gNewEditor, "creating a new stylesheet triggers one EditorAdded event");
michael@0	43	gNewEditor = aEditor; // above test will fail if we get a duplicate event
michael@0	44
michael@0	45	is(gUI.editors.length, 3,
michael@0	46	"creating a new stylesheet added a new StyleEditor instance");
michael@0	47
michael@0	48	aEditor.styleSheet.once("style-applied", function() {
michael@0	49	// when changes have been completely applied to live stylesheet after transisiton
michael@0	50	ok(!content.document.documentElement.classList.contains(TRANSITION_CLASS),
michael@0	51	"StyleEditor's transition class has been removed from content");
michael@0	52
michael@0	53	if (++checksCompleted == 3) {
michael@0	54	cleanup();
michael@0	55	}
michael@0	56	});
michael@0	57
michael@0	58	aEditor.styleSheet.on("property-change", function(property) {
michael@0	59	if (property == "ruleCount") {
michael@0	60	let ruleCount = aEditor.summary.querySelector(".stylesheet-rule-count").textContent;
michael@0	61	is(parseInt(ruleCount), 1,
michael@0	62	"new editor shows 1 rule after modification");
michael@0	63
michael@0	64	if (++checksCompleted == 3) {
michael@0	65	cleanup();
michael@0	66	}
michael@0	67	}
michael@0	68	});
michael@0	69
michael@0	70	aEditor.getSourceEditor().then(testEditor);
michael@0	71	}
michael@0	72
michael@0	73	function testEditor(aEditor) {
michael@0	74	waitForFocus(function () {
michael@0	75	gOriginalHref = aEditor.styleSheet.href;
michael@0	76
michael@0	77	let summary = aEditor.summary;
michael@0	78
michael@0	79	ok(aEditor.sourceLoaded,
michael@0	80	"new editor is loaded when attached");
michael@0	81	ok(aEditor.isNew,
michael@0	82	"new editor has isNew flag");
michael@0	83
michael@0	84	ok(aEditor.sourceEditor.hasFocus(),
michael@0	85	"new editor has focus");
michael@0	86
michael@0	87	let summary = aEditor.summary;
michael@0	88	let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
michael@0	89	is(parseInt(ruleCount), 0,
michael@0	90	"new editor initially shows 0 rules");
michael@0	91
michael@0	92	let computedStyle = content.getComputedStyle(content.document.body, null);
michael@0	93	is(computedStyle.backgroundColor, "rgb(255, 255, 255)",
michael@0	94	"content's background color is initially white");
michael@0	95
michael@0	96	for each (let c in TESTCASE_CSS_SOURCE) {
michael@0	97	EventUtils.synthesizeKey(c, {}, gPanelWindow);
michael@0	98	}
michael@0	99
michael@0	100	ok(aEditor.unsaved,
michael@0	101	"new editor has unsaved flag");
michael@0	102
michael@0	103	// we know that the testcase above will start a CSS transition
michael@0	104	content.addEventListener("transitionend", onTransitionEnd, false);
michael@0	105	}, gPanelWindow) ;
michael@0	106	}
michael@0	107
michael@0	108	function onTransitionEnd() {
michael@0	109	content.removeEventListener("transitionend", onTransitionEnd, false);
michael@0	110
michael@0	111	is(gNewEditor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}",
michael@0	112	"rule bracket has been auto-closed");
michael@0	113
michael@0	114	let computedStyle = content.getComputedStyle(content.document.body, null);
michael@0	115	is(computedStyle.backgroundColor, "rgb(255, 0, 0)",
michael@0	116	"content's background color has been updated to red");
michael@0	117
michael@0	118	if (gNewEditor) {
michael@0	119	is(gNewEditor.styleSheet.href, gOriginalHref,
michael@0	120	"style sheet href did not change");
michael@0	121	}
michael@0	122
michael@0	123	if (++checksCompleted == 3) {
michael@0	124	cleanup();
michael@0	125	}
michael@0	126	}
michael@0	127
michael@0	128	function cleanup() {
michael@0	129	gNewEditor = null;
michael@0	130	gUI = null;
michael@0	131	finish();
michael@0	132	}