Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the inspector has the correct pseudo-class locking menu items and
// that these items actually work
const {
PSEUDO_CLASSES,
} = require("resource://devtools/shared/css/constants.js");
const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
const TEST_URI = `data:text/html;charset=UTF-8,
<style>
div::after {
content: "-";
}
</style>
<h1>pseudo-class lock node menu tests</h1>
<div>test div</div>`;
// Strip the colon prefix from pseudo-classes (:before => before)
const PSEUDOS = PSEUDO_CLASSES.map(pseudo => pseudo.substr(1));
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URI);
const divNodeFront = await getNodeFront("div", inspector);
const divChildren = await inspector.walker.children(divNodeFront);
info("Check pseudo element context menu on regular node");
await selectNode(divNodeFront, inspector);
let allMenuItems = openContextMenuAndGetAllItems(inspector);
await testMenuItems(allMenuItems, inspector, true);
const [textNodeFront, afterNodeFront] = divChildren.nodes;
info("Check pseudo element context menu on text node");
await selectNode(textNodeFront, inspector);
// sanity check
is(
inspector.selection.nodeFront.nodeType,
nodeConstants.TEXT_NODE,
"We selected the text node"
);
allMenuItems = openContextMenuAndGetAllItems(inspector);
await testMenuItems(allMenuItems, inspector, false);
info("Check pseudo element context menu on pseudo element node");
await selectNode(afterNodeFront, inspector);
is(
inspector.selection.nodeFront.displayName,
"::after",
"We selected the ::after pseudo element"
);
allMenuItems = openContextMenuAndGetAllItems(inspector);
await testMenuItems(allMenuItems, inspector, false);
});
async function testMenuItems(allMenuItems, inspector, enabled) {
for (const pseudo of PSEUDOS) {
const menuItem = allMenuItems.find(
item => item.id === "node-menu-pseudo-" + pseudo
);
ok(menuItem, ":" + pseudo + " menuitem exists");
is(
menuItem.disabled,
!enabled,
`:${pseudo} menuitem is ${enabled ? "enabled" : "disabled"} for "${inspector.selection.nodeFront.displayName}"`
);
if (!enabled) {
continue;
}
// Give the inspector panels a chance to update when the pseudoclass changes
const onPseudo = inspector.selection.once("pseudoclass");
const onRefresh = inspector.once("rule-view-refreshed");
// Walker uses SDK-events so calling walker.once does not return a promise.
const onMutations = once(inspector.walker, "mutations");
menuItem.click();
await onPseudo;
await onRefresh;
await onMutations;
const hasLock = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[`:${pseudo}`],
pseudoClass => {
const element = content.document.querySelector("div");
return InspectorUtils.hasPseudoClassLock(element, pseudoClass);
}
);
ok(hasLock, "pseudo-class lock has been applied");
}
}