1 files changed, 97 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js
new file mode 100644
index 0000000000..ece16815ad
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js
@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the markup-view navigation works correctly with shadow dom slotted nodes.
+// Each slotted nodes has two containers representing the same node front in the markup
+// view, we need to make sure that navigating to the slotted version selects the slotted
+// container, and navigating to the non-slotted element selects the non-slotted container.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component class="test-component">
+    <div slot="slot1" class="slotted1"><div class="slot1-child">slot1-1</div></div>
+    <div slot="slot1" class="slotted2">slot1-2</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="slot1" name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+const TEST_DATA = [
+  ["KEY_PageUp", "html"],
+  ["KEY_ArrowDown", "head"],
+  ["KEY_ArrowDown", "body"],
+  ["KEY_ArrowDown", "test-component"],
+  ["KEY_ArrowRight", "test-component"],
+  ["KEY_ArrowDown", "shadow-root"],
+  ["KEY_ArrowRight", "shadow-root"],
+  ["KEY_ArrowDown", "slot1"],
+  ["KEY_ArrowRight", "slot1"],
+  ["KEY_ArrowDown", "div", "slotted1"],
+  ["KEY_ArrowDown", "div", "slotted2"],
+  ["KEY_ArrowDown", "slotted1"],
+  ["KEY_ArrowRight", "slotted1"],
+  ["KEY_ArrowDown", "slot1-child"],
+  ["KEY_ArrowDown", "slotted2"],
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Making sure the markup-view frame is focused");
+  inspector.markup._frame.focus();
+
+  info("Starting to iterate through the test data");
+  for (const [key, expected, slottedClassName] of TEST_DATA) {
+    info("Testing step: " + key + " to navigate to " + expected);
+    EventUtils.synthesizeKey(key);
+
+    info("Making sure markup-view children get updated");
+    await waitForChildrenUpdated(inspector);
+
+    info("Checking the right node is selected");
+    checkSelectedNode(key, expected, slottedClassName, inspector);
+  }
+
+  // Same as in browser_markup_navigation.js, use a single catch-call event listener.
+  await inspector.once("inspector-updated");
+});
+
+function checkSelectedNode(key, expected, slottedClassName, inspector) {
+  const selectedContainer = inspector.markup.getSelectedContainer();
+  const slotted = !!slottedClassName;
+
+  is(
+    selectedContainer.isSlotted(),
+    slotted,
+    `Selected container is ${slotted ? "slotted" : "not slotted"} as expected`
+  );
+  is(
+    inspector.selection.isSlotted(),
+    slotted,
+    `Inspector selection is also ${slotted ? "slotted" : "not slotted"}`
+  );
+  ok(
+    selectedContainer.elt.textContent.includes(expected),
+    "Found expected content: " +
+      expected +
+      " in container after pressing " +
+      key
+  );
+
+  if (slotted) {
+    is(
+      selectedContainer.node.className,
+      slottedClassName,
+      "Slotted has the expected classname " + slottedClassName
+    );
+  }
+}