diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js new file mode 100644 index 0000000000..4a5e8bcd0c --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js @@ -0,0 +1,130 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"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"); +}); |