<!DOCTYPE HTML> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/licenses/publicdomain/ --> <html><head> <title>text-overflow: simple mixed-bidi cases</title> <style type="text/css"> @font-face { font-family: DejaVuSansMono; src: url(../fonts/DejaVuSansMono.woff); } html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; } .test { overflow:auto; white-space:nowrap; width: 4.4em; position:relative; margin-top:1em; } .hidden { overflow:hidden; width: 4.7em; } .rlo { unicode-bidi: bidi-override; direction: rtl; } .lro { unicode-bidi: bidi-override; direction: ltr; } .rtl { direction:rtl; } r { position:absolute; top:0; right:0; } l { position:absolute; top:0; left:0; } </style> </head><body> <!-- LTR overflow:scroll --> <div class="test"><r>…</r>AxxxxB <span class="rlo">HelloWor</span>Axxxx<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> <div class="test"><r>…</r><span class="rlo">He oWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> <div class="test"><r>…</r><span class="rlo">He oWorld</span></div> <!-- LTR overflow:hidden --> <div class="test hidden">AxxxxB<m>…</m><span class="rlo">HelloWorl </span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> <div class="test hidden"><span class="rlo">H <m>…</m>oWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> <div class="test hidden"><span class="rlo">H <m>…</m>oWorld</span></div> <!-- RTL overflow:scroll --> <div class="test rtl"><l>…</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW ld</span></div> <div class="test rtl"><l>…</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW ld</span></div> <div class="test rtl"><l>…</l><span class="rlo">HelloW ld</span></div> <!-- RTL overflow:hidden --> <div class="test rtl hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW<m>…</m> </span></div> <div class="test rtl hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW<m>…</m> </span></div> <div class="test rtl hidden"><span class="rlo">HelloW<m>…</m> </span></div> </body></html>