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
|
<!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>
|
