﻿<!DOCTYPE html>
<html>
<head>
<style>
.decoration {
    border-width: 0.2ex;
    border-style: solid;
    margin: 0.2ex;
}
.bidi-override {
    direction: rtl;
    unicode-bidi:bidi-override;
}
</style>
</head>
<body>

<p>div, span, nested div/span</p>
<p>Single div</p>
<div class="decoration bidi-override">abc</div> 
<p>The following 2 lines should be identical, ignorning whitespaces:</p>
<div class="decoration bidi-override">abc <div>cba</div></div>
<p>The following 2 textes should be identical, ignorning whitespaces:</p>
<div class="decoration bidi-override">abc <span>abc </span></div>
<p>The following 2 lines should be identical, ignorning whitespaces:</p>
<div class="decoration bidi-override"><div>cba </div>abc</div>
<p>The following 2 textes should be identical, ignorning whitespaces:</p>
<div class="decoration bidi-override"><span>abc </span>abc </div>
<p>Single span</p>
<span class="decoration bidi-override">abc</span> 
<p>The following 2 textes should be identical, ignorning whitespaces:</p>
<span class="decoration bidi-override">abc <span>abc </span></span>
<p>The following 2 textes should be identical, ignorning whitespaces:</p>
<span class="decoration bidi-override"><span>abc </span>abc </span>
<p>The following 2 textes should be identical, ignorning whitespaces:</p>
<span class="decoration bidi-override">abc <div>cba</div></span>
<p>The following 2 textes should be identical, ignorning whitespaces:</p>
<span class="decoration bidi-override"><div>cba </div>abc</span>

<p>ruby</p>
<div  style="border-width:0.2ex; border-style: solid">
<ruby class="bidi-override" style="margin:0.2ex">abc<rt>def</rt></ruby>
<ruby class="bidi-override" style="margin:0.2ex">abc<rt class="bidi-override">def</rt></ruby>
<ruby class="bidi-override" style="margin:0.2ex">abc</ruby>
<ruby class="bidi-override" style="margin:0.2ex"><rt>def</rt></ruby>
<ruby class="bidi-override" style="margin:0.2ex"><rb>abc</rb></ruby>
<ruby class="bidi-override" style="margin:0.2ex"><rb>abc</rb><rt>def</rt></ruby>
<ruby class="bidi-override" style="margin:0.2ex"><rb>abc<rt>def</rt></rb></ruby>
</div>

<p>The following 2 tables should be identical, ignorning whitespaces:</p>
<table class="decoration bidi-override"><caption>NormalTable</caption><tr><td>abc</td><td>def</td></tr><tr><td>hij</td><td>opq</td></tr></table>

<div class="decoration bidi-override" style="display:table">
    <div style="display: table-caption">AnonymousTableRow</div>
    <div style="display: table-row">
        <div style="display: table-cell">abc</div>
        <div style="display: table-cell">def</div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell">hij</div>
        <div style="display: table-cell">opq</div>
    </div>
</div>

<p>Anonymous TABLE, TABLE_ROW, TABLE_ROW_GROUP, TABLE_CELL</p>
<div  style="border-width:0.2ex; border-style: solid">
<div class="bidi-override" style="display:table-row;">abc</div> 
<div class="bidi-override" style="display:table-cell;">def</div>
<div class="bidi-override" style="display:table-caption;">hij</div>        
<div class="bidi-override" style="display:table-row-group;">opq</div> 
</div>

</body>
</html>
