blob: 98cfbd900ea33377f77acc280ce50a727de40c93 (
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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>empty-cells: show</title>
<link rel="next" href="backgr_layers-hide.html" title="Background Layers: empty-cell: hide">
<link rel="prev" href="backgr_position-table-cell.html" title="Background Position: Background on 'table-cell'">
<link rel="contents" href="./backgr_index.html" title="Table of Contents">
<link rel="stylesheet" type="text/css" href="common.css">
<style type="text/css">
table {background: blue; empty-cells: show}
tbody, thead {background: url(edge.gif) right top no-repeat}
tr {background: url(edge.gif) 0 10px no-repeat}
.colgroup-A {background: url(edge.gif) 100% 20px no-repeat}
.col-3 {background: url(edge.gif) 0 30px no-repeat}
.c {background: url(edge.gif) -20px 100% no-repeat; min-height: 50px}
</style>
</head>
<body>
<h1>CSS2 Table Backgrounds Test Suite</h1>
<h2>Part C: Background Layers</h2>
<h3>empty-cells: show</h3>
<p>Both tables should have a blue background.</p>
<p>In table cell C (third cell in the first row), which is empty:</p>
<ul>
<li>Four sets of horizontal double violet stripes surrounded by aqua should run just inside the top border edge.
<li>One set of aqua-backed double violet stripes should run just inside the left, right, and bottom border edges.
<li>The third set along the top should turn down at the right edge and go under the fourth set to form the right-edge set.
<li>The fourth set should turn down at the left edge to form the left set.
<li>The bottom stripe should be straight and cut across <em>over</em> the side sets.
</ul>
<p>In table cell A, (first cell in the first row):</p>
<ul>
<li>Three sets of horizontal aqua-backed double violet stripes should run just inside the top border edge.
<li>The first set should run across.
<li>The second set should turn down at the left edge, going over the third set to form another set that runs just inside the left border edge.
</ul>
<p>In table cell D, (last cell in the first row):</p>
<ul>
<li>Two sets of horizontal aqua-backed double violet strips should run just inside the top border edge.
<li>The first set should turn down at the right edge, going under the second horizontal set to run vertically just inside the right border edge.
</ul>
<p>In table cell G, (third cell in the second row):</p>
<ul>
<li>Two sets of horizontal aqua-backed double violet stripes should run just inside the top border edge.
<li>A set of vertical stripes should run down just inside the left border edge, going under both horizontal stripes.
<li>Another set of vertical stripes should run down just inside the right border edge, also going under both horizontal stripes.
</ul>
<dl>
<dt>next
<dd><a href="backgr_layers-hide.html">Background Layers: empty-cells: show</a>
<dt>previous
<dd><a href="backgr_position-table-cell.html">Background Position: Background on 'table-cell'</a>
<dt>contents
<dd><a href="./backgr_index.html">Table of Contents</a>
</dl>
<table class="separate">
<caption>With 'border-collapse: separate'</caption>
<colgroup class="colgroup-A">
<col class="col-1">
<col class="col-2">
<col class="col-3">
</colgroup>
<colgroup class="colgroup-B">
<col class="col-4">
</colgroup>
<thead>
<tr class="th-row-1">
<th class="a">TH A</th>
<th class="b">TH B</th>
<th class="c"></th>
<th class="d">TH D</th>
</tr>
</thead>
<tfoot>
<tr class="tb-row-1">
<td class="m" colspan=2>TD M</td>
<td class="o">TD O</td>
<td class="p">TD P</td>
</tfoot>
<tbody>
<tr class="tb-row-1">
<td class="e" rowspan=2>TD E</td>
<td class="f">TD F</td>
<td class="g">TD G</td>
<td class="h">TD H</td>
</tr>
<tr class="tb-row-2">
<td class="j">TD J</td>
<td class="k">TD K</td>
<td class="l">TD L</td>
</tr>
</tbody>
</table>
<table class="collapse">
<caption>With 'border-collapse: collapse'</caption>
<colgroup class="colgroup-A">
<col class="col-1">
<col class="col-2">
<col class="col-3">
</colgroup>
<colgroup class="colgroup-B">
<col class="col-4">
</colgroup>
<thead>
<tr class="th-row-1">
<th class="a">TH A</th>
<th class="b">TH B</th>
<th class="c"></th>
<th class="d">TH D</th>
</tr>
</thead>
<tfoot>
<tr class="tb-row-1">
<td class="m" colspan=2>TD M</td>
<td class="o">TD O</td>
<td class="p">TD P</td>
</tfoot>
<tbody>
<tr class="tb-row-1">
<td class="e" rowspan=2>TD E</td>
<td class="f">TD F</td>
<td class="g">TD G</td>
<td class="h">TD H</td>
</tr>
<tr class="tb-row-2">
<td class="j">TD J</td>
<td class="k">TD K</td>
<td class="l">TD L</td>
</tr>
</tbody>
</table>
<div class="validity">
<a href="http://validator.w3.org/check/referer"><img
src="valid-html401.png" height="31" width="88"
alt="Valid HTML 4.01!"></a>
</div>
<address>
CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com>
</address>
</body>
</html>
|
