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

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5 -->
   6 <!DOCTYPE HTML>
   7 <html><head>
   8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   9 <title>text-overflow: text-overflow block padding </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; text-decoration-skip-ink: none;
  17 }
  18 body { width:24ch; overflow:hidden; }
  19
  20 .test {
  21   overflow: hidden;
  22   white-space: nowrap;
  23   padding-left: 1ch;
  24   padding-right: 3ch;
  25   height: 3em;
  26   margin-bottom:1em;
  27 }
  28 .s {
  29   overflow: auto; position:relative;
  30   text-decoration: line-through;
  31 }
  32 .rel { position:relative; }
  33 span {
  34   text-decoration: underline overline;
  35   background:yellow;
  36 }
  37 .rtl {
  38   direction:rtl;
  39 }
  40 .ltr {
  41   direction:ltr;
  42 }
  43 .rlo span {
  44   unicode-bidi: bidi-override; direction: rtl;
  45 }
  46 .lro span {
  47   unicode-bidi: bidi-override; direction: ltr;
  48 }
  49 .overlay {
  50   position:absolute;
  51   border-color:transparent;
  52   text-decoration: line-through;
  53   z-index:1;
  54 }
  55 y {   background:yellow;}
  56 m {   background:yellow; position:absolute; right:0; padding-right:3ch; z-index:2;}
  57 mr {  background:yellow; position:absolute; left:0;padding-left:1ch; z-index:2;}
  58 </style>
  59 </head><body>
  60
  61 <!-- LTR / LTR -->
  62 <div class="test ltr overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>
  63 <div class="test ltr"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y>&#x2026;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</y></div>
  64
  65 <div class="test ltr s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
  66
  67 <!-- RTL / LTR -->
  68 <div class="test rtl rel"><span><div class="overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y style="padding-left:3ch">&#x2026;</y></div>
  69
  70 <div class="test rtl s"><mr>&#x2026;</mr><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  71
  72 <!-- LTR / RTL -->
  73 <div class="test ltr rlo overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>
  74 <div class="test ltr rlo"  ><span>&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span><y style="padding-right:3ch">&#x2026;</y></div>
  75
  76 <div class="test ltr rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span><m>&#x2026;</m></div>
  77
  78 <!-- RTL / RTL -->
  79 <div class="test rtl rlo rel"><span><div class="overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y>&#x2026;&nbsp;</y></div>
  80
  81 <div class="test rtl rlo s"><mr>&#x2026;</mr><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
  82
  83 </body></html>