/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view content is correct
const TEST_URI = `
Styled Node
Styled Node in Nested rule
Test with multiple selectors
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#testid", inspector);
is(
view.element.querySelectorAll("#ruleview-no-results").length,
0,
"After a highlight, no longer has a no-results element."
);
await clearCurrentNodeSelection(inspector);
is(
view.element.querySelectorAll("#ruleview-no-results").length,
1,
"After highlighting null, has a no-results element again."
);
await selectNode("#testid", inspector);
let linkText = getRuleViewLinkTextByIndex(view, 1);
is(linkText, "inline:3", "link text at index 1 has expected content.");
const mediaText = getRuleViewAncestorRulesDataTextByIndex(view, 1);
is(
mediaText,
"@media screen and (min-width: 10px) {",
"media text at index 1 has expected content"
);
linkText = getRuleViewLinkTextByIndex(view, 2);
is(linkText, "inline:7", "link text at index 2 has expected content.");
is(
getRuleViewAncestorRulesDataElementByIndex(view, 2),
null,
"There is no media text element for rule at index 2"
);
assertSelectors(view, 2, [
{
selector: ".testclass",
matches: true,
specificity: "(0,1,0)",
},
{
selector: ".unmatched",
matches: false,
specificity: "(0,1,0)",
},
]);
info("Check nested rules");
await selectNode(".foo", inspector);
assertSelectors(view, 0, []);
assertSelectors(view, 2, [
{
selector: "& > .foo",
matches: true,
specificity: "(0,1,1)",
},
{
selector: "& .unmatched",
matches: false,
specificity: "(0,1,1)",
},
]);
info("Check rule with multiple selectors and different specificites");
await selectNode("#specific", inspector);
assertSelectors(view, 1, [
{ selector: "#specific", matches: true, specificity: "(1,0,0)" },
{ selector: "#specific.test", matches: true, specificity: "(1,1,0)" },
{
selector: "aside#specific.test",
matches: true,
specificity: "(1,1,1)",
},
{
selector: "body#bdy aside#specific.test",
matches: true,
specificity: "(2,1,2)",
},
{
selector: "aside#specific.test:is(.this, .that)",
matches: false,
specificity: "(1,2,1)",
},
]);
});
/**
* Returns the selector elements for a given rule index
*
* @param {Inspector} view
* @param {Integer} ruleIndex
* @param {Array} expectedSelectors:
* An array of objects representing each selector. Objects have the following shape:
* - selector: The expected selector text
* - matches: True if the selector should have the "matching" class
*/
function assertSelectors(view, ruleIndex, expectedSelectors) {
const ruleSelectors = getRuleViewRuleEditorAt(
view,
ruleIndex
).selectorText.querySelectorAll(".ruleview-selector");
is(
ruleSelectors.length,
expectedSelectors.length,
`There are the expected number of selectors on rule #${ruleIndex}`
);
for (let i = 0; i < expectedSelectors.length; i++) {
const ruleSelector = ruleSelectors[i];
const expectedSelector = expectedSelectors[i];
const selectorText = ruleSelector.textContent;
is(
selectorText,
expectedSelector.selector,
`Got expected text for the selector element #${i} on rule #${ruleIndex}`
);
is(
[...ruleSelector.classList].join(","),
"ruleview-selector," +
(expectedSelector.matches ? "matched" : "unmatched"),
`Got expected css class on the selector element #${i} ("${selectorText}") on rule #${ruleIndex}`
);
is(
ruleSelector.title,
`Specificity: ${expectedSelector.specificity}`,
`Got expected title with specificity on the selector element #${i} ("${selectorText}") on rule #${ruleIndex}`
);
}
}