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

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