diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/rules/test/browser_rules_variables_host.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_variables_host.js | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_host.js b/devtools/client/inspector/rules/test/browser_rules_variables_host.js new file mode 100644 index 0000000000..a8fe04d7b6 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_variables_host.js @@ -0,0 +1,76 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test matched selectors and variables defined for a :host selector. + +const SHADOW_DOM = `<style> + :host { + --test-color: red; + } + + span { + color: var(--test-color); + } +</style> +<span class="test-span">test</span>`; + +const TEST_PAGE = ` + <div id="host"></div> + <script> + const div = document.querySelector("div"); + div.attachShadow({ mode: "open" }).innerHTML = \`${SHADOW_DOM}\`; + </script>`; + +const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent( + TEST_PAGE +)}`; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + + info("Select the host and check that :host is matching"); + await selectNode("#host", inspector); + let selector = getRuleViewRuleEditor(view, 1).selectorText; + is( + selector.querySelector(".matched").textContent, + ":host", + ":host should be matched." + ); + + info("Select a shadow dom element and check that :host is matching"); + const nodeFront = await getNodeFrontInShadowDom( + ".test-span", + "#host", + inspector + ); + await selectNode(nodeFront, inspector); + + selector = getRuleViewRuleEditor(view, 3).selectorText; + is( + selector.querySelector(".matched").textContent, + ":host", + ":host should be matched." + ); + + info("Check that the variable from :host is correctly applied"); + const setColor = getRuleViewProperty( + view, + "span", + "color" + ).valueSpan.querySelector(".ruleview-variable"); + is(setColor.textContent, "--test-color", "--test-color is set correctly"); + is( + setColor.dataset.variable, + "--test-color = red", + "--test-color's dataset.variable is set correctly" + ); + const previewTooltip = await assertShowPreviewTooltip(view, setColor); + ok( + previewTooltip.panel.textContent.includes("--test-color = red"), + "CSS variable preview tooltip shows the expected CSS variable" + ); + await assertTooltipHiddenOnMouseOut(previewTooltip, setColor); +}); |