1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Border conflict resolution - borders are collapsed according to precdence rules (example 1)</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution">
7 <meta name="flags" content="image">
8 <meta name="assert" content="Borders are collapsed according to the precedence rules (example from spec section 17.6.2.1).">
9 <style type="text/css">
10 table
11 {
12 border-collapse: collapse;
13 border: 5px solid yellow;
14 }
15 *#col1
16 {
17 border: 3px solid black;
18 }
19 td
20 {
21 border: 1px solid red;
22 padding: 1em;
23 width: 2em;
24 height: 2em;
25 }
26 td.cell5
27 {
28 border: 5px dashed blue;
29 }
30 td.cell6
31 {
32 border: 5px solid green;
33 }
34 </style>
35 </head>
36 <body>
37 <table>
38 <col id="col1">
39 <col id="col2">
40 <col id="col3">
41 <tr id="row1">
42 <td> 1</td>
43 <td> 2</td>
44 <td> 3</td>
45 </tr>
46 <tr id="row2">
47 <td> 4</td>
48 <td class="cell5"> 5</td>
49 <td class="cell6"> 6</td>
50 </tr>
51 <tr id="row3">
52 <td> 7</td>
53 <td> 8</td>
54 <td> 9</td>
55 </tr>
56 <tr id="row4">
57 <td> 10</td>
58 <td> 11</td>
59 <td> 12</td>
60 </tr>
61 <tr id="row5">
62 <td> 13</td>
63 <td> 14</td>
64 <td> 15</td>
65 </tr>
66 </table>
67 <p>Test passes if the table above has the same border colors and styles as the table below. (Note: colors in the bottom image might appear slightly faded.)</p>
68 <div>
69 <img alt="Illustration of proper border collapsing (from spec)" src="support/border_conflict_example_001.png">
70 </div>
71 </body>
72 </html>