1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/text-overflow/ellipsis-font-fallback-ref.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,149 @@
1.4 +<!DOCTYPE HTML>
1.5 +<!--
1.6 + Any copyright is dedicated to the Public Domain.
1.7 + http://creativecommons.org/licenses/publicdomain/
1.8 +
1.9 + Test: fallback to three ASCII periods when ellipsis is unavailable in the font
1.10 +-->
1.11 +<html><head>
1.12 + <title>text-overflow: ellipsis fallback</title>
1.13 + <style type="text/css">
1.14 +@font-face {
1.15 + /* This font has glyphs for ASCII period, upper-case X and space. */
1.16 + font-family: TestEllipsisFallback;
1.17 + src: url(TestEllipsisFallback.woff);
1.18 +}
1.19 +html,body {
1.20 + color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback;
1.21 +}
1.22 +
1.23 +.rtl {
1.24 + direction:rtl;
1.25 +}
1.26 +.ltr {
1.27 + direction:ltr;
1.28 +}
1.29 +.rlo {
1.30 + unicode-bidi: bidi-override; direction: rtl;
1.31 +}
1.32 +.lro {
1.33 + unicode-bidi: bidi-override; direction: ltr;
1.34 +}
1.35 +
1.36 +m {
1.37 + color:blue;
1.38 +}
1.39 +.o span {
1.40 + color:black;
1.41 +}
1.42 +
1.43 +.s {
1.44 + width:10em;
1.45 +}
1.46 +.s2 {
1.47 + width:10em;
1.48 +}
1.49 +.s3 {
1.50 + width:6em;
1.51 +}
1.52 +.s4 {
1.53 + width:8em;
1.54 +}
1.55 +.s5 {
1.56 + width:5em;
1.57 +}
1.58 +.s6 {
1.59 + width:1em;
1.60 +}
1.61 +.s7 {
1.62 + width:6em;
1.63 +}
1.64 +.p {
1.65 + overflow: hidden;
1.66 + white-space:nowrap;
1.67 +}
1.68 +.r {
1.69 + text-align:right;
1.70 +}
1.71 +
1.72 +.c {
1.73 + margin-left:-0.5em;
1.74 + margin-right:-0.5em;
1.75 +}
1.76 +
1.77 +
1.78 +#test1a { top:0em; left:0; position:absolute; }
1.79 +#test1b { top:2em; left:0; position:absolute; }
1.80 +#test1c { top:4em; left:0; position:absolute; }
1.81 +#test1d { top:6em; left:0; position:absolute; }
1.82 +
1.83 +#test2a { top:0em; left:15em; position:absolute; }
1.84 +#test2b { top:2em; left:15em; position:absolute; }
1.85 +#test2c { top:4em; left:15em; position:absolute; }
1.86 +#test2d { top:6em; left:15em; position:absolute; }
1.87 +
1.88 +#test3a { top: 8em; left:0; position:absolute; }
1.89 +#test3b { top:10em; left:0; position:absolute; }
1.90 +#test3c { top:12em; left:0; position:absolute; }
1.91 +#test3d { top:14em; left:0; position:absolute; }
1.92 +
1.93 +#test4a { top: 8em; left:15em; position:absolute; }
1.94 +#test4b { top:10em; left:15em; position:absolute; }
1.95 +#test4c { top:12em; left:15em; position:absolute; }
1.96 +#test4d { top:14em; left:15em; position:absolute; }
1.97 +
1.98 +#test5a { top:16em; left:0; position:absolute; }
1.99 +#test5b { top:18em; left:0; position:absolute; }
1.100 +#test5c { top:20em; left:0; position:absolute; }
1.101 +#test5d { top:22em; left:0; position:absolute; }
1.102 +
1.103 +#test6a { top:16em; left:15em; position:absolute; }
1.104 +#test6b { top:18em; left:15em; position:absolute; }
1.105 +#test6c { top:20em; left:15em; position:absolute; }
1.106 +#test6d { top:22em; left:15em; position:absolute; }
1.107 +
1.108 +#test7a { top:24em; left:0; position:absolute; }
1.109 +#test7b { top:26em; left:0; position:absolute; }
1.110 +#test7c { top:28em; left:0; position:absolute; }
1.111 +#test7d { top:30em; left:0; position:absolute; }
1.112 +
1.113 +
1.114 + </style>
1.115 +</head>
1.116 +<body>
1.117 +<div style="position: absolute; top:20px; left:50px;">
1.118 +
1.119 +<!-- start + end marker -->
1.120 +<div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro"> <m>...</m>X<m>...</m> </span></div></div></div>
1.121 +<div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro"> <m>...</m>X<m>...</m> </span></div></div></div>
1.122 +<div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div>
1.123 +<div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div>
1.124 +
1.125 +<!-- end marker -->
1.126 +<div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXX<m>...</m> </span></div></div></div>
1.127 +<div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro"> <m>...</m>XXXXX</span></div></div></div>
1.128 +<div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo"> <m>...</m>XXXXX</span></div></div></div>
1.129 +<div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXX<m>...</m> </span></div></div></div>
1.130 +
1.131 +<!-- start marker -->
1.132 +<div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro"> X<m>...</m></span></div></div></div>
1.133 +<div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro"><m>...</m>X </span></div></div></div>
1.134 +<div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X </span></div></div></div>
1.135 +<div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo"> X<m>...</m></span></div></div></div>
1.136 +
1.137 +<!-- start + end marker, no characters fit, marker is clipped -->
1.138 +<div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
1.139 +<div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
1.140 +<div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
1.141 +<div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
1.142 +
1.143 +<!-- start marker, all characters overlapped by marker -->
1.144 +<div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div>
1.145 +<div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div>
1.146 +<div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
1.147 +<div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
1.148 +
1.149 +</div>
1.150 +
1.151 +</body>
1.152 +</html>
