layout/reftests/text-decoration/complex-decoration-style-standards.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 span {
  20   position: relative;
  21   left: 13px;
  22 }
  23
  24 p.relative2 > span {
  25   position: relative;
  26   left: 13px;
  27   text-decoration: none;
  28 }
  29
  30 p.relative2 span span {
  31   position: relative;
  32   left: -13px;
  33 }
  34
  35 p.shadow {
  36   color: transparent;
  37   text-shadow: 1em 0.5em black;
  38 }
  39 </style>
  40 <div style="font-size: 16px;">
  41 <p class="dotted">
  42 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  43 </p>
  44 <p class="dashed">
  45 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  46 </p>
  47 <p class="wavy">
  48 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  49 </p>
  50 <p class="dotted relative">
  51 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  52 </p>
  53 <p class="dashed relative">
  54 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  55 </p>
  56 <p class="wavy relative">
  57 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  58 </p>
  59 <p class="dotted relative2">
  60 <span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span>
  61 </p>
  62 <p class="dashed relative2">
  63 <span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span>
  64 </p>
  65 <p class="wavy relative2">
  66 <span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span>
  67 </p>
  68 <p class="dotted shadow">
  69 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  70 </p>
  71 <p class="dashed shadow">
  72 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  73 </p>
  74 <p class="wavy shadow">
  75 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  76 </p>
  77 </div>
  78 <div style="font-size: 32px;">
  79 <p class="dotted">
  80 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  81 </p>
  82 <p class="dashed">
  83 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  84 </p>
  85 <p class="wavy">
  86 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  87 </p>
  88 <p class="dotted relative">
  89 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  90 </p>
  91 <p class="dashed relative">
  92 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  93 </p>
  94 <p class="wavy relative">
  95 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  96 </p>
  97 <p class="dotted relative2">
  98 <span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span>
  99 </p>
 100 <p class="dashed relative2">
 101 <span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span>
 102 </p>
 103 <p class="wavy relative2">
 104 <span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span>
 105 </p>
 106 <p class="dotted shadow">
 107 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
 108 </p>
 109 <p class="dashed shadow">
 110 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
 111 </p>
 112 <p class="wavy shadow">
 113 <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
 114 </p>
 115 </div>