1 files changed, 132 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js
new file mode 100644
index 0000000000..ee7fde1584
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js
@@ -0,0 +1,132 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup view is correctly expanded when inspecting an element nested
+// in several shadow roots:
+// - when using the context-menu "Inspect element"
+// - when using the element picker
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <test-outer></test-outer>
+  <script>
+  (function() {
+    'use strict';
+
+    function defineComponent(name, html) {
+      customElements.define(name, class extends HTMLElement {
+        constructor() {
+          super();
+          let shadowRoot = this.attachShadow({mode: 'open'});
+          shadowRoot.innerHTML = html;
+        }
+      });
+    }
+
+    defineComponent('test-outer', \`
+      <test-inner>
+        <test-image></test-image>
+      </test-inner>\`);
+
+    defineComponent('test-inner', \`
+      <div>
+        <div>
+          <div>
+            <slot></slot>
+          </div>
+        </div>
+      </div>\`);
+
+    defineComponent('test-image',
+      \`<div style="display:block; height: 200px; width: 100%; background:red"></div>\`);
+  })();
+  </script>`);
+
+add_task(async function () {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Waiting for element picker to become active");
+  await startPicker(toolbox);
+  info("Click and pick the pick-target");
+  await pickElement(inspector, "test-outer", 10, 10);
+  info("Check that the markup view is displayed as expected");
+  await assertMarkupView(inspector);
+
+  info("Close DevTools before testing Inspect Element");
+  await toolbox.destroy();
+
+  info("Click on Inspect Element for our test-image <div>");
+  // Note: we click on test-outer, because we can't find the <div> using a simple
+  // querySelector. However the click is simulated in the middle of the <test-outer>
+  // component, and will always hit the test <div> which takes all the space.
+  const newInspector = await clickOnInspectMenuItem("test-outer");
+  info("Check again that the markup view is displayed as expected");
+  await assertMarkupView(newInspector);
+});
+
+async function assertMarkupView(inspector) {
+  const outerFront = await getNodeFront("test-outer", inspector);
+  const outerContainer = inspector.markup.getContainer(outerFront);
+  assertContainer(outerContainer, {
+    expanded: true,
+    text: "test-outer",
+    children: 1,
+  });
+
+  const outerShadowContainer = outerContainer.getChildContainers()[0];
+  assertContainer(outerShadowContainer, {
+    expanded: true,
+    text: "#shadow-root",
+    children: 1,
+  });
+
+  const innerContainer = outerShadowContainer.getChildContainers()[0];
+  assertContainer(innerContainer, {
+    expanded: true,
+    text: "test-inner",
+    children: 2,
+  });
+
+  const innerShadowContainer = innerContainer.getChildContainers()[0];
+  const imageContainer = innerContainer.getChildContainers()[1];
+  assertContainer(innerShadowContainer, {
+    expanded: false,
+    text: "#shadow-root",
+  });
+  assertContainer(imageContainer, {
+    expanded: true,
+    text: "test-image",
+    children: 1,
+  });
+
+  const imageShadowContainer = imageContainer.getChildContainers()[0];
+  assertContainer(imageShadowContainer, {
+    expanded: true,
+    text: "#shadow-root",
+    children: 1,
+  });
+
+  const redDivContainer = imageShadowContainer.getChildContainers()[0];
+  assertContainer(redDivContainer, { expanded: false, text: "div" });
+  is(redDivContainer.selected, true, "Div element is selected as expected");
+}
+
+/**
+ * Check if the provided markup container is expanded, has the expected text and the
+ * expected number of children.
+ */
+function assertContainer(container, { expanded, text, children }) {
+  is(container.expanded, expanded, "Container is expanded");
+  assertContainerHasText(container, text);
+  if (expanded) {
+    const childContainers = container.getChildContainers();
+    is(
+      childContainers.length,
+      children,
+      "Container has expected number of children"
+    );
+  }
+}