diff options
Diffstat (limited to 'toolkit/components/translations/tests/browser/browser_translations_shadow_dom_mutation.js')
-rw-r--r-- | toolkit/components/translations/tests/browser/browser_translations_shadow_dom_mutation.js | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/toolkit/components/translations/tests/browser/browser_translations_shadow_dom_mutation.js b/toolkit/components/translations/tests/browser/browser_translations_shadow_dom_mutation.js new file mode 100644 index 0000000000..c5a7891ee2 --- /dev/null +++ b/toolkit/components/translations/tests/browser/browser_translations_shadow_dom_mutation.js @@ -0,0 +1,164 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const URL = + "https://example.com/browser/toolkit/components/translations/tests/browser/translations-tester-shadow-dom-mutation-es.html"; + +const URL_2 = + "https://example.com/browser/toolkit/components/translations/tests/browser/translations-tester-shadow-dom-mutation-es-2.html"; + +/** + * Check that the translation feature works with mutations around ShadowDOM + */ +add_task(async function test_shadow_dom_mutation() { + await autoTranslatePage({ + page: URL, + languagePairs: [ + { fromLang: "es", toLang: "en" }, + { fromLang: "en", toLang: "es" }, + ], + runInPage: async TranslationsTest => { + await TranslationsTest.assertTranslationResult( + "Basic translation works", + function () { + return content.document.querySelector("h1"); + }, + "THIS IS CONTENT IN LIGHT DOM [es to en, html]" + ); + + info("Test 1: Mutation on existing shadow tree"); + const root1 = content.document.getElementById("host1").shadowRoot; + root1.innerHTML = "<p>This is mutated content in the Shadow DOM</p>"; + await TranslationsTest.assertTranslationResult( + "The content is translated when shadow tree is modified", + function () { + const root1 = content.document.getElementById("host1").shadowRoot; + return root1.querySelector("p"); + }, + "THIS IS MUTATED CONTENT IN THE SHADOW DOM [es to en, html]" + ); + + info("Test 2: Shadow host added later"); + const host2 = content.document.createElement("div"); + host2.id = "host2"; + const root2 = host2.attachShadow({ mode: "open" }); + root2.innerHTML = "<p>This is content in a shadow DOM</p>"; + content.document.body.appendChild(host2); + await TranslationsTest.assertTranslationResult( + "The content is translated when the host element is added later", + function () { + const root2 = content.document.getElementById("host2").shadowRoot; + return root2.querySelector("p"); + }, + "THIS IS CONTENT IN A SHADOW DOM [es to en, html]" + ); + + info("Test 3: Mutation Works on newly added shadow tree"); + const newNode = content.document.createElement("p"); + newNode.innerHTML = + "<p>This is mutated content in newly added shadow DOM</p>"; + newNode.id = "newNode"; + root2.appendChild(newNode); + await TranslationsTest.assertTranslationResult( + "The content is translated when a new node is added to the newly added shadow tree", + function () { + const root2 = content.document.getElementById("host2").shadowRoot; + return root2.getElementById("newNode"); + }, + "THIS IS MUTATED CONTENT IN NEWLY ADDED SHADOW DOM [es to en, html]" + ); + }, + }); +}); + +add_task(async function test_shadow_dom_mutation_nested_1() { + await autoTranslatePage({ + page: URL, + languagePairs: [ + { fromLang: "es", toLang: "en" }, + { fromLang: "en", toLang: "es" }, + ], + runInPage: async TranslationsTest => { + await TranslationsTest.assertTranslationResult( + "Basic translation works", + function () { + return content.document.querySelector("h1"); + }, + "THIS IS CONTENT IN LIGHT DOM [es to en, html]" + ); + + info("Test 1: Nested shadow host added later"); + const root1 = content.document.getElementById("host1").shadowRoot; + root1.innerHTML = "<div id='innerHost'></div>"; + + const innerHost = root1.getElementById("innerHost"); + innerHost.id = "innerHost"; + const innerRoot = innerHost.attachShadow({ mode: "open" }); + innerRoot.innerHTML = "<p>This is content in nested shadow DOM</p>"; + + await TranslationsTest.assertTranslationResult( + "The content is translated when a inner host element is added later", + function () { + const root1 = content.document.getElementById("host1").shadowRoot; + const innerRoot = root1.getElementById("innerHost").shadowRoot; + return innerRoot.querySelector("p"); + }, + "THIS IS CONTENT IN NESTED SHADOW DOM [es to en, html]" + ); + + info("Test 2: Mutation on inner shadow tree works"); + const newInnerNode = content.document.createElement("p"); + newInnerNode.innerHTML = + "<p>This is mutated content in nested shadow DOM</p>"; + newInnerNode.id = "newInnerNode"; + innerRoot.appendChild(newInnerNode); + await TranslationsTest.assertTranslationResult( + "The content is translated when inner shadow tree is mutated", + function () { + const root = content.document.getElementById("host1").shadowRoot; + const innerRoot = root.getElementById("innerHost").shadowRoot; + return innerRoot.getElementById("newInnerNode"); + }, + "THIS IS MUTATED CONTENT IN NESTED SHADOW DOM [es to en, html]" + ); + }, + }); +}); + +// Test to ensure mutations on a nested shadow tree that is +// added before pageload works. +add_task(async function test_shadow_dom_mutation_nested_2() { + await autoTranslatePage({ + page: URL_2, + languagePairs: [ + { fromLang: "es", toLang: "en" }, + { fromLang: "en", toLang: "es" }, + ], + runInPage: async TranslationsTest => { + await TranslationsTest.assertTranslationResult( + "Basic translation works", + function () { + return content.document.querySelector("h1"); + }, + "THIS IS CONTENT IN LIGHT DOM [es to en, html]" + ); + + const root1 = content.document.getElementById("host1").shadowRoot; + const innerRoot = root1.getElementById("innerHost").shadowRoot; + innerRoot.innerHTML = + "<p>This is mutated content in inner shadow DOM</p>"; + + await TranslationsTest.assertTranslationResult( + "The content is translated when the inner shadow tree is modified", + function () { + const root1 = content.document.getElementById("host1").shadowRoot; + const innerRoot = root1.getElementById("innerHost").shadowRoot; + return innerRoot.querySelector("p"); + }, + "THIS IS MUTATED CONTENT IN INNER SHADOW DOM [es to en, html]" + ); + }, + }); +}); |