khronosschoty
/
palemoon-dev


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<!DOCTYPE HTML>
<!--
    Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/licenses/publicdomain/
-->
<html><head>
    <title>text-overflow: basic marker position tests</title>
    <style type="text/css">
@font-face {
  font-family: DejaVuSansMono;
  src: url(../fonts/DejaVuSansMono.woff);
}
html,body {
    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
}

.rtl {
  direction:rtl;
}
.ltr {
  direction:ltr;
}
.rlo {
  unicode-bidi: bidi-override; direction: rtl;
}
.lro {
  unicode-bidi: bidi-override; direction: ltr;
}

.rel {
  position: relative;
  height:2em;
}
.abs0 {
  position: absolute;
  top:0; left:0;
}
.abs0r {
  position: absolute;
  top:0; right:0;
}

.s {
  width:4em;
}
.p {
  overflow: hidden;
  white-space:nowrap;
  font-size:16px;
}
.a {
  font-size:20px;
}
.r {
  text-align:right;
}
.l {
  text-align:left;
}

i {
  display:inline-block;
  width: 1.5em;
  height: 1em;
  font-style:normal;
  color:lime;
  border: 1px solid magenta;
  text-decoration:overline;
}
.cl {
  margin-left:-1em;
  color: black;
}
.cr {
  margin-right:-1em;
  color: black;
}
.c5 {
  margin-left:-0.5em;
  margin-right:-0.5em;
  color: black;
}
.outside {
 width:1px; height:1px;
}
.overlap1 {
 width:1.5em; height:1px;
}
.ins1 {
 width:1em; height:1px;
}
.ins2 {  margin-right: 0.8em; margin-left: -1em; }
.overlap2 {
 width:1000px; height:1px;
}
.e { padding: 0 0.8em; }

x1 { display:inline-block; position:relative;}
x1 m { position:absolute; right:0; font-size:16px; }

#test1a  { top:0;     left:0;     position:absolute; }
#test1b  { top:0;     left:100px; position:absolute; }
#test1c  { top:0;     left:200px; position:absolute; }
#test1d  { top:0;     left:300px; position:absolute; }
#test2a  { top:40px;  left:0;     position:absolute; }
#test2b  { top:40px;  left:100px; position:absolute; }
#test2c  { top:40px;  left:200px; position:absolute; }
#test2d  { top:40px;  left:300px; position:absolute; }
#test3a  { top:80px; left:0;     position:absolute; }
#test3b  { top:80px; left:100px; position:absolute; }
#test3c  { top:80px; left:200px; position:absolute; }
#test3d  { top:80px; left:300px; position:absolute; }
#test4a  { top:120px; left:0;     position:absolute; }
#test4b  { top:120px; left:100px; position:absolute; }
#test4c  { top:120px; left:200px; position:absolute; }
#test4d  { top:120px; left:300px; position:absolute; }
#test5a  { top:160px; left:0;     position:absolute; }
#test5b  { top:160px; left:100px; position:absolute; }
#test5c  { top:160px; left:200px; position:absolute; }
#test5d  { top:160px; left:300px; position:absolute; }
#test6a  { top:200px; left:0;     position:absolute; }
#test6b  { top:200px; left:100px; position:absolute; }
#test6c  { top:200px; left:200px; position:absolute; }
#test6d  { top:200px; left:300px; position:absolute; }
#test7a  { top:240px; left:0;     position:absolute; }
#test7b  { top:240px; left:100px; position:absolute; }
#test7c  { top:240px; left:200px; position:absolute; }
#test7d  { top:240px; left:300px; position:absolute; }
#test8a  { top:280px; left:0;     position:absolute; }
#test8b  { top:280px; left:100px; position:absolute; }
#test8c  { top:280px; left:200px; position:absolute; }
#test8d  { top:280px; left:300px; position:absolute; }
#test9a  { top:320px; left:0;     position:absolute; border:1px solid black; }
#test9b  { top:320px; left:100px; position:absolute; border:1px solid black; }
#test9c  { top:320px; left:200px; position:absolute; border:1px solid black; }
#test9d  { top:320px; left:300px; position:absolute; border:1px solid black; }
#test10a { top:360px; left:0;     position:absolute; }
#test10b { top:360px; left:100px; position:absolute; }

    </style>
</head>
<body>
<div style="position: absolute; top:20px; left:50px;">

<div id="test1a">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
<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>
</div></div>
</div>
<div id="test1b">
<div class="s a rtl"><div class="p rel">
<div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
<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>
</div></div>
</div>
<div id="test1c">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
<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>
</div></div>
</div>
<div id="test1d">
<div class="s a rtl"><div class="p rel">
<div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
<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>
</div></div>
</div>

<div id="test2a">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
</div></div>
</div>
<div id="test2b">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
</div></div>
</div>
<div id="test2c">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
</div></div>
</div>
<div id="test2d">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
</div></div>
</div>

<div id="test3a">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
</div></div>
</div>
<div id="test3b">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
</div></div>
</div>
<div id="test3c">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
</div></div>
</div>
<div id="test3d">
<div class="s a"><div class="p rel">
<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
</div></div>
</div>

<!-- start marker, marker partly overlaps image, nothing to align with -->
<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>
<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>
<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>
<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>

<!-- start marker + end, marker partly overlaps image, nothing to align with -->
<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>
<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>
<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>
<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>

<div id="test6a">
<div class="s a"><div class="p rel">
<div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
<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>
</div></div>
</div>
<div id="test6b">
<div class="s a"><div class="p rel">
<div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
<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>
</div></div>
</div>
<div id="test6c">
<div class="s a"><div class="p rel">
<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>
<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>
</div></div>
</div>
<div id="test6d">
<div class="s a"><div class="p rel">
<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>
<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>
</div></div>
</div>

<div id="test7a">
<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>
</div>

<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>

<div id="test7c">
<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>
</div>

<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>


<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>
<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>

<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>
<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>
<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>
<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>

<!-- no marker for overflow:auto that doesn't trigger scrollbar -->
<div id="test10a"><div class="s a"><div class="p o ltr"><span style="margin-left:-5px" >||||||</span></div></div></div>
<div id="test10b"><div class="s a"><div class="p o rtl"><span style="margin-right:-5px">||||||</span></div></div></div>

</div>
</body>
</html>