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

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: basic marker position tests
   7 -->
   8 <html><head>
   9     <title>text-overflow: basic marker position tests</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 .rtl {
  20   direction:rtl;
  21 }
  22 .ltr {
  23   direction:ltr;
  24 }
  25 .rlo {
  26   unicode-bidi: bidi-override; direction: rtl;
  27 }
  28 .lro {
  29   unicode-bidi: bidi-override; direction: ltr;
  30 }
  31
  32 .o {
  33   text-overflow: ellipsis ellipsis;
  34 }
  35
  36 .rel {
  37   position: relative;
  38   height:2em;
  39 }
  40 .abs0 {
  41   position: absolute;
  42   top:0; left:0;
  43 }
  44
  45 .s {
  46   width:4em;
  47 }
  48 .p {
  49   overflow: hidden;
  50   white-space:nowrap;
  51   font-size:16px;
  52 }
  53 .auto {
  54   overflow: auto;
  55 }
  56 .r {
  57   text-align:right;
  58 }
  59 .a {
  60   font-size:20px;
  61 }
  62 .l {
  63   text-align:left;
  64 }
  65 i {
  66   display:inline-block;
  67   width: 1.5em;
  68   height: 1em;
  69   font-style:normal;
  70   color:lime;
  71   border: 1px solid magenta;
  72   text-decoration:overline;
  73 }
  74
  75 .c {
  76   margin-left:-1em;
  77   margin-right:-1em;
  78   color: black;
  79 }
  80 .c5 {
  81   margin-left:-0.5em;
  82   margin-right:-0.5em;
  83   color: black;
  84 }
  85 .outside {
  86  width:1px; height:1px;
  87 }
  88 .overlap1 {
  89  width:1.5em; height:1px;
  90 }
  91 .ins1 {
  92  width:1em; height:1px;
  93  margin: 0 0.8em;
  94 }
  95 .overlap2 {
  96  width:1000px; height:1px;
  97 }
  98 .e { padding: 0 0.8em; }
  99
 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
 141     </style>
 142 </head>
 143 <body>
 144 <div style="position: absolute; top:20px; left:50px;">
 145
 146 <!-- start + end marker, aligned to text -->
 147 <div id="test1a"><div class="s a ltr"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div>
 148 <div id="test1b"><div class="s a rtl"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div>
 149 <div id="test1c"><div class="s a ltr"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div>
 150 <div id="test1d"><div class="s a rtl"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div>
 151
 152 <!-- start marker, text outside marker edge, nothing to align with -->
 153 <div id="test2a"><div class="s a"><div class="p o ltr"><span class="c a">x</span></div></div></div>
 154 <div id="test2b"><div class="s a"><div class="p o rtl l"><span class="c a">x</span></div></div></div>
 155 <div id="test2c"><div class="s a"><div class="p o ltr r"><span class="c a">x</span></div></div></div>
 156 <div id="test2d"><div class="s a"><div class="p o rtl"><span class="c a">x</span></div></div></div>
 157
 158 <!-- start marker, image outside marker edge, nothing to align with -->
 159 <div id="test3a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
 160 <div id="test3b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
 161 <div id="test3c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
 162 <div id="test3d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
 163
 164 <!-- start marker, marker partly overlaps image, nothing to align with -->
 165 <div id="test4a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 166 <div id="test4b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 167 <div id="test4c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 168 <div id="test4d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
 169
 170 <!-- start marker + end, marker partly overlaps image, nothing to align with -->
 171 <div id="test5a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 172 <div id="test5b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 173 <div id="test5c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 174 <div id="test5d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
 175
 176 <!-- start marker, marker clips text, aligns to image -->
 177 <div id="test6a"><div class="s a"><div class="p o ltr"><span class="c a">|||<img class="overlap1" src="../image/big.png"></span></div></div></div>
 178 <div id="test6b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap1" src="../image/big.png">|||</span></div></div></div>
 179 <div id="test6c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap1" src="../image/big.png">|||</span></div></div></div>
 180 <div id="test6d"><div class="s a"><div class="p o rtl"><span class="c a">|||<img class="overlap1" src="../image/big.png"></span></div></div></div>
 181
 182 <!-- start marker, marker aligns to image -->
 183 <div id="test7a"><div class="s a"><div class="p o ltr"><span class="c5 a">|<img class="ins1" src="../image/big.png"></span></div></div></div>
 184 <div id="test7b"><div class="s a"><div class="p o rtl"><span class="c5 a">|<img class="ins1" src="../image/big.png"></span></div></div></div>
 185 <!-- end marker, marker aligns to image -->
 186 <div id="test7c"><div class="s a"><div class="p o rtl l"><span class="c5 a"><img class="ins1" src="../image/big.png">|</span></div></div></div>
 187 <div id="test7d"><div class="s a"><div class="p o ltr r"><span class="c5 a"><img class="ins1" src="../image/big.png">|</span></div></div></div>
 188
 189 <!-- start marker, marker aligns to empty element -->
 190 <div id="test8a"><div class="s a"><div class="a p o ltr"><span class="c5 a">|</span><span class="e"></span><span>&#x200c;</span></div></div></div>
 191 <div id="test8d"><div class="s a"><div class="a p o rtl"><span class="c5 a">|</span><span class="e"></span><span>&#x200c;</span></div></div></div>
 192
 193 <!-- end marker, marker aligns to inline block with overflow -->
 194 <div id="test9a"><div class="s a"><div class="p o ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
 195 <div id="test9b"><div class="s a"><div class="p o rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
 196 <div id="test9c"><div class="s a"><div class="p o ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
 197 <div id="test9d"><div class="s a"><div class="p o rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
 198
 199 <!-- no marker for overflow:auto that doesn't trigger scrollbar -->
 200 <div id="test10a"><div class="s a"><div class="p o ltr auto"><span style="margin-left:-5px" >||||||</span></div></div></div>
 201 <div id="test10b"><div class="s a"><div class="p o rtl auto"><span style="margin-right:-5px">||||||</span></div></div></div>
 202
 203 </div>
 204 </body>
 205 </html>