diff --git a/intl/l10n/moz.build b/intl/l10n/moz.build
index 679a23485a58..20b9d0b7383e 100644
--- a/intl/l10n/moz.build
+++ b/intl/l10n/moz.build
@@ -39,6 +39,7 @@ XPCSHELL_TESTS_MANIFESTS += ['test/xpcshell.ini']
 
 MOCHITEST_MANIFESTS += ['test/mochitest.ini']
 MOCHITEST_CHROME_MANIFESTS += ['test/chrome.ini']
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 
 SPHINX_TREES['l10n'] = 'docs'
 
diff --git a/intl/l10n/test/browser.ini b/intl/l10n/test/browser.ini
new file mode 100644
index 000000000000..e1ef9ad5410c
--- /dev/null
+++ b/intl/l10n/test/browser.ini
@@ -0,0 +1,4 @@
+[document_l10n/non-system-principal/browser_resource_uri.js]
+support-files =
+  document_l10n/non-system-principal/test.html
+  document_l10n/non-system-principal/localization/test.ftl
diff --git a/intl/l10n/test/document_l10n/README.txt b/intl/l10n/test/document_l10n/README.txt
new file mode 100644
index 000000000000..b798a5039a9c
--- /dev/null
+++ b/intl/l10n/test/document_l10n/README.txt
@@ -0,0 +1,3 @@
+Tests in this directory cover support for DocumentL10n
+WebIDL API across different use cases such as
+processes, principals and so on.
diff --git a/intl/l10n/test/document_l10n/non-system-principal/README.txt b/intl/l10n/test/document_l10n/non-system-principal/README.txt
new file mode 100644
index 000000000000..d0cc074166a9
--- /dev/null
+++ b/intl/l10n/test/document_l10n/non-system-principal/README.txt
@@ -0,0 +1,3 @@
+Tests in this directory cover the functionality
+of DocumentL10n WebIDL API in non-system-principal
+scenario.
diff --git a/intl/l10n/test/document_l10n/non-system-principal/browser_resource_uri.js b/intl/l10n/test/document_l10n/non-system-principal/browser_resource_uri.js
new file mode 100644
index 000000000000..5f8b9078805f
--- /dev/null
+++ b/intl/l10n/test/document_l10n/non-system-principal/browser_resource_uri.js
@@ -0,0 +1,70 @@
+const { L10nRegistry, FileSource } = ChromeUtils.import("resource://gre/modules/L10nRegistry.jsm", {});
+
+let uri = "chrome://mochitests/content/browser/intl/l10n/test/document_l10n/non-system-principal/";
+let protocol = Services.io.getProtocolHandler("resource")
+                          .QueryInterface(Ci.nsIResProtocolHandler);
+
+protocol.setSubstitution("l10n-test", Services.io.newURI(uri));
+
+// Since we want the mock source to work with all locales, we're going
+// to register it for currently used locales, and we'll put the path that
+// doesn't use the `{locale}` component to make it work irrelevant of
+// what locale the mochitest is running in.
+//
+// Notice: we're using a `chrome://` protocol here only for convenience reasons.
+// Real sources should use `resource://` protocol.
+let locales = Services.locale.appLocalesAsBCP47;
+let mockSource = new FileSource("test", locales, `${uri}localization/`);
+L10nRegistry.registerSource(mockSource);
+
+registerCleanupFunction(() => {
+  protocol.setSubstitution("l10n-test", null);
+  L10nRegistry.removeSource("test");
+});
+
+
+add_task(async () => {
+  await BrowserTestUtils.withNewTab("resource://l10n-test/test.html", async (browser) => {
+    await ContentTask.spawn(browser, null, async function() {
+      let document = content.document;
+      let window = document.defaultView;
+
+      let {customMsg, l10nArgs} = await document.testsReadyPromise;
+
+      let desc = document.getElementById("main-desc");
+
+      // We can test here for a particular value because we're
+      // using a mock file source which is locale independent.
+      //
+      // If you're writing a test that verifies that a UI
+      // widget got real localization, you should not rely on
+      // the particular value, but rather on the content not
+      // being empty (to keep the test pass in non-en-US locales).
+      is(desc.textContent, "This is a mock page title");
+
+      // Test for l10n.getAttributes
+      let label = document.getElementById("label1");
+      is(l10nArgs.id, "subtitle");
+      is(l10nArgs.args.name, "Firefox");
+
+      // Test for manual value formatting
+      is(customMsg, "This is a custom message formatted from JS.");
+
+      // Since we applied the `data-l10n-id` attribute
+      // on `label` in this microtask, we have to wait for
+      // the next paint to verify that the MutationObserver
+      // applied the translation.
+      await new Promise((resolve) => {
+        let verifyL10n = () => {
+          if (!label.textContent.includes("Firefox")) {
+            window.requestAnimationFrame(verifyL10n);
+          } else {
+            resolve();
+          }
+        };
+
+        window.requestAnimationFrame(verifyL10n);
+      });
+    });
+  });
+});
diff --git a/intl/l10n/test/document_l10n/non-system-principal/localization/test.ftl b/intl/l10n/test/document_l10n/non-system-principal/localization/test.ftl
new file mode 100644
index 000000000000..a5da5a8f0083
--- /dev/null
+++ b/intl/l10n/test/document_l10n/non-system-principal/localization/test.ftl
@@ -0,0 +1,4 @@
+page-title = This is a mock page title
+subtitle = This is a label for { $name }
+
+custom-message = This is a custom message formatted from JS.
diff --git a/intl/l10n/test/document_l10n/non-system-principal/test.html b/intl/l10n/test/document_l10n/non-system-principal/test.html
new file mode 100644
index 000000000000..7ac680e84eae
--- /dev/null
+++ b/intl/l10n/test/document_l10n/non-system-principal/test.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DocumentL10n in HTML environment</title>
+  <link rel="localization" href="test.ftl"/>
+  <script type="text/javascript">
+    document.testsReadyPromise = new Promise(async (resolve) => {
+      // The test is in this file to ensure that we're testing
+      // the behavior in a non-system principal.
+      document.addEventListener("DOMContentLoaded", async () => {
+        await document.l10n.ready;
+
+        // Assign the localization from JS
+        let label = document.getElementById("label1");
+        document.l10n.setAttributes(
+          label,
+          "subtitle",
+          {
+            name: "Firefox",
+          }
+        );
+
+        const customMsg = await document.l10n.formatValue("custom-message");
+        const l10nArgs = document.l10n.getAttributes(label);
+        resolve({customMsg, l10nArgs});
+      }, {once: true});
+    });
+  </script>
+</head>
+<body>
+  <h1 id="main-desc" data-l10n-id="page-title"></h1>
+
+  <p id="label1"></p>
+</body>
+</html>