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: Different variations on the sum of border-radius for adjacent corners</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="If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap." name="assert">
8 <style type="text/css">
9 div
10 {
11 border: 10px red solid;
12 width: 80px;
13 height: 80px;
14 }
15 #reference1
16 {
17 border-radius: 30px 75px 15px 15px;
18 }
19 #test1
20 {
21 margin-top: -100px;
22 border-color: black;
23 border-radius: 60px 150px 30px 30px;
24 }
25 #reference2
26 {
27 border-radius: 0 100px 0 20px;
28 }
29 #test2
30 {
31 margin-top: -100px;
32 border-color: black;
33 border-radius: 0 150px 0 30px;
34 }
35 #reference3
36 {
37 border-radius: 100px 0 20px 0;
38 }
39 #test3
40 {
41 margin-top: -100px;
42 border-color: black;
43 border-radius: 150px 0 30px 0;
44 }
45 #reference4
46 {
47 border-radius: 41.67px 58.31px 25px 25px;
48 }
49 #test4
50 {
51 margin-top: -100px;
52 border-color: black;
53 border-radius: 50px 70px 30px 30px;
54 }
55 #reference5
56 {
57 border-radius: 50px 50px 10px 10px;
58 }
59 #test5
60 {
61 margin-top: -100px;
62 border-color: black;
63 border-radius: 150px 150px 30px 30px;
64 }
65 #reference6
66 {
67 border-radius: 25px 41.67px 58.31px 25px;
68 }
69 #test6
70 {
71 margin-top: -100px;
72 border-color: black;
73 border-radius: 30px 50px 70px 30px;
74 }
75 #reference7
76 {
77 border-radius: 25px 25px 41.67px 58.31px;
78 }
79 #test7
80 {
81 margin-top: -100px;
82 border-color: black;
83 border-radius: 30px 30px 50px 70px;
84 }
85 #reference8
86 {
87 border-radius: 58.31px 25px 25px 41.67px;
88 }
89 #test8
90 {
91 margin-top: -100px;
92 border-color: black;
93 border-radius: 70px 30px 30px 50px;
94 }
95 </style>
96 </head>
97 <body>
98 <p>Test passes if there are no squares on the page and there is no red visible on the page.</p>
99 <table>
100 <tbody><tr>
101 <td>
102 <div id="reference1"></div>
103 <div id="test1"></div>
104 </td>
105 <td>
106 <div id="reference2"></div>
107 <div id="test2"></div>
108 </td>
109 </tr>
110 <tr>
111 <td>
112 <div id="reference3"></div>
113 <div id="test3"></div>
114 </td>
115 <td>
116 <div id="reference4"></div>
117 <div id="test4"></div>
118 </td>
119 </tr>
120 <tr>
121 <td>
122 <div id="reference5"></div>
123 <div id="test5"></div>
124 </td>
125 <td>
126 <div id="reference6"></div>
127 <div id="test6"></div>
128 </td>
129 </tr>
130 <tr>
131 <td>
132 <div id="reference7"></div>
133 <div id="test7"></div>
134 </td>
135 <td>
136 <div id="reference8"></div>
137 <div id="test8"></div>
138 </td>
139 </tr>
140 </tbody></table>
141
142
143 </body></html>