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_shadowdom_slot_rules.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_shadowdom_slot_rules.js | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js b/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js new file mode 100644 index 0000000000..f0d3a17d1e --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js @@ -0,0 +1,102 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that when selecting a slot element, the rule view displays the rules for the +// corresponding element. + +const TEST_URL = + `data:text/html;charset=utf-8,` + + encodeURIComponent(` + <html> + <head> + <style> + #el1 { color: red } + #el2 { color: blue } + </style> + </head> + <body> + <test-component> + <div slot="slot1" id="el1">slot1-1</div> + <div slot="slot1" id="el2">slot1-2</div> + <div slot="slot1" id="el3">slot1-2</div> + </test-component> + + <script> + 'use strict'; + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = \` + <style> + ::slotted(#el3) { + color: green; + } + </style> + <slot name="slot1"></slot> + \`; + } + }); + </script> + </body> + </html> +`); + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + const { markup } = inspector; + const ruleview = inspector.getPanel("ruleview").view; + + // <test-component> is a shadow host. + info("Find and expand the test-component shadow DOM host."); + const hostFront = await getNodeFront("test-component", inspector); + + await markup.expandNode(hostFront); + await waitForMultipleChildrenUpdates(inspector); + + info( + "Test that expanding a shadow host shows shadow root and one host child." + ); + const hostContainer = markup.getContainer(hostFront); + + info("Expand the shadow root"); + const childContainers = hostContainer.getChildContainers(); + const shadowRootContainer = childContainers[0]; + await expandContainer(inspector, shadowRootContainer); + + info("Expand the slot"); + const shadowChildContainers = shadowRootContainer.getChildContainers(); + // shadowChildContainers[0] is the style node. + const slotContainer = shadowChildContainers[1]; + await expandContainer(inspector, slotContainer); + + const slotChildContainers = slotContainer.getChildContainers(); + is(slotChildContainers.length, 3, "Expecting 3 slotted children"); + + info( + "Select slotted node and check that the rule view displays correct content" + ); + await selectNode(slotChildContainers[0].node, inspector); + checkRule(ruleview, "#el1", "color", "red"); + + info("Select another slotted node and check the rule view"); + await selectNode(slotChildContainers[1].node, inspector); + checkRule(ruleview, "#el2", "color", "blue"); + + info("Select the last slotted node and check the rule view"); + await selectNode(slotChildContainers[2].node, inspector); + checkRule(ruleview, "::slotted(#el3)", "color", "green"); +}); + +function checkRule(ruleview, selector, name, expectedValue) { + const rule = getRuleViewRule(ruleview, selector); + ok(rule, "ruleview shows the expected rule for slotted " + selector); + const value = getRuleViewPropertyValue(ruleview, selector, name); + is( + value, + expectedValue, + "ruleview shows the expected value for slotted " + selector + ); +} |