summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js')
-rw-r--r--devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js160
1 files changed, 160 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
new file mode 100644
index 000000000..bd98bd58f
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
@@ -0,0 +1,160 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* globals getTestActorWithoutToolbox */
+"use strict";
+
+// Test that locking the pseudoclass displays correctly in the ruleview
+
+const PSEUDO = ":hover";
+const TEST_URL = "data:text/html;charset=UTF-8," +
+ "<head>" +
+ " <style>div {color:red;} div:hover {color:blue;}</style>" +
+ "</head>" +
+ "<body>" +
+ ' <div id="parent-div">' +
+ ' <div id="div-1">test div</div>' +
+ ' <div id="div-2">test div2</div>' +
+ " </div>" +
+ "</body>";
+
+add_task(function* () {
+ info("Creating the test tab and opening the rule-view");
+ let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
+
+ info("Selecting the ruleview sidebar");
+ inspector.sidebar.select("ruleview");
+
+ let view = inspector.ruleview.view;
+
+ info("Selecting the test node");
+ yield selectNode("#div-1", inspector);
+
+ yield togglePseudoClass(inspector);
+ yield assertPseudoAddedToNode(inspector, testActor, view, "#div-1");
+
+ yield togglePseudoClass(inspector);
+ yield assertPseudoRemovedFromNode(testActor, "#div-1");
+ yield assertPseudoRemovedFromView(inspector, testActor, view, "#div-1");
+
+ yield togglePseudoClass(inspector);
+ yield testNavigate(inspector, testActor, view);
+
+ info("Toggle pseudo on the parent and ensure everything is toggled off");
+ yield selectNode("#parent-div", inspector);
+ yield togglePseudoClass(inspector);
+ yield assertPseudoRemovedFromNode(testActor, "#div-1");
+ yield assertPseudoRemovedFromView(inspector, testActor, view, "#div-1");
+
+ yield togglePseudoClass(inspector);
+ info("Assert pseudo is dismissed when toggling it on a sibling node");
+ yield selectNode("#div-2", inspector);
+ yield togglePseudoClass(inspector);
+ yield assertPseudoAddedToNode(inspector, testActor, view, "#div-2");
+ let hasLock = yield testActor.hasPseudoClassLock("#div-1", PSEUDO);
+ ok(!hasLock, "pseudo-class lock has been removed for the previous locked node");
+
+ info("Destroying the toolbox");
+ let tab = toolbox.target.tab;
+ yield toolbox.destroy();
+
+ // As the toolbox get detroyed, we need to fetch a new test-actor
+ testActor = yield getTestActorWithoutToolbox(tab);
+
+ yield assertPseudoRemovedFromNode(testActor, "#div-1");
+ yield assertPseudoRemovedFromNode(testActor, "#div-2");
+});
+
+function* togglePseudoClass(inspector) {
+ info("Toggle the pseudoclass, wait for it to be applied");
+
+ // Give the inspector panels a chance to update when the pseudoclass changes
+ let onPseudo = inspector.selection.once("pseudoclass");
+ let onRefresh = inspector.once("rule-view-refreshed");
+
+ // Walker uses SDK-events so calling walker.once does not return a promise.
+ let onMutations = once(inspector.walker, "mutations");
+
+ yield inspector.togglePseudoClass(PSEUDO);
+
+ yield onPseudo;
+ yield onRefresh;
+ yield onMutations;
+}
+
+function* testNavigate(inspector, testActor, ruleview) {
+ yield selectNode("#parent-div", inspector);
+
+ info("Make sure the pseudoclass is still on after navigating to a parent");
+
+ ok((yield testActor.hasPseudoClassLock("#div-1", PSEUDO)),
+ "pseudo-class lock is still applied after inspecting ancestor");
+
+ yield selectNode("#div-2", inspector);
+
+ info("Make sure the pseudoclass is still set after navigating to a " +
+ "non-hierarchy node");
+ ok(yield testActor.hasPseudoClassLock("#div-1", PSEUDO),
+ "pseudo-class lock is still on after inspecting sibling node");
+
+ yield selectNode("#div-1", inspector);
+}
+
+function* showPickerOn(selector, inspector) {
+ let nodeFront = yield getNodeFront(selector, inspector);
+ yield inspector.highlighter.showBoxModel(nodeFront);
+}
+
+function* assertPseudoAddedToNode(inspector, testActor, ruleview, selector) {
+ info("Make sure the pseudoclass lock is applied to " + selector + " and its ancestors");
+
+ let hasLock = yield testActor.hasPseudoClassLock(selector, PSEUDO);
+ ok(hasLock, "pseudo-class lock has been applied");
+ hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
+ ok(hasLock, "pseudo-class lock has been applied");
+ hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
+ ok(hasLock, "pseudo-class lock has been applied");
+
+ info("Check that the ruleview contains the pseudo-class rule");
+ let rules = ruleview.element.querySelectorAll(
+ ".ruleview-rule.theme-separator");
+ is(rules.length, 3,
+ "rule view is showing 3 rules for pseudo-class locked div");
+ is(rules[1]._ruleEditor.rule.selectorText, "div:hover",
+ "rule view is showing " + PSEUDO + " rule");
+
+ info("Show the highlighter on " + selector);
+ yield showPickerOn(selector, inspector);
+
+ info("Check that the infobar selector contains the pseudo-class");
+ let value = yield testActor.getHighlighterNodeTextContent(
+ "box-model-infobar-pseudo-classes");
+ is(value, PSEUDO, "pseudo-class in infobar selector");
+ yield inspector.highlighter.hideBoxModel();
+}
+
+function* assertPseudoRemovedFromNode(testActor, selector) {
+ info("Make sure the pseudoclass lock is removed from #div-1 and its " +
+ "ancestors");
+
+ let hasLock = yield testActor.hasPseudoClassLock(selector, PSEUDO);
+ ok(!hasLock, "pseudo-class lock has been removed");
+ hasLock = yield testActor.hasPseudoClassLock("#parent-div", PSEUDO);
+ ok(!hasLock, "pseudo-class lock has been removed");
+ hasLock = yield testActor.hasPseudoClassLock("body", PSEUDO);
+ ok(!hasLock, "pseudo-class lock has been removed");
+}
+
+function* assertPseudoRemovedFromView(inspector, testActor, ruleview, selector) {
+ info("Check that the ruleview no longer contains the pseudo-class rule");
+ let rules = ruleview.element.querySelectorAll(
+ ".ruleview-rule.theme-separator");
+ is(rules.length, 2, "rule view is showing 2 rules after removing lock");
+
+ yield showPickerOn(selector, inspector);
+
+ let value = yield testActor.getHighlighterNodeTextContent(
+ "box-model-infobar-pseudo-classes");
+ is(value, "", "pseudo-class removed from infobar selector");
+ yield inspector.highlighter.hideBoxModel();
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-29 17:19:17 +0000