1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
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]"
);
},
});
});
|
