Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
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 }
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 }
26 .hidden {
27 overflow:hidden;
28 width: 4.7em;
29 }
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 }
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>
71 </head><body onload="scrolldivs()">
73 <!-- LTR block -->
75 <div class="test"><ll>…</ll><r>…</r> xxB <span class="rlo">… </span> xxxx<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
77 <div class="test"><ll>…</ll><r>…</r><span class="rlo"> Wor </span> B<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
79 <div class="test"><ll>…</ll><r>…</r><span class="rlo"> Wor </span></div>
81 <!-- RTL block -->
82 <div class="test rtl"><rr>…</rr><l>…</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo"> llo </span></div>
84 <div class="test rtl"><rr>…</rr><l>…</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo"> llo </span></div>
86 <div class="test rtl"><rr>…</rr><l>…</l><span class="rlo"> llo </span></div>
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"> …lloWo… </span></div>
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"> …lloWo… </span></div>
93 <div class="test rtl hidden"><span class="rlo"> …lloWo… </span></div>
96 <div class="test hidden"> …xxxB<span class="rlo">Hello …d</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
98 <div class="test hidden"><span class="rlo"> …loWor… </span> xxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
100 <div class="test hidden"><span class="rlo"> …loWor… </span></div>
102 <span style="position:absolute; top:0; left:6em; height:6em; overflow:hidden;">
103 <div class="test rtl"><br><br><rr>…</rr><l>…</l><span class="rlo"> lloW HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld</span></div>
104 </span>
106 </body></html>