mozilla-central/dom/l10n/tests/mochitest/l10n_overlays/test_functional_children.html (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test L10nOverlays functional children test</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);
element.innerHTML = str;
return element;
};
}
const { translateElement } = L10nOverlays;
// Child without name
{
// in source
const element = elem("div")`
<a>Foo</a>`;
const translation = {
value: "FOO",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO");
}
{
// in translation
const element = elem("div")`Foo`;
const translation = {
value: "<a>FOO</a>",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO");
}
{
// in both
const element = elem("div")`
<a>Foo</a>`;
const translation = {
value: "<a>FOO</a>",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO");
}
// Child with name
{
// in source
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: "<a>FOO</a>",
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO");
}
{
// in translation
const element = elem("div")`
<a>Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO");
}
{
// in both
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, '<a data-l10n-name="foo">FOO</a>');
}
{
// translation without text content
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo"></a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, '<a data-l10n-name="foo"></a>');
}
{
// different names
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="bar">BAR</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "BAR");
}
{
// of different types
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<div data-l10n-name="foo">FOO</div>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, "FOO");
}
{
// used twice
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO 1</a> <a data-l10n-name="foo">FOO 2</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, '<a data-l10n-name="foo">FOO 1</a> FOO 2');
}
// Two named children
{
// in order
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>
<a data-l10n-name="bar">Bar</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>');
}
{
// out of order
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>
<a data-l10n-name="bar">Bar</a>`;
const translation = {
value: '<a data-l10n-name="bar">BAR</a><a data-l10n-name="foo">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML, '<a data-l10n-name="bar">BAR</a><a data-l10n-name="foo">FOO</a>');
}
{
// nested in source
const element = elem("div")`
<a data-l10n-name="foo">
Foo 1
<a data-l10n-name="bar">Bar</a>
Foo 2
</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>',
attributes: null,
};
translateElement(element, translation);
is(
element.innerHTML,
'<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>'
);
}
{
// nested in translation
const element = elem("div")`
<div data-l10n-name="foo">Foo</div>
<div data-l10n-name="bar">Bar</div>`;
const translation = {
value: '<div data-l10n-name="foo">FOO 1 <div data-l10n-name="bar">BAR</div> FOO 2</div>',
attributes: null,
};
translateElement(element, translation);
is(
element.innerHTML,
'<div data-l10n-name="foo">FOO 1 BAR FOO 2</div>'
);
}
// Child attributes
{
// functional attribute in source
const element = elem("div")`
<a data-l10n-name="foo" class="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo" class="foo">FOO</a>');
}
{
// functional attribute in translation
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo" class="bar">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo">FOO</a>');
}
{
// functional attribute in both
const element = elem("div")`
<a data-l10n-name="foo" class="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo" class="bar">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo" class="foo">FOO</a>');
}
{
// localizable attribute in source
const element = elem("div")`
<a data-l10n-name="foo" title="Foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo">FOO</a>');
}
{
// localizable attribute in translation
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo" title="FOO">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo" title="FOO">FOO</a>');
}
{
// localizable attribute in both
const element = elem("div")`
<a data-l10n-name="foo" title="Foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo" title="BAR">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo" title="BAR">FOO</a>');
}
{
// localizable attribute does not leak on retranslation
const element = elem("div")`
<a data-l10n-name="foo">Foo</a>`;
const translationA = {
value: '<a data-l10n-name="foo" title="FOO A">FOO A</a>',
attributes: null,
};
const translationB = {
value: '<a data-l10n-name="foo">FOO B</a>',
attributes: null,
};
translateElement(element, translationA);
is(element.innerHTML,
'<a data-l10n-name="foo" title="FOO A">FOO A</a>');
translateElement(element, translationB);
is(element.innerHTML,
'<a data-l10n-name="foo">FOO B</a>');
}
// Child attributes overrides
{
// the source can override child's attributes
const element = elem("div")`
<a data-l10n-name="foo" data-l10n-attrs="class" class="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo" class="FOO">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo" data-l10n-attrs="class" class="FOO">FOO</a>');
}
{
// the translation cannot override child's attributes
const element = elem("div")`
<a data-l10n-name="foo" class="foo">Foo</a>`;
const translation = {
value: '<a data-l10n-name="foo" data-l10n-attrs="class" class="FOO">FOO</a>',
attributes: null,
};
translateElement(element, translation);
is(element.innerHTML,
'<a data-l10n-name="foo" class="foo">FOO</a>');
}
</script>
</head>
<body>
</body>
</html>