The Tor Browser / file comparison
comparison: browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
- branch
- TOR_BUG_9701
- changeset 13
- 44a2da4a2ab2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:97ed18bbcb40 |
|---|---|
| 1 /* Any copyright is dedicated to the Public Domain. | |
| 2 http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| 3 | |
| 4 // Test that locking the pseudoclass displays correctly in the ruleview | |
| 5 | |
| 6 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils); | |
| 7 const PSEUDO = ":hover"; | |
| 8 const TEST_URL = 'data:text/html,' + | |
| 9 '<head>' + | |
| 10 ' <style>div {color:red;} div:hover {color:blue;}</style>' + | |
| 11 '</head>' + | |
| 12 '<body>' + | |
| 13 ' <div id="parent-div">' + | |
| 14 ' <div id="div-1">test div</div>' + | |
| 15 ' <div id="div-2">test div2</div>' + | |
| 16 ' </div>' + | |
| 17 '</body>'; | |
| 18 | |
| 19 waitForExplicitFinish(); | |
| 20 | |
| 21 function test() { | |
| 22 ignoreAllUncaughtExceptions(); | |
| 23 gBrowser.selectedTab = gBrowser.addTab(); | |
| 24 gBrowser.selectedBrowser.addEventListener("load", function() { | |
| 25 gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true); | |
| 26 waitForFocus(startTests, content); | |
| 27 }, true); | |
| 28 | |
| 29 content.location = TEST_URL; | |
| 30 } | |
| 31 | |
| 32 let startTests = Task.async(function*() { | |
| 33 let {toolbox, inspector, view} = yield openRuleView(); | |
| 34 yield selectNode("#div-1", inspector); | |
| 35 | |
| 36 yield performTests(inspector, view); | |
| 37 | |
| 38 yield finishUp(toolbox); | |
| 39 finish(); | |
| 40 }); | |
| 41 | |
| 42 function* performTests(inspector, ruleview) { | |
| 43 yield togglePseudoClass(inspector); | |
| 44 yield testAdded(inspector, ruleview); | |
| 45 | |
| 46 yield togglePseudoClass(inspector); | |
| 47 yield testRemoved(); | |
| 48 yield testRemovedFromUI(inspector, ruleview); | |
| 49 | |
| 50 yield togglePseudoClass(inspector); | |
| 51 yield testNavigate(inspector, ruleview); | |
| 52 } | |
| 53 | |
| 54 function* togglePseudoClass(inspector) { | |
| 55 info("Toggle the pseudoclass, wait for the pseudoclass event and wait for the refresh of the rule view"); | |
| 56 | |
| 57 let onPseudo = inspector.selection.once("pseudoclass"); | |
| 58 let onRefresh = inspector.once("rule-view-refreshed"); | |
| 59 inspector.togglePseudoClass(PSEUDO); | |
| 60 | |
| 61 yield onPseudo; | |
| 62 yield onRefresh; | |
| 63 } | |
| 64 | |
| 65 function* testNavigate(inspector, ruleview) { | |
| 66 yield selectNode("#parent-div", inspector); | |
| 67 | |
| 68 info("Make sure the pseudoclass is still on after navigating to a parent"); | |
| 69 is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), true, | |
| 70 "pseudo-class lock is still applied after inspecting ancestor"); | |
| 71 | |
| 72 let onPseudo = inspector.selection.once("pseudoclass"); | |
| 73 yield selectNode("#div-2", inspector); | |
| 74 yield onPseudo; | |
| 75 | |
| 76 info("Make sure the pseudoclass is removed after navigating to a non-hierarchy node"); | |
| 77 is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), false, | |
| 78 "pseudo-class lock is removed after inspecting sibling node"); | |
| 79 | |
| 80 yield selectNode("#div-1", inspector); | |
| 81 yield togglePseudoClass(inspector); | |
| 82 yield inspector.once("computed-view-refreshed"); | |
| 83 } | |
| 84 | |
| 85 function showPickerOn(node, inspector) { | |
| 86 let highlighter = inspector.toolbox.highlighter; | |
| 87 return highlighter.showBoxModel(getNodeFront(node)); | |
| 88 } | |
| 89 | |
| 90 function* testAdded(inspector, ruleview) { | |
| 91 info("Make sure the pseudoclass lock is applied to #div-1 and its ancestors"); | |
| 92 let node = getNode("#div-1"); | |
| 93 do { | |
| 94 is(DOMUtils.hasPseudoClassLock(node, PSEUDO), true, | |
| 95 "pseudo-class lock has been applied"); | |
| 96 node = node.parentNode; | |
| 97 } while (node.parentNode) | |
| 98 | |
| 99 info("Check that the ruleview contains the pseudo-class rule"); | |
| 100 let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator"); | |
| 101 is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div"); | |
| 102 is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + PSEUDO + " rule"); | |
| 103 | |
| 104 info("Show the highlighter on #div-1"); | |
| 105 yield showPickerOn(getNode("#div-1"), inspector); | |
| 106 | |
| 107 info("Check that the infobar selector contains the pseudo-class"); | |
| 108 let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes"); | |
| 109 is(pseudoClassesBox.textContent, PSEUDO, "pseudo-class in infobar selector"); | |
| 110 yield inspector.toolbox.highlighter.hideBoxModel(); | |
| 111 } | |
| 112 | |
| 113 function* testRemoved() { | |
| 114 info("Make sure the pseudoclass lock is removed from #div-1 and its ancestors"); | |
| 115 let node = getNode("#div-1"); | |
| 116 do { | |
| 117 is(DOMUtils.hasPseudoClassLock(node, PSEUDO), false, | |
| 118 "pseudo-class lock has been removed"); | |
| 119 node = node.parentNode; | |
| 120 } while (node.parentNode) | |
| 121 } | |
| 122 | |
| 123 function* testRemovedFromUI(inspector, ruleview) { | |
| 124 info("Check that the ruleview no longer contains the pseudo-class rule"); | |
| 125 let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator"); | |
| 126 is(rules.length, 2, "rule view is showing 2 rules after removing lock"); | |
| 127 | |
| 128 yield showPickerOn(getNode("#div-1"), inspector); | |
| 129 | |
| 130 let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes"); | |
| 131 is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector"); | |
| 132 yield inspector.toolbox.highlighter.hideBoxModel(); | |
| 133 } | |
| 134 | |
| 135 function* finishUp(toolbox) { | |
| 136 let onDestroy = gDevTools.once("toolbox-destroyed"); | |
| 137 toolbox.destroy(); | |
| 138 yield onDestroy; | |
| 139 | |
| 140 yield testRemoved(getNode("#div-1")); | |
| 141 gBrowser.removeCurrentTab(); | |
| 142 } |
