Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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"
);
});