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