2011-06-22 22:11:48 +04:00
<!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; }
2011-10-12 20:20:46 +04:00
#test10a { top:360px; left:0; position:absolute; }
#test10b { top:360px; left:100px; position:absolute; }
2011-06-22 22:11:48 +04:00
< / 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 >
2011-10-12 20:20:46 +04:00
<!-- 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 >
2011-06-22 22:11:48 +04:00
< / div >
< / body >
< / html >
