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