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

changeset 0
6474c204b198
equal deleted inserted replaced
-1:000000000000 0:0dc40778e6f3
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>

mercurial