layout/reftests/text-decoration/decoration-color-quirks-ref.html

   1 <style>
   2  *{
   3      text-decoration-skip-ink: none;
   4  }
   5 </style>
   6 <p style="color: #008000;
   7           text-decoration: underline line-through overline;">
   8   <span style="color: #0000FF;">This blue text has green decoration lines</span>
   9 </p>
  10 <p style="color: yellow;
  11           text-decoration: underline line-through overline;">
  12   <span style="color: red;">This red text has yellow decoration lines</span>
  13 </p>
  14 <p style="color: red; text-decoration: underline line-through overline;">
  15   <span style="color: #0000FF">This blue text has red lines</span>
  16 </p>
  17 <p style="color: orange;">
  18   This orange text has transparent lines
  19 </p>
  20 <p>
  21   Here is no decoration lines, but
  22   <span style="font-size: 2em;
  23                color: green;
  24                text-decoration: underline line-through overline;">
  25     <span style="color: blue;">
  26       this blue text has green decoration lines</span></span>,
  27   and here is no decoration lines too.
  28 </p>
  29 <p style="color: red;">
  30   This is red paragraph and here is no decoration lines, but
  31   <span style="font-size: 2em;
  32                color: green;
  33                text-decoration: underline line-through overline;">
  34     <span style="color: red;">here are green decoration lines</span></span>,
  35   and here is no decoration lines too.
  36 </p>
  37 <p style="color: purple;
  38           text-decoration: underline line-through overline;">
  39   This is purple paragraph and here are decoration lines of current color, but
  40   <span style="font-size: 2em;
  41                color: red;
  42                text-decoration: underline line-through overline;">
  43     <span style="color: purple;">here are red decoration lines</span></span>,
  44   and here are current color decoration lines.
  45 </p>
  46 <p style="color: green;
  47           text-decoration: underline line-through overline;">
  48   This is green paragraph and here are decoration lines of current color, and
  49   <span style="font-size: 2em;">
  50     here is specified red decoration color but has current color lines</span>,
  51   and here are current color decoration lines.
  52 </p>
  53 <p style="color: blue;">
  54   This is blue paragraph,
  55   <span style="font-size:2em;
  56                color: red;
  57                text-decoration: underline line-through overline;
  58                text-decoration-color: red;">
  59     here is red text with red decoration lines</span>,
  60   and here is blue text without decoration lines.
  61 </p>
  62 <p style="color: blue;">
  63   This is blue paragraph and decoration color is specified as green,
  64   <span style="font-size:2em;
  65                color: red;
  66                text-decoration: underline line-through overline;
  67                text-decoration-color: green;">
  68     here is red text with green decoration lines</span>,
  69   and here is blue text without decoration lines.
  70 </p>
  71 <p style="color: blue;
  72           text-decoration: underline line-through overline;">
  73   Here has blue decoration lines even though its color is specified as red
  74   before text-decoration.
  75 </p>