1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,142 @@
1.4 +/* Any copyright is dedicated to the Public Domain.
1.5 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.6 +
1.7 +// Test that locking the pseudoclass displays correctly in the ruleview
1.8 +
1.9 +let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
1.10 +const PSEUDO = ":hover";
1.11 +const TEST_URL = 'data:text/html,' +
1.12 + '<head>' +
1.13 + ' <style>div {color:red;} div:hover {color:blue;}</style>' +
1.14 + '</head>' +
1.15 + '<body>' +
1.16 + ' <div id="parent-div">' +
1.17 + ' <div id="div-1">test div</div>' +
1.18 + ' <div id="div-2">test div2</div>' +
1.19 + ' </div>' +
1.20 + '</body>';
1.21 +
1.22 +waitForExplicitFinish();
1.23 +
1.24 +function test() {
1.25 + ignoreAllUncaughtExceptions();
1.26 + gBrowser.selectedTab = gBrowser.addTab();
1.27 + gBrowser.selectedBrowser.addEventListener("load", function() {
1.28 + gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
1.29 + waitForFocus(startTests, content);
1.30 + }, true);
1.31 +
1.32 + content.location = TEST_URL;
1.33 +}
1.34 +
1.35 +let startTests = Task.async(function*() {
1.36 + let {toolbox, inspector, view} = yield openRuleView();
1.37 + yield selectNode("#div-1", inspector);
1.38 +
1.39 + yield performTests(inspector, view);
1.40 +
1.41 + yield finishUp(toolbox);
1.42 + finish();
1.43 +});
1.44 +
1.45 +function* performTests(inspector, ruleview) {
1.46 + yield togglePseudoClass(inspector);
1.47 + yield testAdded(inspector, ruleview);
1.48 +
1.49 + yield togglePseudoClass(inspector);
1.50 + yield testRemoved();
1.51 + yield testRemovedFromUI(inspector, ruleview);
1.52 +
1.53 + yield togglePseudoClass(inspector);
1.54 + yield testNavigate(inspector, ruleview);
1.55 +}
1.56 +
1.57 +function* togglePseudoClass(inspector) {
1.58 + info("Toggle the pseudoclass, wait for the pseudoclass event and wait for the refresh of the rule view");
1.59 +
1.60 + let onPseudo = inspector.selection.once("pseudoclass");
1.61 + let onRefresh = inspector.once("rule-view-refreshed");
1.62 + inspector.togglePseudoClass(PSEUDO);
1.63 +
1.64 + yield onPseudo;
1.65 + yield onRefresh;
1.66 +}
1.67 +
1.68 +function* testNavigate(inspector, ruleview) {
1.69 + yield selectNode("#parent-div", inspector);
1.70 +
1.71 + info("Make sure the pseudoclass is still on after navigating to a parent");
1.72 + is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), true,
1.73 + "pseudo-class lock is still applied after inspecting ancestor");
1.74 +
1.75 + let onPseudo = inspector.selection.once("pseudoclass");
1.76 + yield selectNode("#div-2", inspector);
1.77 + yield onPseudo;
1.78 +
1.79 + info("Make sure the pseudoclass is removed after navigating to a non-hierarchy node");
1.80 + is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), false,
1.81 + "pseudo-class lock is removed after inspecting sibling node");
1.82 +
1.83 + yield selectNode("#div-1", inspector);
1.84 + yield togglePseudoClass(inspector);
1.85 + yield inspector.once("computed-view-refreshed");
1.86 +}
1.87 +
1.88 +function showPickerOn(node, inspector) {
1.89 + let highlighter = inspector.toolbox.highlighter;
1.90 + return highlighter.showBoxModel(getNodeFront(node));
1.91 +}
1.92 +
1.93 +function* testAdded(inspector, ruleview) {
1.94 + info("Make sure the pseudoclass lock is applied to #div-1 and its ancestors");
1.95 + let node = getNode("#div-1");
1.96 + do {
1.97 + is(DOMUtils.hasPseudoClassLock(node, PSEUDO), true,
1.98 + "pseudo-class lock has been applied");
1.99 + node = node.parentNode;
1.100 + } while (node.parentNode)
1.101 +
1.102 + info("Check that the ruleview contains the pseudo-class rule");
1.103 + let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
1.104 + is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div");
1.105 + is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + PSEUDO + " rule");
1.106 +
1.107 + info("Show the highlighter on #div-1");
1.108 + yield showPickerOn(getNode("#div-1"), inspector);
1.109 +
1.110 + info("Check that the infobar selector contains the pseudo-class");
1.111 + let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");
1.112 + is(pseudoClassesBox.textContent, PSEUDO, "pseudo-class in infobar selector");
1.113 + yield inspector.toolbox.highlighter.hideBoxModel();
1.114 +}
1.115 +
1.116 +function* testRemoved() {
1.117 + info("Make sure the pseudoclass lock is removed from #div-1 and its ancestors");
1.118 + let node = getNode("#div-1");
1.119 + do {
1.120 + is(DOMUtils.hasPseudoClassLock(node, PSEUDO), false,
1.121 + "pseudo-class lock has been removed");
1.122 + node = node.parentNode;
1.123 + } while (node.parentNode)
1.124 +}
1.125 +
1.126 +function* testRemovedFromUI(inspector, ruleview) {
1.127 + info("Check that the ruleview no longer contains the pseudo-class rule");
1.128 + let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
1.129 + is(rules.length, 2, "rule view is showing 2 rules after removing lock");
1.130 +
1.131 + yield showPickerOn(getNode("#div-1"), inspector);
1.132 +
1.133 + let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");
1.134 + is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");
1.135 + yield inspector.toolbox.highlighter.hideBoxModel();
1.136 +}
1.137 +
1.138 +function* finishUp(toolbox) {
1.139 + let onDestroy = gDevTools.once("toolbox-destroyed");
1.140 + toolbox.destroy();
1.141 + yield onDestroy;
1.142 +
1.143 + yield testRemoved(getNode("#div-1"));
1.144 + gBrowser.removeCurrentTab();
1.145 +}
