1 files changed, 146 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_css_error_impacted_elements.js b/devtools/client/webconsole/test/browser/browser_webconsole_css_error_impacted_elements.js
new file mode 100644
index 0000000000..4276384bfa
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_css_error_impacted_elements.js
@@ -0,0 +1,146 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Create a simple page for the iframe
+const httpServer = createTestHTTPServer();
+httpServer.registerPathHandler(`/`, function (request, response) {
+  response.setStatusLine(request.httpVersion, 200, "OK");
+  response.write(`
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <style>
+          .subframe {
+            color: blouge;
+          }
+        </style>
+      </head>
+      <body class="subframe">
+        <h1 class="subframe">Hello</h1>
+        <p class="subframe">sub-frame</p>
+      </body>
+    </html>`);
+});
+
+const TEST_URI = `data:text/html,<!DOCTYPE html><meta charset=utf8>
+  <style>
+    main {
+      & button {
+        cursor: unknownCursor;
+      }
+    }
+  </style>
+  <main>
+    <button id=1>Button 1</button>
+    <button id=2>Button 2</button>
+  </main>
+  <button id=out>Button 3</button>
+  <iframe src="http://localhost:${httpServer.identity.primaryPort}/"></iframe>
+  `;
+
+add_task(async function () {
+  // Enable CSS Warnings
+  await pushPref("devtools.webconsole.filter.css", true);
+
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const toolbox = hud.toolbox;
+
+  // Load the inspector panel to make it possible to listen for new node selections
+  await toolbox.loadTool("inspector");
+  const inspector = toolbox.getPanel("inspector");
+
+  info("Check the CSS warning message for the top level document");
+  let messageNode = await waitFor(() =>
+    findWarningMessage(hud, "Error in parsing value for ‘cursor’", ".css")
+  );
+
+  info("Click on the expand arrow");
+  messageNode.querySelector(".arrow").click();
+
+  const impactedElementsLabel = await waitFor(() =>
+    messageNode.querySelector(".elements-label")
+  );
+  is(
+    impactedElementsLabel.innerText,
+    "Elements matching selector: :is(main) button",
+    "The message was expanded and shows the expected selector"
+  );
+
+  const objectInspector = messageNode.querySelector(".object-inspector");
+  ok(
+    objectInspector.textContent.includes("NodeList [ button#1, button#2 ]"),
+    `The message shows the impacted elements (got "${objectInspector.textContent}")`
+  );
+
+  let node = objectInspector.querySelector(".objectBox-node");
+  let openInInspectorIcon = node.querySelector(".open-inspector");
+  Assert.notStrictEqual(
+    openInInspectorIcon,
+    null,
+    "The is an open in inspector icon"
+  );
+
+  info(
+    "Clicking on the inspector icon and waiting for the inspector to be selected"
+  );
+  let onInspectorSelected = toolbox.once("inspector-selected");
+  let onInspectorUpdated = inspector.once("inspector-updated");
+  let onNewNode = toolbox.selection.once("new-node-front");
+
+  openInInspectorIcon.click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  let nodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(nodeFront.displayName, "button", "The expected node was selected");
+  is(nodeFront.id, "1", "The expected node was selected");
+
+  info("Go back to the console");
+  await toolbox.selectTool("webconsole");
+
+  info("Check the CSS warning message for the third-party iframe");
+  messageNode = await waitFor(() =>
+    findWarningMessage(hud, "Error in parsing value for ‘color’", ".css")
+  );
+
+  info("Click on the expand arrow");
+  messageNode.querySelector(".arrow").click();
+
+  await waitFor(
+    () => messageNode.querySelectorAll(".objectBox-node").length == 3
+  );
+  ok(
+    messageNode.textContent.includes(
+      "NodeList(3) [ body.subframe, h1.subframe, p.subframe ]"
+    ),
+    "The message was expanded and shows the impacted elements"
+  );
+  node = messageNode.querySelectorAll(".objectBox-node")[2];
+  openInInspectorIcon = node.querySelector(".open-inspector");
+  Assert.notStrictEqual(
+    openInInspectorIcon,
+    null,
+    "The is an open in inspector icon"
+  );
+
+  info(
+    "Clicking on the inspector icon and waiting for the inspector to be selected"
+  );
+  onInspectorSelected = toolbox.once("inspector-selected");
+  onInspectorUpdated = inspector.once("inspector-updated");
+  onNewNode = toolbox.selection.once("new-node-front");
+
+  openInInspectorIcon.click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  nodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(nodeFront.displayName, "p", "The expected node was selected");
+  is(nodeFront.className, "subframe", "The expected node was selected");
+});