1 files changed, 72 insertions, 0 deletions
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html
new file mode 100644
index 0000000000..1254bd814f
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.connectRoot with Web Components</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+    SimpleTest.waitForExplicitFinish();
+
+    class FluentWidget extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      connectedCallback() {
+        document.domLoc.connectRoot(this.shadowRoot);
+        ok(true);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        // Test for mutations applied.
+        let verifyL10n = () => {
+          if (label.textContent.length) {
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            // Notice: In normal tests we do not want to test against any particular
+            // value as per https://firefox-source-docs.mozilla.org/l10n/fluent/tutorial.html#testing
+            // But in this particular test, since we do not rely on actual real
+            // localization, but instead we mock it in the test, we can test
+            // against the actual value safely.
+            is(label.textContent, "Value for Key 1", "localization content applied to element");
+            SimpleTest.finish();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+
+        document.domLoc.setAttributes(label, "key1");
+      }
+    }
+    customElements.define("fluent-widget", FluentWidget);
+  </script>
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Value for Key 1
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  document.domLoc = new DOMLocalization(
+    ["/mock.ftl"],
+    false,
+    l10nReg,
+    ["en-US"],
+  );
+  </script>
+</head>
+<body>
+  <template id="fluent-widget-template">
+    <div>
+      <p id="label"></p>
+    </div>
+  </template>
+  <fluent-widget id="widget1"></fluent-widget>
+</body>
+</html>