Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
const URL =
const URL_2 =
/**
* 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]"
);
},
});
});