layout/reftests/text-overflow/bidi-simple-scrolled-ref.html

   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>