diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js new file mode 100644 index 0000000000..80540a528d --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js @@ -0,0 +1,107 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +// Test that the breadcrumbs widget refreshes correctly when there are markup +// mutations, even if the currently selected node is a slotted node in the shadow DOM. + +const TEST_URL = `data:text/html;charset=utf-8, + <test-component> + <div slot="slot1" id="el1">content</div> + </test-component> + + <script> + 'use strict'; + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>'; + } + }); + </script>`; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + const { markup } = inspector; + const breadcrumbs = inspector.panelDoc.getElementById( + "inspector-breadcrumbs" + ); + + info("Find and expand the test-component shadow DOM host."); + const hostFront = await getNodeFront("test-component", inspector); + const hostContainer = markup.getContainer(hostFront); + await expandContainer(inspector, hostContainer); + + info("Expand the shadow root"); + const shadowRootContainer = hostContainer.getChildContainers()[0]; + await expandContainer(inspector, shadowRootContainer); + + const slotContainer = shadowRootContainer.getChildContainers()[0]; + + info("Select the slot node and wait for the breadcrumbs update"); + const slotNodeFront = slotContainer.node; + let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated"); + inspector.selection.setNodeFront(slotNodeFront); + await onBreadcrumbsUpdated; + + checkBreadcrumbsContent(breadcrumbs, [ + "html", + "body", + "test-component", + "#shadow-root", + "slot.slot-class", + ]); + + info("Expand the slot"); + await expandContainer(inspector, slotContainer); + + const slotChildContainers = slotContainer.getChildContainers(); + is(slotChildContainers.length, 1, "Expecting 1 slotted child"); + + info("Select the slotted node and wait for the breadcrumbs update"); + const slottedNodeFront = slotChildContainers[0].node; + onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated"); + inspector.selection.setNodeFront(slottedNodeFront); + await onBreadcrumbsUpdated; + + checkBreadcrumbsContent(breadcrumbs, [ + "html", + "body", + "test-component", + "div#el1", + ]); + + info( + "Update the classname of the real element and wait for the breadcrumbs update" + ); + onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { + content.document.getElementById("el1").setAttribute("class", "test"); + }); + await onBreadcrumbsUpdated; + + checkBreadcrumbsContent(breadcrumbs, [ + "html", + "body", + "test-component", + "div#el1.test", + ]); +}); + +function checkBreadcrumbsContent(breadcrumbs, selectors) { + info("Check the output of the breadcrumbs widget"); + const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner"); + is( + container.childNodes.length, + selectors.length, + "Correct number of buttons" + ); + for (let i = 0; i < container.childNodes.length; i++) { + is( + container.childNodes[i].textContent, + selectors[i], + "Text content for button " + i + " is correct" + ); + } +} |