1 files changed, 87 insertions, 0 deletions
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_l10n_overlays.xhtml b/dom/l10n/tests/mochitest/l10n_overlays/test_l10n_overlays.xhtml
new file mode 100644
index 0000000000..494958c573
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_l10n_overlays.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
+                 type="text/css"?>
+
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        title="Testing DocumentL10n in XUL environment">
+
+  <linkset>
+    <html:link rel="localization" href="toolkit/about/aboutAddons.ftl"/>
+  </linkset>
+
+  <script type="application/javascript"
+          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" />
+  <script type="application/javascript">
+  <![CDATA[
+  /* global L10nOverlays */
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createXULElement(name);
+      // eslint-disable-next-line no-unsanitized/property
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  SimpleTest.waitForExplicitFinish();
+
+  {
+    // Allowed attribute
+    const element = elem("description")``;
+    const translation = {
+      value: null,
+      attributes: [
+        {name: "title", value: "FOO"},
+      ],
+    };
+    translateElement(element, translation);
+    is(element.outerHTML, '<description xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="FOO"/>');
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    {
+      // Handle HTML translation
+      const element = document.getElementById("test2");
+      const translation = {
+      value: "This is <a data-l10n-name=\"link\">a link</a>.",
+        attributes: null,
+      };
+      translateElement(element, translation);
+      is(element.innerHTML, 'This is <html:a xmlns:html="http://www.w3.org/1999/xhtml" data-l10n-name=\"link\" href="https://www.mozilla.org\">a link</html:a>.');
+    }
+
+    {
+      // Don't handle XUL translation
+      //
+      // Current iteration of L10nOverlays will replace
+      // XUL elements from translation with text.
+      //
+      // See bug 1545704 for details.
+      const element = document.getElementById("test3");
+      const translation = {
+      value: "This is <description data-l10n-name=\"desc\">a desc</description>.",
+        attributes: null,
+      };
+      translateElement(element, translation);
+      is(element.innerHTML, 'This is a desc.');
+    }
+    SimpleTest.finish();
+  }, {once: true});
+
+  ]]>
+  </script>
+
+  <description id="test2">
+    <html:a data-l10n-name="link" href="https://www.mozilla.org"/>
+  </description>
+
+  <box id="test3">
+    <description data-l10n-name="desc"/>
+  </box>
+</window>