<!
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" > ||||</span ><m>…</m></div >
<div class="abs0" style ="text-align:left" ><span class="cl a" > <m style ="position:absolute; right:0; bottom:0;" ><m0 style =" font-size:16px" >…</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" > ||||</span ><m>…</m></div >
<div class="abs0r" ><span class="cr a rlo" > <m style ="position:absolute; left:0; bottom:0;" ><m0 style =" font-size:16px" >…</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" > ||||</span ><m>…</m></div >
<div class="abs0" style ="text-align:left" ><span class="cl a" > <m style ="position:absolute; right:0; bottom:0;" ><m0 style =" font-size:16px" >…</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" > ||||</span ><m>…</m></div >
<div class="abs0r" ><span class="cr a rlo" > <m style ="position:absolute; left:0; bottom:0;" ><m0 style =" font-size:16px" >…</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>…</m><span class="cl a" > </span ></div >
</div ></div >
</div >
<div id="test2b" >
<div class="s a" ><div class="p rel" >
<div class="abs0" style ="text-align:left" ><m>…</m><span class="cl a" > </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" > </span ><m>…</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" > </span ><m>…</m></div >
</div ></div >
</div >
<div id="test3a" >
<div class="s a" ><div class="p rel" >
<div class="abs0" style ="text-align:left" ><m>…</m><span class="cl a" > </span ></div >
</div ></div >
</div >
<div id="test3b" >
<div class="s a" ><div class="p rel" >
<div class="abs0" style ="text-align:left" ><m>…</m><span class="cl a" > </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" > </span ><m>…</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" > </span ><m>…</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" > </span ><img class="a overlap1" src="../image/big.png" ></div >
<div class="abs0" ><span class="cr a" > <m style ="position:absolute; right:0; bottom:0;" ><m0 style ="font-size:16px" >…</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" > </span ><img class="a overlap1" src="../image/big.png" ></div >
<div class="abs0" ><span class="cr a" > <m style ="position:absolute; right:0; bottom:0;" ><m0 style ="font-size:16px" >…</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" > </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" >…</m0></m> </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" > </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" >…</m0></m> </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;" >…</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;" >…</m></x><span class="c5 a" style ="margin-right:0" > </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;" >…</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;" >…</m></x><span class="c5 a" style ="margin-right:0" > </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" >…</span ><span ></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" >…</span ><span ></span ></div ></div ></div >
<div id="test9a" ><div class="s a" ><div class="p ltr" ><span class="e" ></span ><i> </i><m>…</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> </i><m>…</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> </i><m>…</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> </i><m>…</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 >
Messung V0.5 in Prozent C=99 H=100 G=99
¤ Dauer der Verarbeitung: 0.18 Sekunden
(vorverarbeitet am 2026-04-27)
¤
*© Formatika GbR, Deutschland