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"
+  );
+});