layout/reftests/text-overflow/marker-basic-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5 -->
   6 <html><head>
   7     <title>text-overflow: basic marker position tests</title>
   8     <style type="text/css">
   9 @font-face {
  10   font-family: DejaVuSansMono;
  11   src: url(../fonts/DejaVuSansMono.woff);
  12 }
  13 html,body {
  14     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  15 }
  16
  17 .rtl {
  18   direction:rtl;
  19 }
  20 .ltr {
  21   direction:ltr;
  22 }
  23 .rlo {
  24   unicode-bidi: bidi-override; direction: rtl;
  25 }
  26 .lro {
  27   unicode-bidi: bidi-override; direction: ltr;
  28 }
  29
  30 .rel {
  31   position: relative;
  32   height:2em;
  33 }
  34 .abs0 {
  35   position: absolute;
  36   top:0; left:0;
  37 }
  38 .abs0r {
  39   position: absolute;
  40   top:0; right:0;
  41 }
  42
  43 .s {
  44   width:4em;
  45 }
  46 .p {
  47   overflow: hidden;
  48   white-space:nowrap;
  49   font-size:16px;
  50 }
  51 .a {
  52   font-size:20px;
  53 }
  54 .r {
  55   text-align:right;
  56 }
  57 .l {
  58   text-align:left;
  59 }
  60
  61 i {
  62   display:inline-block;
  63   width: 1.5em;
  64   height: 1em;
  65   font-style:normal;
  66   color:lime;
  67   border: 1px solid magenta;
  68   text-decoration:overline;
  69 }
  70 .cl {
  71   margin-left:-1em;
  72   color: black;
  73 }
  74 .cr {
  75   margin-right:-1em;
  76   color: black;
  77 }
  78 .c5 {
  79   margin-left:-0.5em;
  80   margin-right:-0.5em;
  81   color: black;
  82 }
  83 .outside {
  84  width:1px; height:1px;
  85 }
  86 .overlap1 {
  87  width:1.5em; height:1px;
  88 }
  89 .ins1 {
  90  width:1em; height:1px;
  91 }
  92 .ins2 {  margin-right: 0.8em; margin-left: -1em; }
  93 .overlap2 {
  94  width:1000px; height:1px;
  95 }
  96 .e { padding: 0 0.8em; }
  97
  98 x1 { display:inline-block; position:relative;}
  99 x1 m { position:absolute; right:0; font-size:16px; }
 100
 101 #test1a  { top:0;     left:0;     position:absolute; }
 102 #test1b  { top:0;     left:100px; position:absolute; }
 103 #test1c  { top:0;     left:200px; position:absolute; }
 104 #test1d  { top:0;     left:300px; position:absolute; }
 105 #test2a  { top:40px;  left:0;     position:absolute; }
 106 #test2b  { top:40px;  left:100px; position:absolute; }
 107 #test2c  { top:40px;  left:200px; position:absolute; }
 108 #test2d  { top:40px;  left:300px; position:absolute; }
 109 #test3a  { top:80px; left:0;     position:absolute; }
 110 #test3b  { top:80px; left:100px; position:absolute; }
 111 #test3c  { top:80px; left:200px; position:absolute; }
 112 #test3d  { top:80px; left:300px; position:absolute; }
 113 #test4a  { top:120px; left:0;     position:absolute; }
 114 #test4b  { top:120px; left:100px; position:absolute; }
 115 #test4c  { top:120px; left:200px; position:absolute; }
 116 #test4d  { top:120px; left:300px; position:absolute; }
 117 #test5a  { top:160px; left:0;     position:absolute; }
 118 #test5b  { top:160px; left:100px; position:absolute; }
 119 #test5c  { top:160px; left:200px; position:absolute; }
 120 #test5d  { top:160px; left:300px; position:absolute; }
 121 #test6a  { top:200px; left:0;     position:absolute; }
 122 #test6b  { top:200px; left:100px; position:absolute; }
 123 #test6c  { top:200px; left:200px; position:absolute; }
 124 #test6d  { top:200px; left:300px; position:absolute; }
 125 #test7a  { top:240px; left:0;     position:absolute; }
 126 #test7b  { top:240px; left:100px; position:absolute; }
 127 #test7c  { top:240px; left:200px; position:absolute; }
 128 #test7d  { top:240px; left:300px; position:absolute; }
 129 #test8a  { top:280px; left:0;     position:absolute; }
 130 #test8b  { top:280px; left:100px; position:absolute; }
 131 #test8c  { top:280px; left:200px; position:absolute; }
 132 #test8d  { top:280px; left:300px; position:absolute; }
 133 #test9a  { top:320px; left:0;     position:absolute; border:1px solid black; }
 134 #test9b  { top:320px; left:100px; position:absolute; border:1px solid black; }
 135 #test9c  { top:320px; left:200px; position:absolute; border:1px solid black; }
 136 #test9d  { top:320px; left:300px; position:absolute; border:1px solid black; }
 137 #test10a { top:360px; left:0;     position:absolute; }
 138 #test10b { top:360px; left:100px; position:absolute; }
 139
 140     </style>
 141 </head>
 142 <body>
 143 <div style="position: absolute; top:20px; left:50px;">
 144
 145 <div id="test1a">
 146 <div class="s a"><div class="p rel">
 147 <div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
 148 <div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></div>
 149 </div></div>
 150 </div>
 151 <div id="test1b">
 152 <div class="s a rtl"><div class="p rel">
 153 <div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
 154 <div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;<m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></span></div>
 155 </div></div>
 156 </div>
 157 <div id="test1c">
 158 <div class="s a"><div class="p rel">
 159 <div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
 160 <div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></div>
 161 </div></div>
 162 </div>
 163 <div id="test1d">
 164 <div class="s a rtl"><div class="p rel">
 165 <div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
 166 <div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;<m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></span></div>
 167 </div></div>
 168 </div>
 169
 170 <div id="test2a">
 171 <div class="s a"><div class="p rel">
 172 <div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
 173 </div></div>
 174 </div>
 175 <div id="test2b">
 176 <div class="s a"><div class="p rel">
 177 <div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
 178 </div></div>
 179 </div>
 180 <div id="test2c">
 181 <div class="s a"><div class="p rel">
 182 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
 183 </div></div>
 184 </div>
 185 <div id="test2d">
 186 <div class="s a"><div class="p rel">
 187 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
 188 </div></div>
 189 </div>
 190
 191 <div id="test3a">
 192 <div class="s a"><div class="p rel">
 193 <div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
 194 </div></div>
 195 </div>
 196 <div id="test3b">
 197 <div class="s a"><div class="p rel">
 198 <div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
 199 </div></div>
 200 </div>
 201 <div id="test3c">
 202 <div class="s a"><div class="p rel">
 203 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
 204 </div></div>
 205 </div>
 206 <div id="test3d">
 207 <div class="s a"><div class="p rel">
 208 <div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
 209 </div></div>
 210 </div>
 211
 212 <!-- start marker, marker partly overlaps image, nothing to align with -->
 213 <div id="test4a"><div class="s a"><div class="p o ltr"><span class="cl a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 214 <div id="test4b"><div class="s a"><div class="p o rtl l"><span class="cl a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 215 <div id="test4c"><div class="s a"><div class="p o ltr r"><span class="cr a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 216 <div id="test4d"><div class="s a"><div class="p o rtl"><span class="cr a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 217
 218 <!-- start marker + end, marker partly overlaps image, nothing to align with -->
 219 <div id="test5a"><div class="s a"><div class="p o ltr"><span class="cl a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 220 <div id="test5b"><div class="s a"><div class="p o rtl l"><span class="cl a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 221 <div id="test5c"><div class="s a"><div class="p o ltr r"><span class="cr a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 222 <div id="test5d"><div class="s a"><div class="p o rtl"><span class="cr a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 223
 224 <div id="test6a">
 225 <div class="s a"><div class="p rel">
 226 <div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
 227 <div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m></span></span></div>
 228 </div></div>
 229 </div>
 230 <div id="test6b">
 231 <div class="s a"><div class="p rel">
 232 <div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
 233 <div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m></span></span></div>
 234 </div></div>
 235 </div>
 236 <div id="test6c">
 237 <div class="s a"><div class="p rel">
 238 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png">&nbsp;&nbsp;&nbsp;</span></div>
 239 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"><m style="position:absolute; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m>&nbsp;&nbsp;&nbsp;</span></div>
 240 </div></div>
 241 </div>
 242 <div id="test6d">
 243 <div class="s a"><div class="p rel">
 244 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png">&nbsp;&nbsp;&nbsp;</span></div>
 245 <div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"><m style="position:absolute; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m>&nbsp;&nbsp;&nbsp;</span></div>
 246 </div></div>
 247 </div>
 248
 249 <div id="test7a">
 250 <div class="s a"><div class="p ltr"><span class="c5 a">|<x style="display:inline-block;width:0.8em;text-align:right"><m style="font-size:16px;">&#x2026;</m></x><img class="ins1" src="../image/big.png"></span></div></div>
 251 </div>
 252
 253 <div id="test7b"><div class="s a"><div class="p ltr r"><img class="a ins1" src="../image/big.png"><x class="a" style="display:inline-block;width:0.8em;text-align:left"><m style="font-size:16px;">&#x2026;</m></x><span class="c5 a" style="margin-right:0">&nbsp;</span></div></div></div>
 254
 255 <div id="test7c">
 256 <div class="s a"><div class="p ltr"><span class="c5 a">|<x style="display:inline-block;width:0.8em;text-align:right"><m style="font-size:16px;">&#x2026;</m></x><img class="ins1" src="../image/big.png"></span></div></div>
 257 </div>
 258
 259 <div id="test7d"><div class="s a"><div class="p ltr r"><img class="a ins1" src="../image/big.png"><x class="a" style="display:inline-block;width:0.8em;text-align:left"><m style="font-size:16px;">&#x2026;</m></x><span class="c5 a" style="margin-right:0">&nbsp;</span></div></div></div>
 260
 261
 262 <div id="test8a"><div class="s a"><div class="a p ltr"><span class="c5 a"></span><span class="e"></span><span style="margin-right:-0.5em">&#x2026;</span><span>&#x200c;</span></div></div></div>
 263 <div id="test8d"><div class="s a"><div class="a p rtl"><span class="c5 a"></span><span class="e"></span><span style="margin-left:-0.5em">&#x2026;</span><span>&#x200c;</span></div></div></div>
 264
 265 <div id="test9a"><div class="s a"><div class="p ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
 266 <div id="test9b"><div class="s a"><div class="p rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
 267 <div id="test9c"><div class="s a"><div class="p ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
 268 <div id="test9d"><div class="s a"><div class="p rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
 269
 270 <!-- no marker for overflow:auto that doesn't trigger scrollbar -->
 271 <div id="test10a"><div class="s a"><div class="p o ltr"><span style="margin-left:-5px" >||||||</span></div></div></div>
 272 <div id="test10b"><div class="s a"><div class="p o rtl"><span style="margin-right:-5px">||||||</span></div></div></div>
 273
 274 </div>
 275 </body>
 276 </html>