/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view properly handles custom states pseudo classes
const TEST_URI = `data:text/html,${encodeURIComponent(`
`)}
`;
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view } = await openRuleView();
await selectNode("fx-test#no-state", inspector);
await checkRuleViewContent(view, [
{ selector: `element`, ancestorRulesData: null, declarations: [] },
{
selector: `fx-test`,
declarations: [{ name: "color", value: "lime" }],
},
]);
await selectNode("fx-test#single-state", inspector);
await checkRuleViewContent(view, [
{ selector: `element`, ancestorRulesData: null, declarations: [] },
{
selector: `fx-test:state(custom-state)`,
declarations: [{ name: "color", value: "gold" }],
},
{
selector: `fx-test`,
declarations: [{ name: "color", value: "lime", overridden: true }],
},
]);
await selectNode("fx-test#multiple-state", inspector);
await checkRuleViewContent(view, [
{ selector: `element`, ancestorRulesData: null, declarations: [] },
{
selector: `fx-test:state(another-custom-state)`,
declarations: [{ name: "color", value: "tomato" }],
},
{
selector: `fx-test:state(custom-state)`,
declarations: [{ name: "color", value: "gold", overridden: true }],
},
{
selector: `fx-test`,
declarations: [{ name: "color", value: "lime", overridden: true }],
},
]);
info("Check that the selector highlighter works for :state()");
let data = await clickSelectorIcon(view, "fx-test:state(custom-state)");
ok(data.highlighter, "The selector highlighter instance was created");
ok(data.isShown, "The selector highlighter was shown");
info("Click on the same icon to disable highlighter");
data = await clickSelectorIcon(view, "fx-test:state(custom-state)");
ok(!data.isShown, "The highlighter is not visible anymore");
});