layout/reftests/text-overflow/block-padding.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: test marker trigger point and alignment in a block with padding
   7 -->
   8 <!DOCTYPE HTML>
   9 <html><head>
  10 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  11 <title>text-overflow: text-overflow block padding </title>
  12 <style type="text/css">
  13 @font-face {
  14   font-family: DejaVuSansMono;
  15   src: url(../fonts/DejaVuSansMono.woff);
  16 }
  17 html,body {
  18     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; text-decoration-skip-ink: none;
  19 }
  20 body { width:24ch; overflow:hidden; }
  21
  22 .test {
  23   overflow: hidden;
  24   white-space: nowrap;
  25   text-overflow: ellipsis;
  26   text-decoration: line-through;
  27   padding-left: 1ch;
  28   padding-right: 3ch;
  29   height: 3em;
  30   margin-bottom:1em;
  31 }
  32 .s {
  33   overflow: auto;
  34 }
  35 span {
  36   text-decoration: underline overline;
  37   background:yellow;
  38 }
  39 .rtl {
  40   direction:rtl;
  41 }
  42 .ltr {
  43   direction:ltr;
  44 }
  45 .rlo span {
  46   unicode-bidi: bidi-override; direction: rtl;
  47 }
  48 .lro span {
  49   unicode-bidi: bidi-override; direction: ltr;
  50 }
  51 </style>
  52
  53 </head><body>
  54
  55 <!-- LTR / LTR -->
  56 <div class="test ltr"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  57 <div class="test ltr s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  58
  59 <!-- RTL / LTR -->
  60 <div class="test rtl"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  61 <div class="test rtl s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  62
  63 <!-- LTR / RTL -->
  64 <div class="test ltr rlo"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  65 <div class="test ltr rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  66
  67 <!-- RTL / RTL -->
  68 <div class="test rtl rlo"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  69 <div class="test rtl rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  70
  71 </body></html>