khronosschoty
/
palemoon-dev


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!DOCTYPE HTML>
<!--
    Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/licenses/publicdomain/

    Test: fallback to three ASCII periods when ellipsis is unavailable in the font
-->
<html><head>
    <title>text-overflow: ellipsis fallback</title>
    <style type="text/css">
@font-face {
  /* This font has glyphs for ASCII period, upper-case X and space. */
  font-family: TestEllipsisFallback;
  src: url(TestEllipsisFallback.woff);
}
html,body {
    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback;
}

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

.o {
  text-overflow: ellipsis ellipsis;
  color:blue;
}
.o span {
  color:black;
}

.s {
  width:10em;
}
.s2 {
  width:10em;
}
.s3 {
  width:6em;
}
.s4 {
  width:8em;
}
.s5 {
  width:5em;
}
.s6 {
  width:1em;
}
.s7 {
  width:6em;
}
.p {
  overflow: hidden;
  white-space:nowrap;
}
.r {
  text-align:right;
}

.c {
  margin-left:-0.5em;
  margin-right:-0.5em;
}


#test1a  { top:0em;     left:0; position:absolute; }
#test1b  { top:2em;     left:0; position:absolute; }
#test1c  { top:4em;     left:0; position:absolute; }
#test1d  { top:6em;     left:0; position:absolute; }

#test2a  { top:0em;     left:15em; position:absolute; }
#test2b  { top:2em;     left:15em; position:absolute; }
#test2c  { top:4em;     left:15em; position:absolute; }
#test2d  { top:6em;     left:15em; position:absolute; }

#test3a  { top: 8em;     left:0; position:absolute; }
#test3b  { top:10em;     left:0; position:absolute; }
#test3c  { top:12em;     left:0; position:absolute; }
#test3d  { top:14em;     left:0; position:absolute; }

#test4a  { top: 8em;     left:15em; position:absolute; }
#test4b  { top:10em;     left:15em; position:absolute; }
#test4c  { top:12em;     left:15em; position:absolute; }
#test4d  { top:14em;     left:15em; position:absolute; }

#test5a  { top:16em;     left:0; position:absolute; }
#test5b  { top:18em;     left:0; position:absolute; }
#test5c  { top:20em;     left:0; position:absolute; }
#test5d  { top:22em;     left:0; position:absolute; }

#test6a  { top:16em;     left:15em; position:absolute; }
#test6b  { top:18em;     left:15em; position:absolute; }
#test6c  { top:20em;     left:15em; position:absolute; }
#test6d  { top:22em;     left:15em; position:absolute; }

#test7a  { top:24em;     left:0; position:absolute; }
#test7b  { top:26em;     left:0; position:absolute; }
#test7c  { top:28em;     left:0; position:absolute; }
#test7d  { top:30em;     left:0; position:absolute; }

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

<!-- start + end marker -->
<div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
<div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
<div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
<div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>

<!-- end marker -->
<div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div>
<div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div>
<div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div>
<div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div>

<!-- start marker -->
<div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div>
<div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div>
<div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div>
<div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div>

<!-- start + end marker, no characters fit, marker is clipped -->
<div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
<div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
<div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
<div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>

<!-- start marker, all characters overlapped by marker -->
<div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div>
<div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div>
<div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
<div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div>


</div>

</body>
</html>