test_functional_children.html (8987B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test L10nOverlays functional children test</title> 6 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 8 <script type="application/javascript"> 9 /* global L10nOverlays */ 10 "use strict"; 11 12 function elem(name) { 13 return function(str) { 14 const element = document.createElement(name); 15 element.innerHTML = str; 16 return element; 17 }; 18 } 19 20 const { translateElement } = L10nOverlays; 21 22 // Child without name 23 { 24 // in source 25 const element = elem("div")` 26 <a>Foo</a>`; 27 const translation = { 28 value: "FOO", 29 attributes: null, 30 }; 31 translateElement(element, translation); 32 is(element.innerHTML, "FOO"); 33 } 34 35 { 36 // in translation 37 const element = elem("div")`Foo`; 38 const translation = { 39 value: "<a>FOO</a>", 40 attributes: null, 41 }; 42 translateElement(element, translation); 43 is(element.innerHTML, "FOO"); 44 } 45 46 { 47 // in both 48 const element = elem("div")` 49 <a>Foo</a>`; 50 const translation = { 51 value: "<a>FOO</a>", 52 attributes: null, 53 }; 54 translateElement(element, translation); 55 is(element.innerHTML, "FOO"); 56 } 57 58 // Child with name 59 { 60 // in source 61 const element = elem("div")` 62 <a data-l10n-name="foo">Foo</a>`; 63 const translation = { 64 value: "<a>FOO</a>", 65 attributes: null, 66 }; 67 translateElement(element, translation); 68 is(element.innerHTML, "FOO"); 69 } 70 71 { 72 // in translation 73 const element = elem("div")` 74 <a>Foo</a>`; 75 const translation = { 76 value: '<a data-l10n-name="foo">FOO</a>', 77 attributes: null, 78 }; 79 translateElement(element, translation); 80 is(element.innerHTML, "FOO"); 81 } 82 83 { 84 // in both 85 const element = elem("div")` 86 <a data-l10n-name="foo">Foo</a>`; 87 const translation = { 88 value: '<a data-l10n-name="foo">FOO</a>', 89 attributes: null, 90 }; 91 translateElement(element, translation); 92 is(element.innerHTML, '<a data-l10n-name="foo">FOO</a>'); 93 } 94 95 { 96 // translation without text content 97 const element = elem("div")` 98 <a data-l10n-name="foo">Foo</a>`; 99 const translation = { 100 value: '<a data-l10n-name="foo"></a>', 101 attributes: null, 102 }; 103 translateElement(element, translation); 104 is(element.innerHTML, '<a data-l10n-name="foo"></a>'); 105 } 106 107 { 108 // different names 109 const element = elem("div")` 110 <a data-l10n-name="foo">Foo</a>`; 111 const translation = { 112 value: '<a data-l10n-name="bar">BAR</a>', 113 attributes: null, 114 }; 115 translateElement(element, translation); 116 is(element.innerHTML, "BAR"); 117 } 118 119 { 120 // of different types 121 const element = elem("div")` 122 <a data-l10n-name="foo">Foo</a>`; 123 const translation = { 124 value: '<div data-l10n-name="foo">FOO</div>', 125 attributes: null, 126 }; 127 translateElement(element, translation); 128 is(element.innerHTML, "FOO"); 129 } 130 131 { 132 // used twice 133 const element = elem("div")` 134 <a data-l10n-name="foo">Foo</a>`; 135 const translation = { 136 value: '<a data-l10n-name="foo">FOO 1</a> <a data-l10n-name="foo">FOO 2</a>', 137 attributes: null, 138 }; 139 translateElement(element, translation); 140 is(element.innerHTML, '<a data-l10n-name="foo">FOO 1</a> FOO 2'); 141 } 142 143 // Two named children 144 { 145 // in order 146 const element = elem("div")` 147 <a data-l10n-name="foo">Foo</a> 148 <a data-l10n-name="bar">Bar</a>`; 149 const translation = { 150 value: '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>', 151 attributes: null, 152 }; 153 translateElement(element, translation); 154 is(element.innerHTML, '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>'); 155 } 156 157 { 158 // out of order 159 const element = elem("div")` 160 <a data-l10n-name="foo">Foo</a> 161 <a data-l10n-name="bar">Bar</a>`; 162 const translation = { 163 value: '<a data-l10n-name="bar">BAR</a><a data-l10n-name="foo">FOO</a>', 164 attributes: null, 165 }; 166 translateElement(element, translation); 167 is(element.innerHTML, '<a data-l10n-name="bar">BAR</a><a data-l10n-name="foo">FOO</a>'); 168 } 169 170 { 171 // nested in source 172 const element = elem("div")` 173 <a data-l10n-name="foo"> 174 Foo 1 175 <a data-l10n-name="bar">Bar</a> 176 Foo 2 177 </a>`; 178 const translation = { 179 value: '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>', 180 attributes: null, 181 }; 182 translateElement(element, translation); 183 is( 184 element.innerHTML, 185 '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>' 186 ); 187 } 188 189 { 190 // nested in translation 191 const element = elem("div")` 192 <div data-l10n-name="foo">Foo</div> 193 <div data-l10n-name="bar">Bar</div>`; 194 const translation = { 195 value: '<div data-l10n-name="foo">FOO 1 <div data-l10n-name="bar">BAR</div> FOO 2</div>', 196 attributes: null, 197 }; 198 translateElement(element, translation); 199 is( 200 element.innerHTML, 201 '<div data-l10n-name="foo">FOO 1 BAR FOO 2</div>' 202 ); 203 } 204 205 // Child attributes 206 { 207 // functional attribute in source 208 const element = elem("div")` 209 <a data-l10n-name="foo" class="foo">Foo</a>`; 210 const translation = { 211 value: '<a data-l10n-name="foo">FOO</a>', 212 attributes: null, 213 }; 214 215 translateElement(element, translation); 216 is(element.innerHTML, 217 '<a data-l10n-name="foo" class="foo">FOO</a>'); 218 } 219 220 { 221 // functional attribute in translation 222 const element = elem("div")` 223 <a data-l10n-name="foo">Foo</a>`; 224 const translation = { 225 value: '<a data-l10n-name="foo" class="bar">FOO</a>', 226 attributes: null, 227 }; 228 229 translateElement(element, translation); 230 is(element.innerHTML, 231 '<a data-l10n-name="foo">FOO</a>'); 232 } 233 234 { 235 // functional attribute in both 236 const element = elem("div")` 237 <a data-l10n-name="foo" class="foo">Foo</a>`; 238 const translation = { 239 value: '<a data-l10n-name="foo" class="bar">FOO</a>', 240 attributes: null, 241 }; 242 243 translateElement(element, translation); 244 is(element.innerHTML, 245 '<a data-l10n-name="foo" class="foo">FOO</a>'); 246 } 247 248 { 249 // localizable attribute in source 250 const element = elem("div")` 251 <a data-l10n-name="foo" title="Foo">Foo</a>`; 252 const translation = { 253 value: '<a data-l10n-name="foo">FOO</a>', 254 attributes: null, 255 }; 256 257 translateElement(element, translation); 258 is(element.innerHTML, 259 '<a data-l10n-name="foo">FOO</a>'); 260 } 261 262 { 263 // localizable attribute in translation 264 const element = elem("div")` 265 <a data-l10n-name="foo">Foo</a>`; 266 const translation = { 267 value: '<a data-l10n-name="foo" title="FOO">FOO</a>', 268 attributes: null, 269 }; 270 271 translateElement(element, translation); 272 is(element.innerHTML, 273 '<a data-l10n-name="foo" title="FOO">FOO</a>'); 274 } 275 276 { 277 // localizable attribute in both 278 const element = elem("div")` 279 <a data-l10n-name="foo" title="Foo">Foo</a>`; 280 const translation = { 281 value: '<a data-l10n-name="foo" title="BAR">FOO</a>', 282 attributes: null, 283 }; 284 285 translateElement(element, translation); 286 is(element.innerHTML, 287 '<a data-l10n-name="foo" title="BAR">FOO</a>'); 288 } 289 290 { 291 // localizable attribute does not leak on retranslation 292 const element = elem("div")` 293 <a data-l10n-name="foo">Foo</a>`; 294 const translationA = { 295 value: '<a data-l10n-name="foo" title="FOO A">FOO A</a>', 296 attributes: null, 297 }; 298 const translationB = { 299 value: '<a data-l10n-name="foo">FOO B</a>', 300 attributes: null, 301 }; 302 303 translateElement(element, translationA); 304 is(element.innerHTML, 305 '<a data-l10n-name="foo" title="FOO A">FOO A</a>'); 306 translateElement(element, translationB); 307 is(element.innerHTML, 308 '<a data-l10n-name="foo">FOO B</a>'); 309 } 310 311 // Child attributes overrides 312 { 313 // the source can override child's attributes 314 const element = elem("div")` 315 <a data-l10n-name="foo" data-l10n-attrs="class" class="foo">Foo</a>`; 316 const translation = { 317 value: '<a data-l10n-name="foo" class="FOO">FOO</a>', 318 attributes: null, 319 }; 320 321 translateElement(element, translation); 322 is(element.innerHTML, 323 '<a data-l10n-name="foo" data-l10n-attrs="class" class="FOO">FOO</a>'); 324 } 325 326 { 327 // the translation cannot override child's attributes 328 const element = elem("div")` 329 <a data-l10n-name="foo" class="foo">Foo</a>`; 330 const translation = { 331 value: '<a data-l10n-name="foo" data-l10n-attrs="class" class="FOO">FOO</a>', 332 attributes: null, 333 }; 334 335 translateElement(element, translation); 336 is(element.innerHTML, 337 '<a data-l10n-name="foo" class="foo">FOO</a>'); 338 } 339 </script> 340 </head> 341 <body> 342 </body> 343 </html>