border-conflict-style-031

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

WeasyPrint

This browser

Assertion
The 'dashed' border is the dominant border when it is collapsed with a 'groove' 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): 'groove' vs. 'dashed' - 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 'dashed' border is the dominant border when it is collapsed with a 'groove' 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 groove lime;
21                 height: 3em;
22                 width: 3em;
23             }
24             #center, #table1 td
25             {
26                 border: 5px dashed lime;
27             }
28             #top
29             {
30                 border-top: 5px groove red;
31             }
32             #left
33             {
34                 border-left: 5px groove red;
35             }
36             #bottom
37             {
38                 border-bottom: 5px groove red;
39             }
40             #right
41             {
42                 border-right: 5px groove 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>groove</td>
56                 <td id="bottom">groove</td>
57                 <td>groove</td>
58             </tr>
59             <tr>
60                 <td id="right">groove</td>
61                 <td id="center">dashed</td>
62                 <td id="left">groove</td>
63             </tr>
64             <tr>
65                 <td>groove</td>
66                 <td id="top">groove</td>
67                 <td>groove</td>
68             </tr>
69         </table>
70     </body>
71 </html>