The Tor Browser / annotate

layout/reftests/text-overflow/ellipsis-font-fallback-ref.html@b8a032363ba2 (annotated)

layout/reftests/text-overflow/ellipsis-font-fallback-ref.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

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 m {
michael@0 34 color:blue;
michael@0 35 }
michael@0 36 .o span {
michael@0 37 color:black;
michael@0 38 }
michael@0 39
michael@0 40 .s {
michael@0 41 width:10em;
michael@0 42 }
michael@0 43 .s2 {
michael@0 44 width:10em;
michael@0 45 }
michael@0 46 .s3 {
michael@0 47 width:6em;
michael@0 48 }
michael@0 49 .s4 {
michael@0 50 width:8em;
michael@0 51 }
michael@0 52 .s5 {
michael@0 53 width:5em;
michael@0 54 }
michael@0 55 .s6 {
michael@0 56 width:1em;
michael@0 57 }
michael@0 58 .s7 {
michael@0 59 width:6em;
michael@0 60 }
michael@0 61 .p {
michael@0 62 overflow: hidden;
michael@0 63 white-space:nowrap;
michael@0 64 }
michael@0 65 .r {
michael@0 66 text-align:right;
michael@0 67 }
michael@0 68
michael@0 69 .c {
michael@0 70 margin-left:-0.5em;
michael@0 71 margin-right:-0.5em;
michael@0 72 }
michael@0 73
michael@0 74
michael@0 75 #test1a { top:0em; left:0; position:absolute; }
michael@0 76 #test1b { top:2em; left:0; position:absolute; }
michael@0 77 #test1c { top:4em; left:0; position:absolute; }
michael@0 78 #test1d { top:6em; left:0; position:absolute; }
michael@0 79
michael@0 80 #test2a { top:0em; left:15em; position:absolute; }
michael@0 81 #test2b { top:2em; left:15em; position:absolute; }
michael@0 82 #test2c { top:4em; left:15em; position:absolute; }
michael@0 83 #test2d { top:6em; left:15em; position:absolute; }
michael@0 84
michael@0 85 #test3a { top: 8em; left:0; position:absolute; }
michael@0 86 #test3b { top:10em; left:0; position:absolute; }
michael@0 87 #test3c { top:12em; left:0; position:absolute; }
michael@0 88 #test3d { top:14em; left:0; position:absolute; }
michael@0 89
michael@0 90 #test4a { top: 8em; left:15em; position:absolute; }
michael@0 91 #test4b { top:10em; left:15em; position:absolute; }
michael@0 92 #test4c { top:12em; left:15em; position:absolute; }
michael@0 93 #test4d { top:14em; left:15em; position:absolute; }
michael@0 94
michael@0 95 #test5a { top:16em; left:0; position:absolute; }
michael@0 96 #test5b { top:18em; left:0; position:absolute; }
michael@0 97 #test5c { top:20em; left:0; position:absolute; }
michael@0 98 #test5d { top:22em; left:0; position:absolute; }
michael@0 99
michael@0 100 #test6a { top:16em; left:15em; position:absolute; }
michael@0 101 #test6b { top:18em; left:15em; position:absolute; }
michael@0 102 #test6c { top:20em; left:15em; position:absolute; }
michael@0 103 #test6d { top:22em; left:15em; position:absolute; }
michael@0 104
michael@0 105 #test7a { top:24em; left:0; position:absolute; }
michael@0 106 #test7b { top:26em; left:0; position:absolute; }
michael@0 107 #test7c { top:28em; left:0; position:absolute; }
michael@0 108 #test7d { top:30em; left:0; position:absolute; }
michael@0 109
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">&nbsp;<m>...</m>X<m>...</m>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></div>
michael@0 118 <div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m>...</m>X<m>...</m>&nbsp;</span></div></div></div>
michael@0 119 <div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m>...</m>X<m>...</m>&nbsp;</span></div></div></div>
michael@0 120 <div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">&nbsp;<m>...</m>X<m>...</m>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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">XXXXX<m>...</m>&nbsp;</span></div></div></div>
michael@0 124 <div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">&nbsp;<m>...</m>XXXXX</span></div></div></div>
michael@0 125 <div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">&nbsp;<m>...</m>XXXXX</span></div></div></div>
michael@0 126 <div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXX<m>...</m>&nbsp;</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">&nbsp;X<m>...</m></span></div></div></div>
michael@0 130 <div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro"><m>...</m>X&nbsp;</span></div></div></div>
michael@0 131 <div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X&nbsp;</span></div></div></div>
michael@0 132 <div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">&nbsp;X<m>...</m></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 </div>
michael@0 147
michael@0 148 </body>
michael@0 149 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial