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/markup/test/browser_markup_shadowdom_maxchildren.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/markup/test/browser_markup_shadowdom_maxchildren.js | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_maxchildren.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_maxchildren.js new file mode 100644 index 0000000000..5b0f359cee --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_maxchildren.js @@ -0,0 +1,122 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the markup view properly displays the "more nodes" button both for host +// elements and for slot elements. + +const TEST_URL = `data:text/html;charset=utf-8, +<test-component> + <div>node 1</div><div>node 2</div><div>node 3</div> + <div>node 4</div><div>node 5</div><div>node 6</div> +</test-component> + +<script> + "use strict"; + customElements.define("test-component", class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: "open"}); + shadowRoot.innerHTML = "<slot>some default content</slot>"; + } + connectedCallback() {} + disconnectedCallback() {} + }); +</script>`; + +const MAX_CHILDREN = 5; + +add_task(async function () { + await pushPref("devtools.markup.pagesize", MAX_CHILDREN); + + const { inspector } = await openInspectorForURL(TEST_URL); + + // <test-component> is a shadow host. + info("Find and expand the test-component shadow DOM host."); + const hostFront = await getNodeFront("test-component", inspector); + await inspector.markup.expandNode(hostFront); + await waitForMultipleChildrenUpdates(inspector); + + info( + "Test that expanding a shadow host shows shadow root and direct host children." + ); + const { markup } = inspector; + const hostContainer = markup.getContainer(hostFront); + let childContainers = hostContainer.getChildContainers(); + + is( + childContainers.length, + MAX_CHILDREN, + "Expecting 5 children: shadowroot, 4 host children" + ); + assertContainerHasText(childContainers[0], "#shadow-root"); + for (let i = 1; i < 5; i++) { + assertContainerHasText(childContainers[i], "div"); + assertContainerHasText(childContainers[i], "node " + i); + } + + info("Click on the more nodes button under the host element"); + let moreNodesLink = hostContainer.elt.querySelector(".more-nodes"); + ok( + !!moreNodesLink, + "A 'more nodes' button is displayed in the host container" + ); + moreNodesLink.querySelector("button").click(); + await inspector.markup._waitForChildren(); + + childContainers = hostContainer.getChildContainers(); + is(childContainers.length, 7, "Expecting one additional host child"); + assertContainerHasText(childContainers[6], "div"); + assertContainerHasText(childContainers[6], "node 6"); + + info("Expand the shadow root"); + const shadowRootContainer = childContainers[0]; + const shadowRootFront = shadowRootContainer.node; + await inspector.markup.expandNode(shadowRootFront); + await waitForMultipleChildrenUpdates(inspector); + + const shadowChildContainers = shadowRootContainer.getChildContainers(); + is(shadowChildContainers.length, 1, "Expecting 1 slot child"); + assertContainerHasText(shadowChildContainers[0], "slot"); + + info("Expand the slot"); + const slotContainer = shadowChildContainers[0]; + const slotFront = slotContainer.node; + await inspector.markup.expandNode(slotFront); + await waitForMultipleChildrenUpdates(inspector); + + let slotChildContainers = slotContainer.getChildContainers(); + is(slotChildContainers.length, MAX_CHILDREN, "Expecting 5 slotted children"); + for (const slotChildContainer of slotChildContainers) { + assertContainerHasText(slotChildContainer, "div"); + ok( + slotChildContainer.elt.querySelector(".reveal-link"), + "Slotted container has a reveal link element" + ); + } + + info("Click on the more nodes button under the slot element"); + moreNodesLink = slotContainer.elt.querySelector(".more-nodes"); + ok( + !!moreNodesLink, + "A 'more nodes' button is displayed in the host container" + ); + EventUtils.sendMouseEvent( + { type: "click" }, + moreNodesLink.querySelector("button") + ); + await inspector.markup._waitForChildren(); + + slotChildContainers = slotContainer.getChildContainers(); + is( + slotChildContainers.length, + 7, + "Expecting one additional slotted element and fallback" + ); + assertContainerHasText(slotChildContainers[5], "div"); + ok( + slotChildContainers[5].elt.querySelector(".reveal-link"), + "Slotted container has a reveal link element" + ); +}); |