tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

bidi-simple-scrolled-ref.html (4157B)

      1 <!DOCTYPE HTML>
      2 <!--
      3    Any copyright is dedicated to the Public Domain.
      4    http://creativecommons.org/licenses/publicdomain/
      5 -->
      6 <html class="reftest-wait"><head>
      7 <title>text-overflow: simple mixed-bidi cases</title>
      8 <style type="text/css">
      9 @font-face {
     10  font-family: DejaVuSansMono;
     11  src: url(../fonts/DejaVuSansMono.woff);
     12 }
     13 html,body {
     14    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
     15 }
     16 
     17 .test {
     18  overflow:auto;
     19  white-space:nowrap;
     20  width: 4.4em;
     21  margin-bottom:1em;
     22  position:relative;
     23  line-height:2em;
     24 }
     25 
     26 .hidden {
     27  overflow:hidden;
     28  width: 4.7em;
     29 }
     30 
     31 .rlo {
     32  unicode-bidi: bidi-override; direction: rtl;
     33 }
     34 .lro {
     35  unicode-bidi: bidi-override; direction: ltr;
     36 }
     37 .rtl {
     38  direction:rtl;
     39 }
     40 rr {
     41  position:absolute;
     42  bottom:0; right:8px;
     43 }
     44 r {
     45  position:absolute;
     46  bottom:0; right:-8px;
     47 }
     48 ll {
     49  position:absolute;
     50  bottom:0; left:8px;
     51 }
     52 l {
     53  position:absolute;
     54  bottom:0; left:-8px;
     55 }
     56 
     57 </style>
     58 <script>
     59 function scrolldivs() {
     60 var divs = document.getElementsByTagName('div');
     61  for (i = 0; i < divs.length; ++i) {
     62    if (window.getComputedStyle(divs[i]).direction == 'ltr')
     63      divs[i].scrollLeft = 8;
     64    else
     65      divs[i].scrollLeft = -8;
     66  }
     67  document.documentElement.removeAttribute('class');
     68 }
     69 </script>
     70 
     71 </head><body onload="scrolldivs()">
     72 
     73 <!-- LTR block -->
     74 
     75 <div class="test"><ll>&#x2026;</ll><r>&#x2026;</r>&nbsp;&nbsp;xxB&nbsp;<span class="rlo">&#x2026;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;xxxx<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
     76 
     77 <div class="test"><ll>&#x2026;</ll><r>&#x2026;</r><span class="rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wor&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
     78 
     79 <div class="test"><ll>&#x2026;</ll><r>&#x2026;</r><span class="rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wor&nbsp;&nbsp;</span></div>
     80 
     81 <!-- RTL block -->
     82 <div class="test rtl"><rr>&#x2026;</rr><l>&#x2026;</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">&nbsp;&nbsp;llo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
     83 
     84 <div class="test rtl"><rr>&#x2026;</rr><l>&#x2026;</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">&nbsp;&nbsp;llo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
     85 
     86 <div class="test rtl"><rr>&#x2026;</rr><l>&#x2026;</l><span class="rlo">&nbsp;&nbsp;llo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
     87 
     88 
     89 <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">&nbsp;&#x2026;lloWo&#x2026;&nbsp;&nbsp;</span></div>
     90 
     91 <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">&nbsp;&#x2026;lloWo&#x2026;&nbsp;&nbsp;</span></div>
     92 
     93 <div class="test rtl hidden"><span class="rlo">&nbsp;&#x2026;lloWo&#x2026;&nbsp;&nbsp;</span></div>
     94 
     95 
     96 <div class="test hidden">&nbsp;&#x2026;xxxB<span class="rlo">Hello&nbsp;&nbsp;&nbsp;&#x2026;d</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
     97 
     98 <div class="test hidden"><span class="rlo">&nbsp;&nbsp;&#x2026;loWor&#x2026;&nbsp;</span>&nbsp;xxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
     99 
    100 <div class="test hidden"><span class="rlo">&nbsp;&nbsp;&#x2026;loWor&#x2026;&nbsp;</span></div>
    101 
    102 <span style="position:absolute; top:0; left:6em; height:6em; overflow:hidden;">
    103 <div class="test rtl"><br><br><rr>&#x2026;</rr><l>&#x2026;</l><span class="rlo">&nbsp;&nbsp;lloW&nbsp;&nbsp;&nbsp;&nbsp;HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld</span></div>
    104 </span>
    105 
    106 </body></html>