|
1 <!DOCTYPE HTML> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/licenses/publicdomain/ |
|
5 |
|
6 Test: visibility:hidden should not trigger text-overflow markers |
|
7 --> |
|
8 <html><head> |
|
9 <title>text-overflow: visibility:hidden</title> |
|
10 <style type="text/css"> |
|
11 @font-face { |
|
12 font-family: DejaVuSansMono; |
|
13 src: url(../fonts/DejaVuSansMono.woff); |
|
14 } |
|
15 html,body { |
|
16 color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; |
|
17 } |
|
18 |
|
19 .test { |
|
20 text-overflow:ellipsis; |
|
21 overflow: hidden; |
|
22 white-space: nowrap; |
|
23 background:lime; |
|
24 color: black; |
|
25 width: 50%; |
|
26 } |
|
27 |
|
28 .rtl { |
|
29 direction:rtl; |
|
30 } |
|
31 .rlo { |
|
32 unicode-bidi: bidi-override; direction: rtl; |
|
33 } |
|
34 u { |
|
35 visibility:hidden; |
|
36 padding-left: 3em; |
|
37 background: cyan; |
|
38 } |
|
39 .rtl u {padding-right: 3em; padding-left:0;} |
|
40 s { |
|
41 visibility:visible; |
|
42 } |
|
43 |
|
44 .t1 {width:10em;} |
|
45 .t2 {width:14em;} |
|
46 .t3 {width:13.5em;} |
|
47 .t3 u { padding-right:1em; } |
|
48 .t3.rtl u {padding-left:1em; padding-right: 3em; } |
|
49 .t4 {width:12.5em;} |
|
50 </style> |
|
51 |
|
52 </head><body> |
|
53 |
|
54 <div class="test t2"> |
|
55 CSS is awesome<u></u><br> |
|
56 CSS is awesome<u> <s>x</s> </u> |
|
57 </div> |
|
58 <div class="test t1">CSS is awesome<u></u><br></div> |
|
59 <div class="test t2">CSS is awesome<u> <s>x</s> </u></div> |
|
60 <div class="test t3">CSS is awesome<u> <s>x</s></u></div> |
|
61 <div class="test t4">CSS is awesome<u> <s>x</s></u></div> |
|
62 |
|
63 <div class="rtl"> |
|
64 <div class="test rtl rlo t2"> |
|
65 CSS is awesome<u></u><br> |
|
66 CSS is awesome<u> <s>x</s></u> |
|
67 </div> |
|
68 <div class="test rtl rlo t1">CSS is awesome<u></u><br></div> |
|
69 <div class="test rtl rlo t2">CSS is awesome<u> <s>x</s> </u></div> |
|
70 <div class="test rtl rlo t3">CSS is awesome<u> <s>x</s></u></div> |
|
71 <div class="test rtl rlo t4">CSS is awesome<u> <s>x</s></u></div> |
|
72 </div> |
|
73 |
|
74 </body></html> |