layout/reftests/text-overflow/ellipsis-font-fallback-ref.html@925c144e1f1f
layout/reftests/text-overflow/ellipsis-font-fallback-ref.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
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/
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 m {
34 color:blue;
35 }
36 .o span {
37 color:black;
38 }
40 .s {
41 width:10em;
42 }
43 .s2 {
44 width:10em;
45 }
46 .s3 {
47 width:6em;
48 }
49 .s4 {
50 width:8em;
51 }
52 .s5 {
53 width:5em;
54 }
55 .s6 {
56 width:1em;
57 }
58 .s7 {
59 width:6em;
60 }
61 .p {
62 overflow: hidden;
63 white-space:nowrap;
64 }
65 .r {
66 text-align:right;
67 }
69 .c {
70 margin-left:-0.5em;
71 margin-right:-0.5em;
72 }
75 #test1a { top:0em; left:0; position:absolute; }
76 #test1b { top:2em; left:0; position:absolute; }
77 #test1c { top:4em; left:0; position:absolute; }
78 #test1d { top:6em; left:0; position:absolute; }
80 #test2a { top:0em; left:15em; position:absolute; }
81 #test2b { top:2em; left:15em; position:absolute; }
82 #test2c { top:4em; left:15em; position:absolute; }
83 #test2d { top:6em; left:15em; position:absolute; }
85 #test3a { top: 8em; left:0; position:absolute; }
86 #test3b { top:10em; left:0; position:absolute; }
87 #test3c { top:12em; left:0; position:absolute; }
88 #test3d { top:14em; left:0; position:absolute; }
90 #test4a { top: 8em; left:15em; position:absolute; }
91 #test4b { top:10em; left:15em; position:absolute; }
92 #test4c { top:12em; left:15em; position:absolute; }
93 #test4d { top:14em; left:15em; position:absolute; }
95 #test5a { top:16em; left:0; position:absolute; }
96 #test5b { top:18em; left:0; position:absolute; }
97 #test5c { top:20em; left:0; position:absolute; }
98 #test5d { top:22em; left:0; position:absolute; }
100 #test6a { top:16em; left:15em; position:absolute; }
101 #test6b { top:18em; left:15em; position:absolute; }
102 #test6c { top:20em; left:15em; position:absolute; }
103 #test6d { top:22em; left:15em; position:absolute; }
105 #test7a { top:24em; left:0; position:absolute; }
106 #test7b { top:26em; left:0; position:absolute; }
107 #test7c { top:28em; left:0; position:absolute; }
108 #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"> <m>...</m>X<m>...</m> </span></div></div></div>
118 <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro"> <m>...</m>X<m>...</m> </span></div></div></div>
119 <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div>
120 <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div>
122 <!-- end marker -->
123 <div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXX<m>...</m> </span></div></div></div>
124 <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro"> <m>...</m>XXXXX</span></div></div></div>
125 <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo"> <m>...</m>XXXXX</span></div></div></div>
126 <div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXX<m>...</m> </span></div></div></div>
128 <!-- start marker -->
129 <div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro"> X<m>...</m></span></div></div></div>
130 <div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro"><m>...</m>X </span></div></div></div>
131 <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X </span></div></div></div>
132 <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo"> X<m>...</m></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>
146 </div>
148 </body>
149 </html>
