<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body style="direction:rtl">

<P style="direction:ltr; text-align:right">Test rendering of 3 text runs -- TextRun1 TextRun2 TextRun3, 
in which TextRun1 and TextRun2's bidi level are 2, and TextRun3's bidi level is 1.
TextRun2 and TextRun3 are siblings. But their ancestor (not their parent) is a sibling of TextRun1. 
The visual order should be TextRun3 TextRun1 TextRun2, not TextRun3 TextRun2 TextRun1.
<hr>

<P style="direction:ltr; text-align:right">Pure text. The following 3 lines should all display as "שנב This is a Test"
<div contentEditable="true" style="background:red;">This is a <span><span>Test <span>שנב</span></span></span></div> 
<div contentEditable="true" style="background:red;">This is a <span><span><span>Test <span>שנב</span></span></span></span></div> 
<div>This is a <span>Test <span>שנב</span></span></div>
<hr>

<P style="direction:ltr; text-align:right">Text in &lt;em&gt;. The English text should be displayed as "This is a Test".
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><em><span></span>Test<span></span></em></span></div>
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><em>Test<span></span></em></span></div>
<div  contenteditable style="background:red;">This is a <span style="text-decoration: underline;"><em>Test <span  contenteditable>דמה</span></em></span></div>
<div>This is a <span style="text-decoration: underline;"><em><span></span>Test</em></span></div>
<div>This is a <span style="text-decoration: underline;"><em>Test</em></span></div>
<hr>

<P style="direction:ltr; text-align:right">Text in &lt;strong&gt;. The following lines should all display as "This is a Test".
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><strong><span></span>Test<span></span></strong></span></div>
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><strong>Test<span></span></strong></span></div>
<div>This is a <span style="text-decoration: underline;"><strong><span></span>Test</strong></span></div>
<div>This is a <span style="text-decoration: underline;"><strong>Test</strong></span></div>
<hr>

<P style="direction:ltr; text-align:right">Text in &lt;i&gt;. The following lines should all display as "This is a Test".
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><i><span></span>Test<span></span></i></span></div>
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><i>Test<span></span></i></span></div>
<div>This is a <span style="text-decoration: underline;"><i><span></span>Test</i></span></div>
<div>This is a <span style="text-decoration: underline;"><i>Test</i></span></div>
<hr>

<P style="direction:ltr; text-align:right">Text in &lt;b&gt;. The following lines should all display as "This is a Test".
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><b><span></span>Test<span></span></b></span></div>
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><b>Test<span></span></b></span></div>
<div>This is a <span style="text-decoration: underline;"><b><span></span>Test</b></span></div>
<div>This is a <span style="text-decoration: underline;"><b>Test</strong></span></div>
<hr>

<P style="direction:ltr; text-align:right">Text in &lt;img&gt;, &lt;href&gt;, &lt;em&gt;, &lt;tr&gt;. The following English text should all display as "This is a Test".
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><a href>Test<span><img src= d:/tmp/p1.png/></span></a></span></div> 
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><a href>Test <span>שנב</span></a></span></div>
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><em>Test<a href></a></em></span></div>
<div contentEditable="true" style="background:red;">This is a <span style="text-decoration: underline;"><em>Test<span><img src= d:/tmp/p1.png/></span></em></span></div>
<div>This is a <span style="text-decoration: underline;"><a href>Test <span>again</span></a></span></div>
<div>This is a <span style="text-decoration: underline;"><em>Test<table><tr><td>a</td></tr></td></tr></table></em></span></div>
<hr>
<ul id="console" dir=ltr></ul>

<script> 

    if (window.internals)
        internals.settings.setEditingBehavior("mac");

    function log(str)
    {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(str));
        var console = document.getElementById("console");
        console.appendChild(li);
    }
    
    function assertEqual(message, actual, expected)
    {
        if (actual != expected)
            log("\n" + message + ": Failure, actual: " + actual + "; expected: " + expected);
        else
            log("\n" + message + ": Success");
    }
        
    var tests = document.getElementsByTagName('div');
    var sel = getSelection();
    for (var i = 0; i < tests.length; ++i) {
        sel.setPosition(tests[i],0);
        sel.modify("move", "backward", "lineboundary");
        sel.modify("extend", "forward", "word");
        assertEqual("Test " + i + ": ", sel.toString(), "This");
    }
</script> 
</body>

</html>
