mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
306 lines
12 KiB
HTML
306 lines
12 KiB
HTML
|
<!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; }
|
||
|
|
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<div id="test4a">
|
||
|
|
<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="test4b">
|
||
|
|
<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="test4c">
|
||
|
|
<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="test4d">
|
||
|
|
<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="test5a">
|
||
|
|
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||
|
|
</div></div>
|
||
|
|
</div>
|
||
|
|
<div id="test5b">
|
||
|
|
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||
|
|
</div></div>
|
||
|
|
</div>
|
||
|
|
<div id="test5c">
|
||
|
|
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||
|
|
</div></div>
|
||
|
|
</div>
|
||
|
|
<div id="test5d">
|
||
|
|
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||
|
|
</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-right:-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>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|