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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html>
<title>CSS Test: border conflict resolution - border styles that differ only in color</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="If border styles differ only in color,
then a style set on a cell wins over one on a row,
which wins over a row group, column, column group and, lastly, table.
">
<style>
br { clear: both }
table { border-collapse: collapse; float: left; }
td { padding: 0 }
.loser { border: 25px solid red }
.winner { border: 25px solid green }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<!-- Cell wins over row -->
<table>
<tr class="loser">
<td class="winner"></td>
</tr>
</table>
<!-- Cell wins over row group -->
<table>
<tbody class="loser">
<td class="winner"></td>
</tbody>
</table>
<!-- Cell wins over column -->
<table>
<col class="loser"></col>
<td class="winner"></td>
</table>
<!-- Cell wins over column group -->
<table>
<colgroup class="loser"></col>
<td class="winner"></td>
</table>
<br>
<!-- Cell wins over table -->
<table class="loser">
<td class="winner"></td>
</table>
<!-- Row wins over row group -->
<table>
<tbody class="loser"></col>
<tr class="winner">
<td></td>
</tr>
</tbody>
</table>
<!-- Row wins over column -->
<table>
<col class="loser"></col>
<tr class="winner">
<td></td>
</tr>
</table>
<!-- Row wins over column group -->
<table>
<colgroup class="loser"></colgroup>
<tr class="winner">
<td></td>
</tr>
</table>
<br>
<!-- Row wins over table -->
<table class="loser">
<tr class="winner">
<td></td>
</tr>
</table>
<!-- Row group wins over column -->
<table>
<col class="loser"></col>
<tbody class="winner"></col>
<td></td>
</tbody>
</table>
<!-- Row group wins over column group -->
<table>
<colgroup class="loser"></colgroup>
<tbody class="winner"></col>
<td></td>
</tbody>
</table>
<!-- Row group wins over table -->
<table class="loser">
<tbody class="winner"></col>
<td></td>
</tbody>
</table>
<br>
<!-- Column wins over column group -->
<table>
<colgroup class="loser">
<col class="winner"></col>
</colgroup>
<td></td>
</table>
<!-- Column wins over table -->
<table class="loser">
<col class="winner"></col>
<td></td>
</table>
<!-- Column group wins over table -->
<table class="loser">
<colgroup class="winner"></colgroup>
<td></td>
</table>
<!-- Table wins when alone -->
<table class="winner">
<td></td>
</table>
|
