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