Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
/**
* Request 2x longer timeout for this test.
* There are lot of test cases in this file, but they are all of the same nature,
* and it makes the most sense to have them all in this single test file.
*/
requestLongerTimeout(2);
add_task(
async function test_direction_ltr_to_rtl_basic_content_not_attributes() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<div id="content" title="A translated title">
This block of content should get RTL direction.
</div>
<input id="onlyPlaceholder" type="text" placeholder="A translated placeholder">
<div id="onlyTitle" title="Only a translated title"></div>
<div>
Div text.
<span>Span within a div.</span>
</div>
<span>
Span text.
<div>Div within a span.</div>
</span>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
'LTR to RTL (basic): content elements get dir="rtl", but attribute-only elements do not.',
/* html */ `
<div id="content" title="A TRANSLATED TITLE" dir="rtl">
THIS BLOCK OF CONTENT SHOULD GET RTL DIRECTION.
</div>
<input id="onlyPlaceholder" type="text" placeholder="A TRANSLATED PLACEHOLDER">
<div id="onlyTitle" title="ONLY A TRANSLATED TITLE"></div>
<div dir="rtl">
DIV TEXT.
<span>
SPAN WITHIN A DIV.
</span>
</div>
<span dir="rtl">
SPAN TEXT.
<div dir="rtl">
DIV WITHIN A SPAN.
</div>
</span>
`
);
cleanup();
}
);
add_task(async function test_direction_ltr_to_rtl_lists_ul_basic() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ul>
<li>List item.</li>
</ul>
<ul>
<li>
Span within list item.
<span>Span inside list item.</span>
</li>
</ul>
<ul>
<li>
Div within list item.
<div>Div inside list item.</div>
</li>
</ul>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
"LTR to RTL (UL basic): <ul> and <li> with simple nested inline/block content.",
/* html */ `
<ul dir="rtl">
<li dir="rtl">
LIST ITEM.
</li>
</ul>
<ul dir="rtl">
<li dir="rtl">
SPAN WITHIN LIST ITEM.
<span>
SPAN INSIDE LIST ITEM.
</span>
</li>
</ul>
<ul dir="rtl">
<li dir="rtl">
DIV WITHIN LIST ITEM.
<div dir="rtl">
DIV INSIDE LIST ITEM.
</div>
</li>
</ul>
`
);
cleanup();
});
add_task(async function test_direction_ltr_to_rtl_lists_ul_nested_combos() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ul>
<li>
Span within div within list item.
<div>
<span>Span inside div inside list item.</span>
</div>
</li>
</ul>
<ul>
<li>
Div within span within list item.
<span>
<div>Div inside span inside list item.</div>
</span>
</li>
</ul>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
"LTR to RTL (UL nested combos): nested inline/block permutations.",
/* html */ `
<ul dir="rtl">
<li dir="rtl">
SPAN WITHIN DIV WITHIN LIST ITEM.
<div dir="rtl">
<span>
SPAN INSIDE DIV INSIDE LIST ITEM.
</span>
</div>
</li>
</ul>
<ul dir="rtl">
<li dir="rtl">
DIV WITHIN SPAN WITHIN LIST ITEM.
<span>
<div dir="rtl">
DIV INSIDE SPAN INSIDE LIST ITEM.
</div>
</span>
</li>
</ul>
`
);
cleanup();
});
add_task(async function test_direction_ltr_to_rtl_lists_ol_basic() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ol>
<li>List item.</li>
</ol>
<ol>
<li>
Span within list item.
<span>Span inside list item.</span>
</li>
</ol>
<ol>
<li>
Div within list item.
<div>Div inside list item.</div>
</li>
</ol>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
"LTR to RTL (OL basic): <ol> and <li> with simple nested inline/block content.",
/* html */ `
<ol dir="rtl">
<li dir="rtl">
LIST ITEM.
</li>
</ol>
<ol dir="rtl">
<li dir="rtl">
SPAN WITHIN LIST ITEM.
<span>
SPAN INSIDE LIST ITEM.
</span>
</li>
</ol>
<ol dir="rtl">
<li dir="rtl">
DIV WITHIN LIST ITEM.
<div dir="rtl">
DIV INSIDE LIST ITEM.
</div>
</li>
</ol>
`
);
cleanup();
});
add_task(async function test_direction_ltr_to_rtl_lists_ol_nested_combos() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ol>
<li>
Span within div within list item.
<div>
<span>Span inside div inside list item.</span>
</div>
</li>
</ol>
<ol>
<li>
Div within span within list item.
<span>
<div>Div inside span inside list item.</div>
</span>
</li>
</ol>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
"LTR to RTL (OL nested combos): nested inline/block permutations.",
/* html */ `
<ol dir="rtl">
<li dir="rtl">
SPAN WITHIN DIV WITHIN LIST ITEM.
<div dir="rtl">
<span>
SPAN INSIDE DIV INSIDE LIST ITEM.
</span>
</div>
</li>
</ol>
<ol dir="rtl">
<li dir="rtl">
DIV WITHIN SPAN WITHIN LIST ITEM.
<span>
<div dir="rtl">
DIV INSIDE SPAN INSIDE LIST ITEM.
</div>
</span>
</li>
</ol>
`
);
cleanup();
});
add_task(
async function test_direction_rtl_to_ltr_basic_content_not_attributes() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<div id="content" title="A translated title">
This block of content should get LTR direction.
</div>
<input id="onlyPlaceholder" type="text" placeholder="A translated placeholder">
<div id="onlyTitle" title="Only a translated title"></div>
<div>
Div text.
<span>Span within a div.</span>
</div>
<span>
Span text.
<div>Div within a span.</div>
</span>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
'RTL to LTR (basic): content elements get dir="ltr", but attribute-only elements do not.',
/* html */ `
<div id="content" title="A TRANSLATED TITLE" dir="ltr">
THIS BLOCK OF CONTENT SHOULD GET LTR DIRECTION.
</div>
<input id="onlyPlaceholder" type="text" placeholder="A TRANSLATED PLACEHOLDER">
<div id="onlyTitle" title="ONLY A TRANSLATED TITLE"></div>
<div dir="ltr">
DIV TEXT.
<span>
SPAN WITHIN A DIV.
</span>
</div>
<span dir="ltr">
SPAN TEXT.
<div dir="ltr">
DIV WITHIN A SPAN.
</div>
</span>
`
);
cleanup();
}
);
add_task(async function test_direction_rtl_to_ltr_lists_ul_basic() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ul>
<li>List item.</li>
</ul>
<ul>
<li>
Span within list item.
<span>Span inside list item.</span>
</li>
</ul>
<ul>
<li>
Div within list item.
<div>Div inside list item.</div>
</li>
</ul>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
"RTL to LTR (UL basic): <ul> and <li> with simple nested inline/block content.",
/* html */ `
<ul dir="ltr">
<li dir="ltr">
LIST ITEM.
</li>
</ul>
<ul dir="ltr">
<li dir="ltr">
SPAN WITHIN LIST ITEM.
<span>
SPAN INSIDE LIST ITEM.
</span>
</li>
</ul>
<ul dir="ltr">
<li dir="ltr">
DIV WITHIN LIST ITEM.
<div dir="ltr">
DIV INSIDE LIST ITEM.
</div>
</li>
</ul>
`
);
cleanup();
});
add_task(async function test_direction_rtl_to_ltr_lists_ul_nested_combos() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ul>
<li>
Span within div within list item.
<div>
<span>Span inside div inside list item.</span>
</div>
</li>
</ul>
<ul>
<li>
Div within span within list item.
<span>
<div>Div inside span inside list item.</div>
</span>
</li>
</ul>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
"RTL to LTR (UL nested combos): nested inline/block permutations.",
/* html */ `
<ul dir="ltr">
<li dir="ltr">
SPAN WITHIN DIV WITHIN LIST ITEM.
<div dir="ltr">
<span>
SPAN INSIDE DIV INSIDE LIST ITEM.
</span>
</div>
</li>
</ul>
<ul dir="ltr">
<li dir="ltr">
DIV WITHIN SPAN WITHIN LIST ITEM.
<span>
<div dir="ltr">
DIV INSIDE SPAN INSIDE LIST ITEM.
</div>
</span>
</li>
</ul>
`
);
cleanup();
});
add_task(async function test_direction_rtl_to_ltr_lists_ol_basic() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ol>
<li>List item.</li>
</ol>
<ol>
<li>
Span within list item.
<span>Span inside list item.</span>
</li>
</ol>
<ol>
<li>
Div within list item.
<div>Div inside list item.</div>
</li>
</ol>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
"RTL to LTR (OL basic): <ol> and <li> with simple nested inline/block content.",
/* html */ `
<ol dir="ltr">
<li dir="ltr">
LIST ITEM.
</li>
</ol>
<ol dir="ltr">
<li dir="ltr">
SPAN WITHIN LIST ITEM.
<span>
SPAN INSIDE LIST ITEM.
</span>
</li>
</ol>
<ol dir="ltr">
<li dir="ltr">
DIV WITHIN LIST ITEM.
<div dir="ltr">
DIV INSIDE LIST ITEM.
</div>
</li>
</ol>
`
);
cleanup();
});
add_task(async function test_direction_rtl_to_ltr_lists_ol_nested_combos() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<ol>
<li>
Span within div within list item.
<div>
<span>Span inside div inside list item.</span>
</div>
</li>
</ol>
<ol>
<li>
Div within span within list item.
<span>
<div>Div inside span inside list item.</div>
</span>
</li>
</ol>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
"RTL to LTR (OL nested combos): nested inline/block permutations.",
/* html */ `
<ol dir="ltr">
<li dir="ltr">
SPAN WITHIN DIV WITHIN LIST ITEM.
<div dir="ltr">
<span>
SPAN INSIDE DIV INSIDE LIST ITEM.
</span>
</div>
</li>
</ol>
<ol dir="ltr">
<li dir="ltr">
DIV WITHIN SPAN WITHIN LIST ITEM.
<span>
<div dir="ltr">
DIV INSIDE SPAN INSIDE LIST ITEM.
</div>
</span>
</li>
</ol>
`
);
cleanup();
});
add_task(async function test_direction_ltr_to_rtl_tables_basic() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<table>
<tbody>
<tr>
<td>Cell text.</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
Span within cell.
<span>Span inside cell.</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
Div within cell.
<div>Div inside cell.</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Header cell.</th>
</tr>
</tbody>
</table>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
"LTR to RTL (TABLE basic): <table> and <td>/<th> with simple nested inline/block content.",
/* html */ `
<table dir="rtl">
<tbody dir="rtl">
<tr dir="rtl">
<td dir="rtl">
CELL TEXT.
</td>
</tr>
</tbody>
</table>
<table dir="rtl">
<tbody dir="rtl">
<tr dir="rtl">
<td dir="rtl">
SPAN WITHIN CELL.
<span>
SPAN INSIDE CELL.
</span>
</td>
</tr>
</tbody>
</table>
<table dir="rtl">
<tbody dir="rtl">
<tr dir="rtl">
<td dir="rtl">
DIV WITHIN CELL.
<div dir="rtl">
DIV INSIDE CELL.
</div>
</td>
</tr>
</tbody>
</table>
<table dir="rtl">
<tbody dir="rtl">
<tr dir="rtl">
<th dir="rtl">
HEADER CELL.
</th>
</tr>
</tbody>
</table>
`
);
cleanup();
});
add_task(async function test_direction_ltr_to_rtl_tables_nested_combos() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<table>
<tbody>
<tr>
<td>
Span within div within cell.
<div>
<span>Span inside div inside cell.</span>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
Div within span within cell.
<span>
<div>Div inside span inside cell.</div>
</span>
</td>
</tr>
</tbody>
</table>
`,
{ sourceLanguage: "en", targetLanguage: "ar" }
);
translate();
await htmlMatches(
"LTR to RTL (TABLE nested combos): nested inline/block permutations.",
/* html */ `
<table dir="rtl">
<tbody dir="rtl">
<tr dir="rtl">
<td dir="rtl">
SPAN WITHIN DIV WITHIN CELL.
<div dir="rtl">
<span>
SPAN INSIDE DIV INSIDE CELL.
</span>
</div>
</td>
</tr>
</tbody>
</table>
<table dir="rtl">
<tbody dir="rtl">
<tr dir="rtl">
<td dir="rtl">
DIV WITHIN SPAN WITHIN CELL.
<span>
<div dir="rtl">
DIV INSIDE SPAN INSIDE CELL.
</div>
</span>
</td>
</tr>
</tbody>
</table>
`
);
cleanup();
});
add_task(async function test_direction_rtl_to_ltr_tables_basic() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<table>
<tbody>
<tr>
<td>Cell text.</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
Span within cell.
<span>Span inside cell.</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
Div within cell.
<div>Div inside cell.</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Header cell.</th>
</tr>
</tbody>
</table>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
"RTL to LTR (TABLE basic): <table> and <td>/<th> with simple nested inline/block content.",
/* html */ `
<table dir="ltr">
<tbody dir="ltr">
<tr dir="ltr">
<td dir="ltr">
CELL TEXT.
</td>
</tr>
</tbody>
</table>
<table dir="ltr">
<tbody dir="ltr">
<tr dir="ltr">
<td dir="ltr">
SPAN WITHIN CELL.
<span>
SPAN INSIDE CELL.
</span>
</td>
</tr>
</tbody>
</table>
<table dir="ltr">
<tbody dir="ltr">
<tr dir="ltr">
<td dir="ltr">
DIV WITHIN CELL.
<div dir="ltr">
DIV INSIDE CELL.
</div>
</td>
</tr>
</tbody>
</table>
<table dir="ltr">
<tbody dir="ltr">
<tr dir="ltr">
<th dir="ltr">
HEADER CELL.
</th>
</tr>
</tbody>
</table>
`
);
cleanup();
});
add_task(async function test_direction_rtl_to_ltr_tables_nested_combos() {
const { translate, htmlMatches, cleanup } = await createTranslationsDoc(
/* html */ `
<table>
<tbody>
<tr>
<td>
Span within div within cell.
<div>
<span>Span inside div inside cell.</span>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
Div within span within cell.
<span>
<div>Div inside span inside cell.</div>
</span>
</td>
</tr>
</tbody>
</table>
`,
{ sourceLanguage: "ar", targetLanguage: "en" }
);
translate();
await htmlMatches(
"RTL to LTR (TABLE nested combos): nested inline/block permutations.",
/* html */ `
<table dir="ltr">
<tbody dir="ltr">
<tr dir="ltr">
<td dir="ltr">
SPAN WITHIN DIV WITHIN CELL.
<div dir="ltr">
<span>
SPAN INSIDE DIV INSIDE CELL.
</span>
</div>
</td>
</tr>
</tbody>
</table>
<table dir="ltr">
<tbody dir="ltr">
<tr dir="ltr">
<td dir="ltr">
DIV WITHIN SPAN WITHIN CELL.
<span>
<div dir="ltr">
DIV INSIDE SPAN INSIDE CELL.
</div>
</span>
</td>
</tr>
</tbody>
</table>
`
);
cleanup();
});