1 files changed, 98 insertions, 0 deletions
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent_lazy.html b/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent_lazy.html
new file mode 100644
index 0000000000..b74bbc00c8
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent_lazy.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Web Component connecting into Document's l10n</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();
+
+    // In this test we are introducing two widgets. The only difference between them
+    // is that the first one is using `connectRoot` with the `aTranslate` argument set to `true`,
+    // and the other one to `false`.
+    //
+    // In this test, we will inject both of them lazily, after initial parsing is completed.
+    // For a test that verifies the behavior when they're injected during parsing, see
+    // `test_connectRoot_webcomponent.html` test.
+    //
+    // The expected difference is that when both get lazily injected into the DOM, the first one
+    // will get translated, while the other will not.
+    // The latter behavior will be used by widgets that will want to translate the initial DOM on their
+    // own before connecting the root.
+
+    let firstWidgetTranslated = false;
+
+    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() {
+        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
+
+        document.l10n.connectRoot(this.shadowRoot, true);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        let verifyL10n = () => {
+          if (label.textContent.length) {
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            is(label.textContent, "Learn more", "localization content applied to element");
+            firstWidgetTranslated = true;
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+      }
+    }
+
+    class FluentWidget2 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() {
+        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
+
+        document.l10n.connectRoot(this.shadowRoot, false);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        let verifyL10n = () => {
+          if (firstWidgetTranslated) {
+            is(label.textContent.length, 0, "This widget should remain untranslated.");
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            SimpleTest.finish();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+      }
+    }
+
+    customElements.define("fluent-widget", FluentWidget);
+    customElements.define("fluent-widget2", FluentWidget2);
+
+    window.addEventListener("load", () => {
+      window.requestIdleCallback(async () => {
+        let widget = document.createElement("fluent-widget");
+        document.body.appendChild(widget);
+        let widget2 = document.createElement("fluent-widget2");
+        document.body.appendChild(widget2);
+      });
+    }, { once: true });
+  </script>
+</head>
+<body>
+  <template id="fluent-widget-template">
+    <div>
+      <button id="label" data-l10n-id="do-not-track-learn-more"></button>
+    </div>
+  </template>
+</body>
+</html>