layout/reftests/text-overflow/ellipsis-font-fallback.html@deefc01c0e14 (annotated)
layout/reftests/text-overflow/ellipsis-font-fallback.html
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
| michael@0 | 1 | <!DOCTYPE HTML> |
| michael@0 | 2 | <!-- |
| michael@0 | 3 | Any copyright is dedicated to the Public Domain. |
| michael@0 | 4 | http://creativecommons.org/licenses/publicdomain/ |
| michael@0 | 5 | |
| michael@0 | 6 | Test: fallback to three ASCII periods when ellipsis is unavailable in the font |
| michael@0 | 7 | --> |
| michael@0 | 8 | <html><head> |
| michael@0 | 9 | <title>text-overflow: ellipsis fallback</title> |
| michael@0 | 10 | <style type="text/css"> |
| michael@0 | 11 | @font-face { |
| michael@0 | 12 | /* This font has glyphs for ASCII period, upper-case X and space. */ |
| michael@0 | 13 | font-family: TestEllipsisFallback; |
| michael@0 | 14 | src: url(TestEllipsisFallback.woff); |
| michael@0 | 15 | } |
| michael@0 | 16 | html,body { |
| michael@0 | 17 | color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback; |
| michael@0 | 18 | } |
| michael@0 | 19 | |
| michael@0 | 20 | .rtl { |
| michael@0 | 21 | direction:rtl; |
| michael@0 | 22 | } |
| michael@0 | 23 | .ltr { |
| michael@0 | 24 | direction:ltr; |
| michael@0 | 25 | } |
| michael@0 | 26 | .rlo { |
| michael@0 | 27 | unicode-bidi: bidi-override; direction: rtl; |
| michael@0 | 28 | } |
| michael@0 | 29 | .lro { |
| michael@0 | 30 | unicode-bidi: bidi-override; direction: ltr; |
| michael@0 | 31 | } |
| michael@0 | 32 | |
| michael@0 | 33 | .o { |
| michael@0 | 34 | text-overflow: ellipsis ellipsis; |
| michael@0 | 35 | color:blue; |
| michael@0 | 36 | } |
| michael@0 | 37 | .o span { |
| michael@0 | 38 | color:black; |
| michael@0 | 39 | } |
| michael@0 | 40 | |
| michael@0 | 41 | .s { |
| michael@0 | 42 | width:10em; |
| michael@0 | 43 | } |
| michael@0 | 44 | .s2 { |
| michael@0 | 45 | width:10em; |
| michael@0 | 46 | } |
| michael@0 | 47 | .s3 { |
| michael@0 | 48 | width:6em; |
| michael@0 | 49 | } |
| michael@0 | 50 | .s4 { |
| michael@0 | 51 | width:8em; |
| michael@0 | 52 | } |
| michael@0 | 53 | .s5 { |
| michael@0 | 54 | width:5em; |
| michael@0 | 55 | } |
| michael@0 | 56 | .s6 { |
| michael@0 | 57 | width:1em; |
| michael@0 | 58 | } |
| michael@0 | 59 | .s7 { |
| michael@0 | 60 | width:6em; |
| michael@0 | 61 | } |
| michael@0 | 62 | .p { |
| michael@0 | 63 | overflow: hidden; |
| michael@0 | 64 | white-space:nowrap; |
| michael@0 | 65 | } |
| michael@0 | 66 | .r { |
| michael@0 | 67 | text-align:right; |
| michael@0 | 68 | } |
| michael@0 | 69 | |
| michael@0 | 70 | .c { |
| michael@0 | 71 | margin-left:-0.5em; |
| michael@0 | 72 | margin-right:-0.5em; |
| michael@0 | 73 | } |
| michael@0 | 74 | |
| michael@0 | 75 | |
| michael@0 | 76 | #test1a { top:0em; left:0; position:absolute; } |
| michael@0 | 77 | #test1b { top:2em; left:0; position:absolute; } |
| michael@0 | 78 | #test1c { top:4em; left:0; position:absolute; } |
| michael@0 | 79 | #test1d { top:6em; left:0; position:absolute; } |
| michael@0 | 80 | |
| michael@0 | 81 | #test2a { top:0em; left:15em; position:absolute; } |
| michael@0 | 82 | #test2b { top:2em; left:15em; position:absolute; } |
| michael@0 | 83 | #test2c { top:4em; left:15em; position:absolute; } |
| michael@0 | 84 | #test2d { top:6em; left:15em; position:absolute; } |
| michael@0 | 85 | |
| michael@0 | 86 | #test3a { top: 8em; left:0; position:absolute; } |
| michael@0 | 87 | #test3b { top:10em; left:0; position:absolute; } |
| michael@0 | 88 | #test3c { top:12em; left:0; position:absolute; } |
| michael@0 | 89 | #test3d { top:14em; left:0; position:absolute; } |
| michael@0 | 90 | |
| michael@0 | 91 | #test4a { top: 8em; left:15em; position:absolute; } |
| michael@0 | 92 | #test4b { top:10em; left:15em; position:absolute; } |
| michael@0 | 93 | #test4c { top:12em; left:15em; position:absolute; } |
| michael@0 | 94 | #test4d { top:14em; left:15em; position:absolute; } |
| michael@0 | 95 | |
| michael@0 | 96 | #test5a { top:16em; left:0; position:absolute; } |
| michael@0 | 97 | #test5b { top:18em; left:0; position:absolute; } |
| michael@0 | 98 | #test5c { top:20em; left:0; position:absolute; } |
| michael@0 | 99 | #test5d { top:22em; left:0; position:absolute; } |
| michael@0 | 100 | |
| michael@0 | 101 | #test6a { top:16em; left:15em; position:absolute; } |
| michael@0 | 102 | #test6b { top:18em; left:15em; position:absolute; } |
| michael@0 | 103 | #test6c { top:20em; left:15em; position:absolute; } |
| michael@0 | 104 | #test6d { top:22em; left:15em; position:absolute; } |
| michael@0 | 105 | |
| michael@0 | 106 | #test7a { top:24em; left:0; position:absolute; } |
| michael@0 | 107 | #test7b { top:26em; left:0; position:absolute; } |
| michael@0 | 108 | #test7c { top:28em; left:0; position:absolute; } |
| michael@0 | 109 | #test7d { top:30em; left:0; position:absolute; } |
| michael@0 | 110 | |
| michael@0 | 111 | </style> |
| michael@0 | 112 | </head> |
| michael@0 | 113 | <body> |
| michael@0 | 114 | <div style="position: absolute; top:20px; left:50px;"> |
| michael@0 | 115 | |
| michael@0 | 116 | <!-- start + end marker --> |
| michael@0 | 117 | <div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 118 | <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 119 | <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 120 | <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 121 | |
| michael@0 | 122 | <!-- end marker --> |
| michael@0 | 123 | <div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 124 | <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 125 | <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 126 | <div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 127 | |
| michael@0 | 128 | <!-- start marker --> |
| michael@0 | 129 | <div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div> |
| michael@0 | 130 | <div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div> |
| michael@0 | 131 | <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div> |
| michael@0 | 132 | <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div> |
| michael@0 | 133 | |
| michael@0 | 134 | <!-- start + end marker, no characters fit, marker is clipped --> |
| michael@0 | 135 | <div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 136 | <div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 137 | <div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 138 | <div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div> |
| michael@0 | 139 | |
| michael@0 | 140 | <!-- start marker, all characters overlapped by marker --> |
| michael@0 | 141 | <div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div> |
| michael@0 | 142 | <div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div> |
| michael@0 | 143 | <div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div> |
| michael@0 | 144 | <div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div> |
| michael@0 | 145 | |
| michael@0 | 146 | |
| michael@0 | 147 | </div> |
| michael@0 | 148 | |
| michael@0 | 149 | </body> |
| michael@0 | 150 | </html> |
