border-conflict-style-088

Border Conflict Resolution (by border style): 'ridge' vs. 'outset' - border with highest priority border style should dominate

WeasyPrint

This browser

Assertion
The 'ridge' border is the dominant border when it is collapsed with an 'outset' border of the same size.

Source

 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 (by border style): 'ridge' vs. 'outset' - border with highest priority border style should dominate</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="">
 8         <meta name="assert" content="The 'ridge' border is the dominant border when it is collapsed with an 'outset' border of the same size.">
 9         <style type="text/css">
10             #table1
11             {
12                 margin-bottom: 20px;
13             }
14             table
15             {
16                 border-collapse: collapse;
17             }
18             td
19             {
20                 border: 5px ridge lime;
21                 height: 3em;
22                 width: 3em;
23             }
24             #center
25             {
26                 border: 5px outset red;
27             }
28         </style>
29     </head>
30     <body>
31         <p>Test passes if the center box in the table below has a border similar to this:</p>
32         <table id="table1">
33             <tr>
34                 <td></td>
35             </tr>
36         </table>
37         <table>
38             <tr>
39                 <td>ridge</td>
40                 <td>ridge</td>
41                 <td>ridge</td>
42             </tr>
43             <tr>
44                 <td>ridge</td>
45                 <td id="center">outset</td>
46                 <td>ridge</td>
47             </tr>
48             <tr>
49                 <td>ridge</td>
50                 <td>ridge</td>
51                 <td>ridge</td>
52             </tr>
53         </table>
54     </body>
55 </html>