1 files changed, 46 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_sourcemap_css.js b/devtools/client/webconsole/test/browser/browser_webconsole_sourcemap_css.js
new file mode 100644
index 0000000000..4407322c67
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_sourcemap_css.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a missing original source is reported.
+
+const CSS_URL = URL_ROOT + "source-mapped.css";
+
+const PAGE_URL = `data:text/html,
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page to test source map and css</title>
+  </head>
+
+  <link href="${CSS_URL}" rel="stylesheet" type="text/css">
+  <body>
+    <div>
+    There should be a source-mapped CSS warning in the console.
+    </div>
+  </body>
+
+</html>`;
+
+add_task(async function () {
+  await pushPref("devtools.source-map.client-service.enabled", true);
+  await pushPref("devtools.webconsole.filter.css", true);
+
+  const hud = await openNewTabAndConsole(PAGE_URL);
+
+  info("Waiting for css warning");
+  const node = await waitFor(() => findWarningMessage(hud, "octopus"));
+  ok(!!node, "css warning seen");
+
+  info("Waiting for source map to be applied");
+  const found = await waitFor(() => {
+    const messageLocationNode = node.querySelector(".message-location");
+    const url = messageLocationNode.getAttribute("data-url");
+    return url.includes("scss");
+  });
+
+  ok(found, "css warning is source mapped in web console");
+});