layout/reftests/text-overflow/ellipsis-font-fallback.html@6474c204b198
layout/reftests/text-overflow/ellipsis-font-fallback.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <!DOCTYPE HTML>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/licenses/publicdomain/
6 Test: fallback to three ASCII periods when ellipsis is unavailable in the font
7 -->
8 <html><head>
9 <title>text-overflow: ellipsis fallback</title>
10 <style type="text/css">
11 @font-face {
12 /* This font has glyphs for ASCII period, upper-case X and space. */
13 font-family: TestEllipsisFallback;
14 src: url(TestEllipsisFallback.woff);
15 }
16 html,body {
17 color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback;
18 }
20 .rtl {
21 direction:rtl;
22 }
23 .ltr {
24 direction:ltr;
25 }
26 .rlo {
27 unicode-bidi: bidi-override; direction: rtl;
28 }
29 .lro {
30 unicode-bidi: bidi-override; direction: ltr;
31 }
33 .o {
34 text-overflow: ellipsis ellipsis;
35 color:blue;
36 }
37 .o span {
38 color:black;
39 }
41 .s {
42 width:10em;
43 }
44 .s2 {
45 width:10em;
46 }
47 .s3 {
48 width:6em;
49 }
50 .s4 {
51 width:8em;
52 }
53 .s5 {
54 width:5em;
55 }
56 .s6 {
57 width:1em;
58 }
59 .s7 {
60 width:6em;
61 }
62 .p {
63 overflow: hidden;
64 white-space:nowrap;
65 }
66 .r {
67 text-align:right;
68 }
70 .c {
71 margin-left:-0.5em;
72 margin-right:-0.5em;
73 }
76 #test1a { top:0em; left:0; position:absolute; }
77 #test1b { top:2em; left:0; position:absolute; }
78 #test1c { top:4em; left:0; position:absolute; }
79 #test1d { top:6em; left:0; position:absolute; }
81 #test2a { top:0em; left:15em; position:absolute; }
82 #test2b { top:2em; left:15em; position:absolute; }
83 #test2c { top:4em; left:15em; position:absolute; }
84 #test2d { top:6em; left:15em; position:absolute; }
86 #test3a { top: 8em; left:0; position:absolute; }
87 #test3b { top:10em; left:0; position:absolute; }
88 #test3c { top:12em; left:0; position:absolute; }
89 #test3d { top:14em; left:0; position:absolute; }
91 #test4a { top: 8em; left:15em; position:absolute; }
92 #test4b { top:10em; left:15em; position:absolute; }
93 #test4c { top:12em; left:15em; position:absolute; }
94 #test4d { top:14em; left:15em; position:absolute; }
96 #test5a { top:16em; left:0; position:absolute; }
97 #test5b { top:18em; left:0; position:absolute; }
98 #test5c { top:20em; left:0; position:absolute; }
99 #test5d { top:22em; left:0; position:absolute; }
101 #test6a { top:16em; left:15em; position:absolute; }
102 #test6b { top:18em; left:15em; position:absolute; }
103 #test6c { top:20em; left:15em; position:absolute; }
104 #test6d { top:22em; left:15em; position:absolute; }
106 #test7a { top:24em; left:0; position:absolute; }
107 #test7b { top:26em; left:0; position:absolute; }
108 #test7c { top:28em; left:0; position:absolute; }
109 #test7d { top:30em; left:0; position:absolute; }
111 </style>
112 </head>
113 <body>
114 <div style="position: absolute; top:20px; left:50px;">
116 <!-- start + end marker -->
117 <div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
118 <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
119 <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
120 <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
122 <!-- end marker -->
123 <div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div>
124 <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div>
125 <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div>
126 <div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div>
128 <!-- start marker -->
129 <div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div>
130 <div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div>
131 <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div>
132 <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div>
134 <!-- start + end marker, no characters fit, marker is clipped -->
135 <div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
136 <div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
137 <div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
138 <div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
140 <!-- start marker, all characters overlapped by marker -->
141 <div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div>
142 <div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div>
143 <div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
144 <div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
147 </div>
149 </body>
150 </html>
