Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the selector highlighter works for nested rules.
const TEST_URI = `
<style>
main {
background: tomato;
& > h1 {
color: gold;
&#title {
text-decoration: underline;
}
&.title {
outline: 2px solid rebeccapurple;
& em {
color: salmon;
html & {
padding: 1em;
}
}
}
}
.title {
font-weight: 32px;
}
}
</style>
<main>
<h1 class="title" id="title">Selector Highlighter for <em>nested rules</em></h1>
</main>`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("h1", inspector);
const activeHighlighter = inspector.highlighters.getActiveHighlighter(
inspector.highlighters.TYPES.SELECTOR
);
ok(!activeHighlighter, "No selector highlighter is active");
info(`Clicking on "& > h1" selector icon`);
let highlighterData = await clickSelectorIcon(view, "& > h1");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "&#title" selector icon`);
highlighterData = await clickSelectorIcon(view, "&#title");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "&.title" selector icon`);
highlighterData = await clickSelectorIcon(view, "&.title");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "& .title" selector icon`);
highlighterData = await clickSelectorIcon(view, "& .title");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"h1",
"<h1> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
await selectNode("h1 em", inspector);
info(`Clicking on "& em" selector icon`);
highlighterData = await clickSelectorIcon(view, "& em");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"em",
"<em> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
info(`Clicking on "html &" selector icon`);
highlighterData = await clickSelectorIcon(view, "html &");
is(
highlighterData.nodeFront.nodeName.toLowerCase(),
"em",
"<em> is highlighted"
);
ok(
highlighterData.highlighter,
"The selector highlighter instance was created"
);
ok(highlighterData.isShown, "The selector highlighter was shown");
});