1 files changed, 70 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js
new file mode 100644
index 0000000000..a49618e0df
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <video id="video-with-subtitles" style="border: 4px solid red">
+    <track label="en" kind="subtitles" srclang="en" src="data:text/vtt,WEBVTT" default>
+  </video>`);
+
+const TEST_ID = "#video-with-subtitles";
+
+// Test that Inspector can show Native Anonymous Content (nac) in user agent widgets, as
+// siblings of the ua widget closed shadow-root.
+add_task(async function testMarkupView() {
+  info(
+    "Test a <video> element with subtitles, expect to see native anonymous content"
+  );
+  const { inspector } = await setup();
+
+  // We should only see the shadow root, the <track> and two NAC elements <img> and <div>.
+  const tree = `
+  video
+    #shadow-root!ignore-children
+    track
+    img
+    class="caption-box"`;
+  await assertMarkupViewAsTree(tree, TEST_ID, inspector);
+});
+
+add_task(async function testElementPicker() {
+  const { inspector, markup, toolbox } = await setup();
+
+  info("Waiting for element picker to become active.");
+  await startPicker(toolbox);
+
+  info("Move mouse over the video element and pick");
+  await hoverElement(inspector, TEST_ID, 50, 50);
+  await pickElement(inspector, TEST_ID, 50, 50);
+
+  info(
+    "Check that the markup view has the expected content after using the picker"
+  );
+  const tree = `
+  body
+    video
+      #shadow-root!ignore-children
+      track
+      img
+      class="caption-box"`;
+  // We are checking body here, because initially the picker bug fixed here was replacing
+  // all the children of the body.
+  await assertMarkupViewAsTree(tree, "body", inspector);
+
+  const moreNodesLink = markup.doc.querySelector(".more-nodes");
+  ok(
+    !moreNodesLink,
+    "There is no 'more nodes' button displayed in the markup view"
+  );
+});
+
+async function setup() {
+  await pushPref("devtools.inspector.showAllAnonymousContent", true);
+
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  return { inspector, markup, toolbox };
+}