diff options
Diffstat (limited to '')
17 files changed, 942 insertions, 0 deletions
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_attr_sanitized.html b/dom/l10n/tests/mochitest/dom_localization/test_attr_sanitized.html new file mode 100644 index 0000000000..a9244c9891 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_attr_sanitized.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's attr sanitization functionality</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 = Value for Key 1 + +key2 = Value for <a>Key 2<a/>. +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + SimpleTest.waitForExplicitFinish(); + addLoadEvent(async () => { + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateFragment(document.body); + + const elem1 = document.querySelector("#elem1"); + const elem2 = document.querySelector("#elem2"); + + ok(elem1.textContent.includes("Value for")); + ok(!elem1.hasAttribute("title")); + + ok(elem2.textContent.includes("Value for")); + ok(!elem2.hasAttribute("title")); + + SimpleTest.finish(); + }); + </script> +</head> +<body> + <p id="elem1" title="Old Translation" data-l10n-id="key1"></p> + <p id="elem2" title="Old Translation" data-l10n-id="key2"></p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_connectRoot.html b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot.html new file mode 100644 index 0000000000..83b83757f1 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.connectRoot</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 = Value for Key 1 +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const p1 = document.getElementById("p1"); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateRoots(); + is(!p1.textContent.length, true); + const body = document.body; + domLoc.connectRoot(body); + await domLoc.translateRoots(); + is(!!p1.textContent.length, true); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p id="p1" data-l10n-id="key1"></p> +</body> +</html> 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> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_disconnectRoot.html b/dom/l10n/tests/mochitest/dom_localization/test_disconnectRoot.html new file mode 100644 index 0000000000..fd7344c88e --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_disconnectRoot.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.disconnectRoot</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 = Value for Key 1 +key2 = Value for Key 2 +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const p1 = document.getElementById("p1"); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateRoots(); + is(!p1.textContent.length, true); + + const body = document.body; + + domLoc.connectRoot(body); + await domLoc.translateRoots(); + is(p1.textContent.includes("Key 1"), true); + is(p1.textContent.includes("Key 2"), false); + + domLoc.disconnectRoot(body); + domLoc.setAttributes(p1, "key2"); + await domLoc.translateRoots(); + is(p1.textContent.includes("Key 1"), true); + is(p1.textContent.includes("Key 2"), false); + + domLoc.connectRoot(body); + await domLoc.translateRoots(); + is(p1.textContent.includes("Key 1"), false); + is(p1.textContent.includes("Key 2"), true); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p id="p1" data-l10n-id="key1"></p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_domloc.xhtml b/dom/l10n/tests/mochitest/dom_localization/test_domloc.xhtml new file mode 100644 index 0000000000..a4d4fcc506 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_domloc.xhtml @@ -0,0 +1,68 @@ +<?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" + title="Testing DOMLocalization in XUL environment"> + + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" /> + <script type="application/javascript"> + <![CDATA[ + const l10nReg = new L10nRegistry(); + const fs = [ + { path: "/localization/en-US/mock.ftl", source: ` +file-menu = + .label = File + .accesskey = F +new-tab = + .label = New Tab + .accesskey = N +container = Some text with an <image data-l10n-name="foo"> inside it. +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + SimpleTest.waitForExplicitFinish(); + + + const domLoc = new DOMLocalization( + [], + false, + l10nReg, + ["en-US"], + ); + + async function foo() { + domLoc.addResourceIds(["/mock.ftl"]); + domLoc.connectRoot(document.documentElement); + await domLoc.translateRoots(); + + is(document.getElementById('file-menu').getAttribute('label'), 'File'); + is(document.getElementById('file-menu').getAttribute('accesskey'), 'F'); + + is(document.getElementById('new-tab').getAttribute('label'), 'New Tab'); + is(document.getElementById('new-tab').getAttribute('accesskey'), 'N'); + + ok(document.querySelector("image"), + "Image should still be present after localization."); + SimpleTest.finish(); + } + + window.onload = foo; + + ]]> + </script> + <description data-l10n-id="container"><image data-l10n-name="foo"/></description> + + <menubar id="main-menubar"> + <menu id="file-menu" data-l10n-id="file-menu"> + <menupopup id="menu_FilePopup"> + <menuitem id="new-tab" data-l10n-id="new-tab"> + </menuitem> + </menupopup> + </menu> + </menubar> +</window> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_getAttributes.html b/dom/l10n/tests/mochitest/dom_localization/test_getAttributes.html new file mode 100644 index 0000000000..11996d132a --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_getAttributes.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.getAttributes</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"; + + window.onload = function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + [], + false, + ); + + const p1 = document.querySelectorAll("p")[0]; + const p2 = document.querySelectorAll("p")[1]; + const p3 = document.querySelectorAll("p")[2]; + const attrs1 = domLoc.getAttributes(p1); + const attrs2 = domLoc.getAttributes(p2); + const attrs3 = domLoc.getAttributes(p3); + isDeeply(attrs1, { + id: null, + args: null, + }); + isDeeply(attrs2, { + id: "id1", + args: null, + }); + isDeeply(attrs3, { + id: "id2", + args: { + userName: "John", + }, + }); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p /> + <p data-l10n-id="id1" /> + <p data-l10n-id="id2" data-l10n-args='{"userName": "John"}' /> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_l10n_mutations.html b/dom/l10n/tests/mochitest/dom_localization/test_l10n_mutations.html new file mode 100644 index 0000000000..278baa15dd --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_l10n_mutations.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's MutationObserver</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: ` +title = Hello World +title2 = Hello Another World +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + [], + false, + l10nReg, + ["en-US"], + ); + + const h1 = document.querySelectorAll("h1")[0]; + + domLoc.addResourceIds(["/mock.ftl"]); + domLoc.connectRoot(document.body); + + await domLoc.translateRoots(); + + is(h1.textContent, "Hello World"); + + + const mo = new MutationObserver(function onMutations(mutations) { + is(h1.textContent, "Hello Another World"); + mo.disconnect(); + SimpleTest.finish(); + }); + + mo.observe(h1, { childList: true, characterData: true }); + + domLoc.setAttributes(h1, "title2"); + }; + </script> +</head> +<body> + <div> + <h1 data-l10n-id="title"></h1> + </div> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay.html new file mode 100644 index 0000000000..2c8c219bb2 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's DOMOverlay functionality</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: ` +title = <strong>Hello</strong> World +title2 = This is <a data-l10n-name="link">a link</a>! +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + const p1 = document.querySelectorAll("p")[0]; + const p2 = document.querySelectorAll("p")[1]; + const a = p2.querySelector("a"); + // We want to test that the event listener persists after + // translateFragment(). + a.addEventListener("click", function(e) { + SimpleTest.finish(); + // We cannot connect to non-local connections on automation, so prevent + // the navigation. + e.preventDefault(); + }); + + await domLoc.translateFragment(document.body); + + + is(p1.querySelector("strong").textContent, "Hello"); + + is(p2.querySelector("a").getAttribute("href"), "http://www.mozilla.org"); + is(p2.querySelector("a").textContent, "a link"); + + a.click(); + }; + </script> +</head> +<body> + <p data-l10n-id="title" /> + <p data-l10n-id="title2"> + <a href="http://www.mozilla.org" data-l10n-name="link"></a> + </p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_all.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_all.html new file mode 100644 index 0000000000..c6f285aa38 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_all.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's DOMOverlay functionality</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(); + + SimpleTest.waitForExplicitFinish(); + addLoadEvent(async () => { + const domLoc = new DOMLocalization( + [], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateFragment(document.body).then(() => { + ok(false, "Expected translateFragment to throw on missing l10n-id"); + }, () => { + ok(true, "Expected translateFragment to throw on missing l10n-id"); + }); + SimpleTest.finish(); + }); + </script> +</head> +<body> + <p data-l10n-id="title"> + <a href="http://www.mozilla.org"></a> + <a href="http://www.firefox.com"></a> + <a href="http://www.w3.org"></a> + </p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_children.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_children.html new file mode 100644 index 0000000000..9e4fec1ce2 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_children.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's DOMOverlay functionality</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: ` +title = Visit <a data-l10n-name="mozilla-link">Mozilla</a> or <a data-l10n-name="firefox-link">Firefox</a> website! +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateFragment(document.body); + + const p1 = document.querySelectorAll("p")[0]; + const linkList = p1.querySelectorAll("a"); + + + is(linkList[0].getAttribute("href"), "http://www.mozilla.org"); + is(linkList[0].textContent, "Mozilla"); + is(linkList[1].getAttribute("href"), "http://www.firefox.com"); + is(linkList[1].textContent, "Firefox"); + + is(linkList.length, 2, "There should be exactly two links in the result."); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p data-l10n-id="title"> + <a href="http://www.mozilla.org" data-l10n-name="mozilla-link"></a> + <a href="http://www.firefox.com" data-l10n-name="firefox-link"></a> + <a href="http://www.w3.org" data-l10n-name="w3-link"></a> + </p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_repeated.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_repeated.html new file mode 100644 index 0000000000..a169c27fa0 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_repeated.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's DOMOverlay functionality</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: ` +title = Visit <a data-l10n-name="mozilla-link">Mozilla</a> or <a data-l10n-name="firefox-link">Firefox</a> website! +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateFragment(document.body); + + const p1 = document.querySelectorAll("p")[0]; + const linkList = p1.querySelectorAll("a"); + + + is(linkList[0].getAttribute("href"), "http://www.mozilla.org"); + is(linkList[0].textContent, "Mozilla"); + is(linkList[1].getAttribute("href"), "http://www.firefox.com"); + is(linkList[1].textContent, "Firefox"); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p data-l10n-id="title"> + <a href="http://www.mozilla.org" data-l10n-name="mozilla-link"></a> + <a href="http://www.firefox.com" data-l10n-name="firefox-link"></a> + </p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_sanitized.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_sanitized.html new file mode 100644 index 0000000000..fcc201edb6 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_sanitized.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's DOMOverlay functionality</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 = + .href = https://www.hacked.com + +key2 = + .href = https://pl.wikipedia.org +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + async function test() { + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateFragment(document.body); + + const key1Elem = document.querySelector("[data-l10n-id=key1]"); + const key2Elem = document.querySelector("[data-l10n-id=key2]"); + + + is(key1Elem.hasAttribute("href"), false, "href translation should not be allowed"); + is(key2Elem.getAttribute("href"), "https://pl.wikipedia.org", + "href translation should be allowed"); + + SimpleTest.finish(); + } + + SimpleTest.waitForExplicitFinish(); + addLoadEvent(test); + </script> +</head> +<body> + <a data-l10n-id="key1"></a> + <a data-l10n-id="key2" data-l10n-attrs="href"></a> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_repeated_l10nid.html b/dom/l10n/tests/mochitest/dom_localization/test_repeated_l10nid.html new file mode 100644 index 0000000000..64d585f0a0 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_repeated_l10nid.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization's matching l10nIds functionality</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 = Translation For Key 1 + +key2 = Visit <a data-l10n-name="link">this link<a/>. +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + SimpleTest.waitForExplicitFinish(); + addLoadEvent(async () => { + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + await domLoc.translateFragment(document.body); + + ok(document.querySelector("#elem1").textContent.includes("Key 1")); + ok(document.querySelector("#elem2").textContent.includes("Key 1")); + + const elem3 = document.querySelector("#elem3"); + const elem4 = document.querySelector("#elem4"); + + ok(elem3.textContent.includes("Visit")); + is(elem3.querySelector("a").getAttribute("href"), "http://www.mozilla.org"); + + ok(elem4.textContent.includes("Visit")); + is(elem4.querySelector("a").getAttribute("href"), "http://www.firefox.com"); + + SimpleTest.finish(); + }); + </script> +</head> +<body> + <h1 id="elem1" data-l10n-id="key1"></h1> + <h2 id="elem2" data-l10n-id="key1"></h2> + + <p id="elem3" data-l10n-id="key2"> + <a href="http://www.mozilla.org" data-l10n-name="link"></a> + </p> + + <p id="elem4" data-l10n-id="key2"> + <a href="http://www.firefox.com" data-l10n-name="link"></a> + </p> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_setAttributes.html b/dom/l10n/tests/mochitest/dom_localization/test_setAttributes.html new file mode 100644 index 0000000000..508a15dcd3 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_setAttributes.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.setAttributes and DOMLocalization.prototype.setArgs</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(); + + window.onload = function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + [], + false, + l10nReg, + ); + + const p1 = document.querySelectorAll("p")[0]; + + domLoc.setAttributes(p1, "title"); + is( + p1.getAttribute("data-l10n-id"), + "title", + "The data-l10n-id can be set by setAttributes." + ); + is( + p1.getAttribute("data-l10n-args"), + null, + "The data-l10n-args is unset." + ); + + + domLoc.setAttributes(p1, "title2", {userName: "John"}); + is( + p1.getAttribute("data-l10n-id"), + "title2", + "The data-l10n-id can be set by setAttributes." + ); + is( + p1.getAttribute("data-l10n-args"), + JSON.stringify({userName: "John"}), + "The data-l10n-args can be set by setAttributes." + ); + + domLoc.setArgs(p1, {userName: "Jane"}); + is( + p1.getAttribute("data-l10n-id"), + "title2", + "The data-l10n-id is unchanged by setArgs." + ); + is( + p1.getAttribute("data-l10n-args"), + JSON.stringify({userName: "Jane"}), + "The data-l10n-args can by set by setArgs." + ); + + domLoc.setArgs(p1); + is( + p1.getAttribute("data-l10n-id"), + "title2", + "The data-l10n-id is unchanged by setArgs." + ); + is( + p1.getAttribute("data-l10n-args"), + null, + "The data-l10n-args be unset by setArgs." + ); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p /> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_translateElements.html b/dom/l10n/tests/mochitest/dom_localization/test_translateElements.html new file mode 100644 index 0000000000..7893309ce4 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_translateElements.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.translateElements</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: ` +title = Hello World +link = + .title = Click me +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + const p1 = document.querySelectorAll("p")[0]; + const link1 = document.querySelectorAll("a")[0]; + + await domLoc.translateElements([p1, link1]); + + is(p1.textContent, "Hello World"); + is(link1.getAttribute("title"), "Click me"); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <p data-l10n-id="title" /> + <a data-l10n-id="link" /> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_translateFragment.html b/dom/l10n/tests/mochitest/dom_localization/test_translateFragment.html new file mode 100644 index 0000000000..c5ccfd996a --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_translateFragment.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.translateFragment</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: ` +title = Hello World +subtitle = Welcome to FluentBundle +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + ["/mock.ftl"], + false, + l10nReg, + ["en-US"], + ); + + const frag = document.querySelectorAll("div")[0]; + const h1 = document.querySelectorAll("h1")[0]; + const p1 = document.querySelectorAll("p")[0]; + + await domLoc.translateFragment(frag); + is(h1.textContent, "Hello World"); + is(p1.textContent, "Welcome to FluentBundle"); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <div> + <h1 data-l10n-id="title" /> + <p data-l10n-id="subtitle" /> + </div> +</body> +</html> diff --git a/dom/l10n/tests/mochitest/dom_localization/test_translateRoots.html b/dom/l10n/tests/mochitest/dom_localization/test_translateRoots.html new file mode 100644 index 0000000000..58bfb044b0 --- /dev/null +++ b/dom/l10n/tests/mochitest/dom_localization/test_translateRoots.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test DOMLocalization.prototype.translateRoots</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: ` +title = Hello World +title2 = Hello Another World +` }, + ]; + const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs); + l10nReg.registerSources([source]); + + window.onload = async function() { + SimpleTest.waitForExplicitFinish(); + + const domLoc = new DOMLocalization( + [], + false, + l10nReg, + ["en-US"], + ); + + const frag1 = document.querySelectorAll("div")[0]; + const frag2 = document.querySelectorAll("div")[1]; + const h1 = document.querySelectorAll("h1")[0]; + const h2 = document.querySelectorAll("h2")[0]; + + domLoc.addResourceIds(["/mock.ftl"]); + domLoc.connectRoot(frag1); + domLoc.connectRoot(frag2); + + await domLoc.translateRoots(); + + is(h1.textContent, "Hello World"); + is(h2.textContent, "Hello Another World"); + + SimpleTest.finish(); + }; + </script> +</head> +<body> + <div> + <h1 data-l10n-id="title"></h1> + </div> + <div> + <h2 data-l10n-id="title2"></h2> + </div> +</body> +</html> |