summaryrefslogtreecommitdiffstats
path: root/dom/l10n/tests/mochitest/l10n_mutations
diff options
context:
space:
mode:
Diffstat (limited to 'dom/l10n/tests/mochitest/l10n_mutations')
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html30
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html28
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html39
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html148
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html44
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html68
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html67
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html37
-rw-r--r--dom/l10n/tests/mochitest/l10n_mutations/test_template.html37
9 files changed, 498 insertions, 0 deletions
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html
new file mode 100644
index 0000000000..e3a9819728
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for ContentAppended after DOMContentLoaded</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", function() {
+ let elem = document.createElement("div");
+ document.l10n.setAttributes(elem, "crash-reports-title");
+ is(elem.textContent.length, 0);
+ let verifyL10n = () => {
+ if (elem.textContent.length) {
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+ document.body.appendChild(elem);
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html
new file mode 100644
index 0000000000..825464e7b8
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for ContentAppended before DOMContentLoaded</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+</head>
+<body>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ let elem = document.createElement("div");
+ document.l10n.setAttributes(elem, "crash-reports-title");
+ is(elem.textContent.length, 0);
+ let verifyL10n = () => {
+ if (elem.textContent.length) {
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+ document.body.appendChild(elem);
+ </script>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html b/dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html
new file mode 100644
index 0000000000..8efb3203c6
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for appending a fragment after DOMContentLoaded</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", function() {
+ let frag = document.createDocumentFragment();
+ let elem = document.createElement("div");
+ document.l10n.setAttributes(elem, "crash-reports-title");
+ frag.appendChild(elem);
+
+ let elem2 = document.createElement("div");
+ document.l10n.setAttributes(elem2, "crash-reports-title");
+ frag.appendChild(elem2);
+
+ is(elem.textContent.length, 0);
+ is(elem2.textContent.length, 0);
+
+ let verifyL10n = () => {
+ if (elem.textContent.length && elem2.textContent.length) {
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+ document.body.appendChild(frag);
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html b/dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html
new file mode 100644
index 0000000000..bb9d9fc24d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html
@@ -0,0 +1,148 @@
+<!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">
+ "use strict";
+ const l10nReg = new L10nRegistry();
+ const fs = [
+ { path: "/localization/en-US/mock.ftl", source: `
+key1 = Key 1
+key2 = Key 2
+key3 = Key 3
+key4 = Key 4
+` },
+ ];
+ const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+ l10nReg.registerSources([source]);
+
+ document.domLoc = new DOMLocalization(
+ ["/mock.ftl"],
+ false,
+ l10nReg,
+ ["en-US"],
+ );
+ document.domLoc.connectRoot(document.documentElement);
+ </script>
+ <script type="application/javascript">
+ // In this test we're going to use two elements - `shadowLabel` and `lightLabel`.
+ // We create a new `DOMLocalization` and connect it to the document's root first.
+ //
+ // Then, we connect and disconnect it on root and element within the shadow DOM and
+ // apply new `data-l10n-id` onto both labels.
+ // Once the `lightLabel` get a new translation, we check what happened to the `shadowLabel`
+ // to ensure that depending on the status of connection between the shadow DOM and the `DOMLocalization`
+ // the `shadowLabel` either gets translated or not.
+
+ 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() {
+ this.runTests();
+ }
+ runTests() {
+ // First, let's verify that the mutation will not be applied since
+ // the shadow DOM is not connected to the `DOMLocalization`.
+ let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+ let lightLabel = document.getElementById("lightLabel");
+
+ let verifyL10n = () => {
+ if (lightLabel.textContent == "Key 1") {
+ is(shadowLabel.textContent, "", "document.l10n content not applied to an element in the shadow DOM");
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ this.testPart2();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+
+ document.domLoc.setAttributes(shadowLabel, "key1");
+ document.domLoc.setAttributes(lightLabel, "key1");
+ }
+ testPart2() {
+ // Next, we connect the shadow root to DOMLocalization and the next attribute
+ // change should result in a translation being applied.
+ document.domLoc.connectRoot(this.shadowRoot);
+
+ let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+ let lightLabel = document.getElementById("lightLabel");
+
+ // Test that mutation was applied.
+ let verifyL10n = () => {
+ if (lightLabel.textContent == "Key 2") {
+ is(shadowLabel.textContent, "Key 2", "document.l10n content applied to an element in the shadow DOM");
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ this.testPart3();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+
+ document.domLoc.setAttributes(shadowLabel, "key2");
+ document.domLoc.setAttributes(lightLabel, "key2");
+ }
+ testPart3() {
+ // After we disconnect the shadow root, the mutations should
+ // not be applied onto the `shadowLabel`.
+ document.domLoc.disconnectRoot(this.shadowRoot);
+
+ let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+ let lightLabel = document.getElementById("lightLabel");
+
+ let verifyL10n = () => {
+ if (lightLabel.textContent == "Key 3") {
+ is(shadowLabel.textContent, "Key 2", "document.l10n content not applied to an element in the shadow DOM");
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ this.testPart4();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+
+ document.domLoc.setAttributes(shadowLabel, "key3");
+ document.domLoc.setAttributes(lightLabel, "key3");
+ }
+ testPart4() {
+ // Finally, we'll connect it back, but this time, we'll connect
+ // not the shadow root, but an element within it.
+ // This should still result in the `shadowLabel` receiving a new translation.
+ document.domLoc.connectRoot(this.shadowRoot.getElementById("shadowDiv"));
+
+ let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+ let lightLabel = document.getElementById("lightLabel");
+
+ // Test that mutation was applied.
+ let verifyL10n = () => {
+ if (lightLabel.textContent == "Key 4") {
+ is(shadowLabel.textContent, "Key 4", "document.l10n content applied to an element in the shadow DOM");
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+
+ document.domLoc.setAttributes(shadowLabel, "key4");
+ document.domLoc.setAttributes(lightLabel, "key4");
+ }
+ }
+ customElements.define("fluent-widget", FluentWidget);
+ </script>
+</head>
+<body>
+ <p id="lightLabel"></p>
+
+ <template id="fluent-widget-template">
+ <div id="shadowDiv">
+ <p id="shadowLabel"></p>
+ </div>
+ </template>
+ <fluent-widget id="widget1"></fluent-widget>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html b/dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html
new file mode 100644
index 0000000000..d225153418
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for Pause/Resume Observing</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", function() {
+ let elem1 = document.createElement("div");
+ let elem2 = document.createElement("div");
+ let elem3 = document.createElement("div");
+ is(elem1.textContent.length, 0);
+ is(elem2.textContent.length, 0);
+ is(elem3.textContent.length, 0);
+
+ document.l10n.setAttributes(elem1, "crash-reports-title");
+ document.l10n.setAttributes(elem2, "crash-reports-title");
+ document.l10n.setAttributes(elem3, "crash-reports-title");
+
+ let verifyL10n = () => {
+ if (elem1.textContent.length &&
+ !elem2.textContent.length &&
+ elem3.textContent.length) {
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+ document.body.appendChild(elem1);
+ document.l10n.pauseObserving();
+ document.body.appendChild(elem2);
+ document.l10n.resumeObserving();
+ document.body.appendChild(elem3);
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html
new file mode 100644
index 0000000000..347e858d52
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for removing element</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", async function() {
+ // This element will be added to DOM and expected to be localized.
+ let elem = document.createElement("div");
+
+ // This element will be added to DOM, then immediatelly removed and
+ // expected *not* to be localized.
+ let elem2 = document.createElement("div");
+
+ // This element will be added to DOM, then immediatelly removed and
+ // and then immediatelly re-added, and expected to be localized.
+ let elem3 = document.createElement("div");
+
+ // This element will be added to DOM, then immediatelly removed and
+ // and then re-added later, and expected to be localized.
+ let elem4 = document.createElement("div");
+
+ document.l10n.setAttributes(elem, "crash-reports-title");
+ document.l10n.setAttributes(elem2, "crash-reports-title");
+ document.l10n.setAttributes(elem3, "crash-reports-title");
+ document.l10n.setAttributes(elem4, "crash-reports-title");
+
+ document.body.appendChild(elem);
+ document.body.appendChild(elem2);
+ document.body.appendChild(elem3);
+ document.body.appendChild(elem4);
+
+ is(elem.textContent.length, 0);
+ is(elem2.textContent.length, 0);
+ is(elem3.textContent.length, 0);
+ is(elem4.textContent.length, 0);
+
+ document.body.removeChild(elem2);
+ document.body.removeChild(elem3);
+ document.body.removeChild(elem4);
+
+ document.body.appendChild(elem3);
+
+ // 1. `elem` should be localized since it is in DOM.
+ await SimpleTest.waitForCondition(() => elem.textContent.length);
+ // 2. `elem2` was removed before l10n frame, so it should remain not localized.
+ is(elem2.textContent.length, 0);
+ // 3. `elem3` was added/removed/re-added so it should become localized.
+ await SimpleTest.waitForCondition(() => elem3.textContent.length);
+ // 4. `elem4` was not re-added, so it shouldn't be localized.
+ is(elem4.textContent.length, 0);
+
+ document.body.appendChild(elem4);
+ // 5. Now we re-added `elem4` to DOM so it should get localized.
+ await SimpleTest.waitForCondition(() => elem4.textContent.length);
+ SimpleTest.finish();
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html
new file mode 100644
index 0000000000..4f4d0fe1d8
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for removing fragment</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", async function() {
+ let div = document.createElement("div");
+ let div2 = document.createElement("div");
+
+ let elem = document.createElement("p");
+ let elem2 = document.createElement("p");
+ let elem3 = document.createElement("p");
+ let elem4 = document.createElement("p");
+
+ document.l10n.setAttributes(elem, "crash-reports-title");
+ document.l10n.setAttributes(elem2, "crash-reports-title");
+ document.l10n.setAttributes(elem3, "crash-reports-title");
+ document.l10n.setAttributes(elem4, "crash-reports-title");
+
+ div.appendChild(elem);
+ div.appendChild(elem2);
+ div.appendChild(elem3);
+ div.appendChild(elem4);
+
+ document.body.appendChild(div);
+
+ is(elem.textContent.length, 0);
+ is(elem2.textContent.length, 0);
+ is(elem3.textContent.length, 0);
+ is(elem4.textContent.length, 0);
+
+ document.body.removeChild(div);
+
+ div2.appendChild(elem);
+ div2.appendChild(elem3);
+
+ document.body.appendChild(div2);
+
+ // 1. `elem` should be localized since it is in DOM.
+ await SimpleTest.waitForCondition(() => !!elem.textContent.length);
+
+ // 2. `elem2` was removed before l10n frame, so it should remain not localized.
+ is(elem2.textContent.length, 0);
+
+ // 3. `elem3` was added/removed/re-added so it should become localized.
+ await SimpleTest.waitForCondition(() => !!elem3.textContent.length);
+
+ // 4. `elem4` was not re-added, so it shouldn't be localized.
+ is(elem4.textContent.length, 0);
+
+ document.body.appendChild(div);
+ // 5. Now we re-added `elem4` to DOM so it should get localized.
+ await SimpleTest.waitForCondition(() => !!elem4.textContent.length);
+ SimpleTest.finish();
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html b/dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html
new file mode 100644
index 0000000000..762353a06c
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations for AttributeChange after DOMContentLoaded</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <link rel="localization" href="toolkit/about/aboutCompat.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", async function() {
+ await document.l10n.ready;
+ let elem = document.getElementById("elem1");
+ let elem2 = document.getElementById("elem2");
+ is(elem.textContent.length, 0);
+ is(elem2.textContent.includes("Initial string"), true);
+ document.l10n.setAttributes(elem, "crash-reports-title");
+ elem2.setAttribute("data-l10n-args", JSON.stringify({bug: "New string"}));
+
+ let verifyL10n = () => {
+ if (elem.textContent.length && elem2.textContent.includes("New string")) {
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+ });
+ </script>
+</head>
+<body>
+ <div id="elem1"></div>
+ <div id="elem2" data-l10n-id="label-more-information" data-l10n-args='{"bug":"Initial string"}'></div>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_template.html b/dom/l10n/tests/mochitest/l10n_mutations/test_template.html
new file mode 100644
index 0000000000..d02ecfcd4d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_template.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test L10n Mutations in Template elements</title>
+ <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+ <script type="application/javascript">
+ "use strict";
+ SimpleTest.waitForExplicitFinish();
+
+ document.addEventListener("DOMContentLoaded", async () => {
+ await document.l10n.ready;
+ let template = document.getElementById("template");
+ let clone = document.importNode(template.content, true);
+ let span = clone.querySelector("span");
+ is(span.textContent.length, 0,
+ "Element has not been translated while in template");
+ document.body.appendChild(clone);
+
+ let verifyL10n = () => {
+ if (span.textContent.length) {
+ window.removeEventListener("MozAfterPaint", verifyL10n);
+ SimpleTest.finish();
+ }
+ };
+ window.addEventListener("MozAfterPaint", verifyL10n);
+ });
+ </script>
+</head>
+<body>
+ <template id="template">
+ <span data-l10n-id="crash-reports-title"></span>
+ </template>
+</body>
+</html>