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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test L10nOverlays Localized text markup</title>
<script type="application/javascript" 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">
/* global L10nOverlays */
"use strict";
function elem(name) {
return function(str) {
const element = document.createElement(name);
// eslint-disable-next-line no-unsanitized/property
element.innerHTML = str;
return element;
};
}
const { translateElement } = L10nOverlays;
// Localized text markup
{
// allowed element
const element = elem("div")`Foo`;
const translation = {
value: "FOO <em>BAR</em> BAZ",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO <em>BAR</em> BAZ");
}
{
// forbidden element
const element = elem("div")`Foo`;
const translation = {
value: 'FOO <img src="img.png" />',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO ");
}
{
// forbiden element with text
const element = elem("div")`Foo`;
const translation = {
value: "FOO <a>a</a>",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO a");
}
{
// nested HTML is forbidden
const element = elem("div")`Foo`;
const translation = {
value: "FOO <em><strong>BAR</strong></em> BAZ",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO <em>BAR</em> BAZ");
}
// Attributes of localized text markup
{
// allowed attribute
const element = elem("div")`Foo Bar`;
const translation = {
value: 'FOO <em title="BAR">BAR</em>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'FOO <em title="BAR">BAR</em>');
}
{
// forbidden attribute
const element = elem("div")`Foo Bar`;
const translation = {
value: 'FOO <em class="BAR" title="BAR">BAR</em>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'FOO <em title="BAR">BAR</em>');
}
{
// attributes do not leak on first translation
const element = elem("div")`
<em title="Foo">Foo</a>`;
const translation = {
value: "<em>FOO</em>",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
"<em>FOO</em>");
}
{
// attributes do not leak on retranslation
const element = elem("div")``;
const translationA = {
value: '<em title="FOO A">FOO A</em>',
attributes: null,
};
const translationB = {
value: "<em>FOO B</em>",
attributes: null,
};
translateElement(element, translationA);
is(element.innerHTML,
'<em title="FOO A">FOO A</em>');
translateElement(element, translationB);
is(element.innerHTML,
"<em>FOO B</em>");
}
</script>
</head>
<body>
</body>
</html>
|
