layout/reftests/text-overflow/false-marker-overlap.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: false marker overlap
   7 -->
   8 <html><head>
   9 <title>text-overflow: false marker overlap</title>
  10 <style type="text/css">
  11 @font-face {
  12   font-family: DejaVuSansMono;
  13   src: url(../fonts/DejaVuSansMono.woff);
  14 }
  15 html,body {
  16     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  17 }
  18
  19 .test {
  20   overflow: hidden;
  21   white-space: nowrap;
  22   text-overflow: ellipsis ellipsis;
  23   color: black;
  24   height: 6em;
  25   width: 32.5em;
  26   margin-bottom: 1em;
  27 }
  28
  29 i {
  30   display:inline-block;
  31   height: 3em;
  32   width: 3em;
  33   border:1px solid blue;
  34   text-shadow: none;
  35 }
  36 .rtl {
  37   direction:rtl;
  38 }
  39 .rlo {
  40   unicode-bidi: bidi-override; direction: rtl;
  41 }
  42 .lro {
  43   unicode-bidi: bidi-override; direction: ltr;
  44 }
  45
  46 s {
  47    float:right;
  48    width:3em;
  49    height:3em;
  50    margin-right:-0.6em;
  51    border:1px solid red;
  52 }
  53 .rtl s {
  54    float:left;
  55    margin-left:-0.6em;
  56    margin-right:0;
  57 }
  58 .overlap {margin-left:-0.6em;}
  59 .rtl .overlap {margin-right:-0.6em;margin-left:0;}
  60 .n {padding-left:0.6em;}
  61 .rtl .n {padding-right:0.6em;padding-left:0;}
  62 </style>
  63
  64 </head><body>
  65
  66 <div class="test"><font class="overlap"><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i class="n"></i></font></div>
  67 <div class="test"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i></i></font></div>
  68 <div class="test rtl"><font class="overlap"><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i class="n"></i></font></div>
  69 <div class="test rtl"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i></i></font></div>
  70
  71
  72 </body></html>