layout/reftests/text-decoration/complex-decoration-style-standards-ref.html

   1 <!DOCTYPE html>
   2 <style type="text/css">
   3 p {
   4   margin-left: 11px;
   5   padding-left: 11px;
   6 }
   7 p.dotted span {
   8   text-decoration-style: dotted;
   9 }
  10 p.dashed span {
  11   text-decoration-style: dashed;
  12 }
  13 p.wavy span {
  14   text-decoration-style: wavy;
  15 }
  16 span {
  17   text-decoration: underline line-through overline;
  18 }
  19 p.relative {
  20   margin-left: 24px;
  21 }
  22 p.shadow span {
  23   position: relative;
  24   left: 1em;
  25   top: 0.5em;
  26 }
  27 </style>
  28 <div style="font-size: 16px;">
  29 <p class="dotted">
  30 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  31 </p>
  32 <p class="dashed">
  33 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  34 </p>
  35 <p class="wavy">
  36 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  37 </p>
  38 <p class="dotted relative">
  39 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  40 </p>
  41 <p class="dashed relative">
  42 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  43 </p>
  44 <p class="wavy relative">
  45 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  46 </p>
  47 <p class="dotted">
  48 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  49 </p>
  50 <p class="dashed">
  51 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  52 </p>
  53 <p class="wavy">
  54 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  55 </p>
  56 <p class="dotted shadow">
  57 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  58 </p>
  59 <p class="dashed shadow">
  60 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  61 </p>
  62 <p class="wavy shadow">
  63 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  64 </p>
  65 </div>
  66 <div style="font-size: 32px;">
  67 <p class="dotted">
  68 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  69 </p>
  70 <p class="dashed">
  71 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  72 </p>
  73 <p class="wavy">
  74 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  75 </p>
  76 <p class="dotted relative">
  77 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  78 </p>
  79 <p class="dashed relative">
  80 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  81 </p>
  82 <p class="wavy relative">
  83 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  84 </p>
  85 <p class="dotted">
  86 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  87 </p>
  88 <p class="dashed">
  89 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  90 </p>
  91 <p class="wavy">
  92 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  93 </p>
  94 <p class="dotted shadow">
  95 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  96 </p>
  97 <p class="dashed shadow">
  98 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  99 </p>
 100 <p class="wavy shadow">
 101 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
 102 </p>
 103 </div>