michael@0: /* Any copyright is dedicated to the Public Domain. michael@0: http://creativecommons.org/publicdomain/zero/1.0/ */ michael@0: michael@0: // Test that locking the pseudoclass displays correctly in the ruleview michael@0: michael@0: let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils); michael@0: const PSEUDO = ":hover"; michael@0: const TEST_URL = 'data:text/html,' + michael@0: '' + michael@0: ' ' + michael@0: '' + michael@0: '' + michael@0: '
' + michael@0: '
test div
' + michael@0: '
test div2
' + michael@0: '
' + michael@0: ''; michael@0: michael@0: waitForExplicitFinish(); michael@0: michael@0: function test() { michael@0: ignoreAllUncaughtExceptions(); michael@0: gBrowser.selectedTab = gBrowser.addTab(); michael@0: gBrowser.selectedBrowser.addEventListener("load", function() { michael@0: gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true); michael@0: waitForFocus(startTests, content); michael@0: }, true); michael@0: michael@0: content.location = TEST_URL; michael@0: } michael@0: michael@0: let startTests = Task.async(function*() { michael@0: let {toolbox, inspector, view} = yield openRuleView(); michael@0: yield selectNode("#div-1", inspector); michael@0: michael@0: yield performTests(inspector, view); michael@0: michael@0: yield finishUp(toolbox); michael@0: finish(); michael@0: }); michael@0: michael@0: function* performTests(inspector, ruleview) { michael@0: yield togglePseudoClass(inspector); michael@0: yield testAdded(inspector, ruleview); michael@0: michael@0: yield togglePseudoClass(inspector); michael@0: yield testRemoved(); michael@0: yield testRemovedFromUI(inspector, ruleview); michael@0: michael@0: yield togglePseudoClass(inspector); michael@0: yield testNavigate(inspector, ruleview); michael@0: } michael@0: michael@0: function* togglePseudoClass(inspector) { michael@0: info("Toggle the pseudoclass, wait for the pseudoclass event and wait for the refresh of the rule view"); michael@0: michael@0: let onPseudo = inspector.selection.once("pseudoclass"); michael@0: let onRefresh = inspector.once("rule-view-refreshed"); michael@0: inspector.togglePseudoClass(PSEUDO); michael@0: michael@0: yield onPseudo; michael@0: yield onRefresh; michael@0: } michael@0: michael@0: function* testNavigate(inspector, ruleview) { michael@0: yield selectNode("#parent-div", inspector); michael@0: michael@0: info("Make sure the pseudoclass is still on after navigating to a parent"); michael@0: is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), true, michael@0: "pseudo-class lock is still applied after inspecting ancestor"); michael@0: michael@0: let onPseudo = inspector.selection.once("pseudoclass"); michael@0: yield selectNode("#div-2", inspector); michael@0: yield onPseudo; michael@0: michael@0: info("Make sure the pseudoclass is removed after navigating to a non-hierarchy node"); michael@0: is(DOMUtils.hasPseudoClassLock(getNode("#div-1"), PSEUDO), false, michael@0: "pseudo-class lock is removed after inspecting sibling node"); michael@0: michael@0: yield selectNode("#div-1", inspector); michael@0: yield togglePseudoClass(inspector); michael@0: yield inspector.once("computed-view-refreshed"); michael@0: } michael@0: michael@0: function showPickerOn(node, inspector) { michael@0: let highlighter = inspector.toolbox.highlighter; michael@0: return highlighter.showBoxModel(getNodeFront(node)); michael@0: } michael@0: michael@0: function* testAdded(inspector, ruleview) { michael@0: info("Make sure the pseudoclass lock is applied to #div-1 and its ancestors"); michael@0: let node = getNode("#div-1"); michael@0: do { michael@0: is(DOMUtils.hasPseudoClassLock(node, PSEUDO), true, michael@0: "pseudo-class lock has been applied"); michael@0: node = node.parentNode; michael@0: } while (node.parentNode) michael@0: michael@0: info("Check that the ruleview contains the pseudo-class rule"); michael@0: let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator"); michael@0: is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div"); michael@0: is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + PSEUDO + " rule"); michael@0: michael@0: info("Show the highlighter on #div-1"); michael@0: yield showPickerOn(getNode("#div-1"), inspector); michael@0: michael@0: info("Check that the infobar selector contains the pseudo-class"); michael@0: let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes"); michael@0: is(pseudoClassesBox.textContent, PSEUDO, "pseudo-class in infobar selector"); michael@0: yield inspector.toolbox.highlighter.hideBoxModel(); michael@0: } michael@0: michael@0: function* testRemoved() { michael@0: info("Make sure the pseudoclass lock is removed from #div-1 and its ancestors"); michael@0: let node = getNode("#div-1"); michael@0: do { michael@0: is(DOMUtils.hasPseudoClassLock(node, PSEUDO), false, michael@0: "pseudo-class lock has been removed"); michael@0: node = node.parentNode; michael@0: } while (node.parentNode) michael@0: } michael@0: michael@0: function* testRemovedFromUI(inspector, ruleview) { michael@0: info("Check that the ruleview no longer contains the pseudo-class rule"); michael@0: let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator"); michael@0: is(rules.length, 2, "rule view is showing 2 rules after removing lock"); michael@0: michael@0: yield showPickerOn(getNode("#div-1"), inspector); michael@0: michael@0: let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes"); michael@0: is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector"); michael@0: yield inspector.toolbox.highlighter.hideBoxModel(); michael@0: } michael@0: michael@0: function* finishUp(toolbox) { michael@0: let onDestroy = gDevTools.once("toolbox-destroyed"); michael@0: toolbox.destroy(); michael@0: yield onDestroy; michael@0: michael@0: yield testRemoved(getNode("#div-1")); michael@0: gBrowser.removeCurrentTab(); michael@0: }