1 files changed, 72 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
new file mode 100644
index 0000000000..eb4bd1e050
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 1px red dot
+const shortDataUrl =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4z8DwHwAFAAH/F1FwBgAAAABJRU5ErkJggg==";
+
+// Not a valid base64 image, but will still generate a long text property
+const longDataUrl = new Array(1000 * 1000).join("a");
+
+const TEST_STYLESHEET = `
+body {
+  background-image: url(data:image/png;base64,${shortDataUrl});
+  background-image: url(data:image/png;base64,${longDataUrl});
+}`;
+
+// Serve the stylesheet dynamically from a test HTTPServer to avoid logging an
+// extremely long data-url when adding the tab using our usual test helpers.
+const server = createTestHTTPServer();
+const filepath = "/style.css";
+const cssuri = `http://localhost:${server.identity.primaryPort}${filepath}`;
+server.registerContentType("css", "text/css");
+server.registerPathHandler(filepath, (metadata, response) => {
+  response.write(TEST_STYLESHEET);
+});
+
+const TEST_URL =
+  "data:text/html," +
+  encodeURIComponent(`
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <link href="${cssuri}" rel="stylesheet" />
+    </head>
+    <body></body>
+  </html>
+`);
+
+// Check that long URLs are rendered correctly in the rule view.
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const view = selectRuleView(inspector);
+
+  await selectNode("body", inspector);
+
+  const propertyValues = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  );
+
+  is(propertyValues.length, 2, "Ruleview has 2 propertyvalue elements");
+  ok(
+    propertyValues[0].textContent.startsWith("url(data:image/png"),
+    "Property value for the background image was correctly rendered"
+  );
+
+  ok(
+    !propertyValues[0].querySelector(".propertyvalue-long-text"),
+    "The first background-image is short enough and does not need to be truncated"
+  );
+  ok(
+    !!propertyValues[1].querySelector(".propertyvalue-long-text"),
+    "The second background-image has a special CSS class to be truncated"
+  );
+  const ruleviewContainer =
+    view.styleDocument.getElementById("ruleview-container");
+  ok(
+    ruleviewContainer.scrollHeight === ruleviewContainer.clientHeight,
+    "The ruleview container does not have a scrollbar"
+  );
+});