border-conflict-style-052

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

WeasyPrint

This browser

Assertion
The 'dotted' border is the dominant border when it is collapsed with an 'inset' 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): 'inset' vs. 'dotted' - 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 'dotted' border is the dominant border when it is collapsed with an 'inset' 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 inset lime;
21                 height: 3em;
22                 width: 3em;
23             }
24             #center, #table1 td
25             {
26                 border: 5px dotted lime;
27             }
28             #top
29             {
30                 border-top: 5px inset red;
31             }
32             #left
33             {
34                 border-left: 5px inset red;
35             }
36             #bottom
37             {
38                 border-bottom: 5px inset red;
39             }
40             #right
41             {
42                 border-right: 5px inset red;
43             }
44         </style>
45     </head>
46     <body>
47         <p>Test passes if the center box in the table below has a border similar to this:</p>
48         <table id="table1">
49             <tr>
50                 <td></td>
51             </tr>
52         </table>
53         <table>
54             <tr>
55                 <td>inset</td>
56                 <td id="bottom">inset</td>
57                 <td>inset</td>
58             </tr>
59             <tr>
60                 <td id="right">inset</td>
61                 <td id="center">dotted</td>
62                 <td id="left">inset</td>
63             </tr>
64             <tr>
65                 <td>inset</td>
66                 <td id="top">inset</td>
67                 <td>inset</td>
68             </tr>
69         </table>
70     </body>
71 </html>