border-radius-different-width-001

Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.

WeasyPrint

This browser

Assertion
When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3         <title>CSS Test: Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.</title>
 4         <link href="http://www.microsoft.com/" rel="author" title="Microsoft">
 5         <link href="http://www.w3.org/TR/css3-background/#border-radius" rel="help">
 6         <meta content="" name="flags">
 7         <meta content="When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides." name="assert">
 8         <style type="text/css">
 9             div
10             {
11                 width:200px;
12                 height:100px;
13                 border-style:solid;
14                 border-radius: 40px;
15                 margin: 10px;
16             }
17             #test1
18             {
19                 border-width:10px 15px 20px 30px;
20             }
21             #test2
22             {
23                 border-width:10px 25px 40px;
24             }
25             #test3
26             {
27                 border-width:10px 25px;
28             }
29             #test4
30             {
31                 border-width:thin medium thick thin;
32             }
33             #test5
34             {
35                 border-width:thin medium thick;
36             }
37             #test6
38             {
39                 border-width:thin thick;
40             }
41             #test7
42             {
43                 border-style:solid;
44                 border-width:4px 16px 32px 100px;
45                 border-radius:80px;
46                 height:264px;
47                 width:50px;
48             }
49         </style>
50     </head>
51     <body>
52         <p>Test passes if the boxes have rounded corners and show a smooth transition between the thicker and the thinner sides.</p>
53         <table>
54             <tbody><tr>
55                 <td>
56                     <div id="test1"></div>
57                     <div id="test2"></div>
58                     <div id="test3"></div>
59                 </td>
60                 <td>
61                     <div id="test4"></div>
62                     <div id="test5"></div>
63                     <div id="test6"></div>
64                 </td>
65                 <td>
66                     <div id="test7"></div>
67                 </td>
68             </tr>
69         </tbody></table>
70     
71 </body></html>