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: Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.</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="Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box." name="assert">
8 <style type="text/css">
9 div
10 {
11 width: 60px;
12 height: 100px;
13 border: 20px solid;
14 }
15 td
16 {
17 width: 150px;
18 height: 150px;
19 }
20 .red
21 {
22 border-color: red;
23 }
24 .pos
25 {
26 margin-top: -140px;
27 }
28 .reference1
29 {
30 border-top-left-radius: 97px 20px;
31 }
32 .test1
33 {
34 border-top-left-radius: 97% 20px;
35 }
36 .reference2
37 {
38 border-top-left-radius: 51px 20px;
39 }
40 .test2
41 {
42 border-top-left-radius: 51% 20px;
43 }
44 .reference3
45 {
46 border-top-left-radius: 25px 20px;
47 }
48 .test3
49 {
50 border-top-left-radius: 25% 20px;
51 }
52 .reference4
53 {
54 border-top-left-radius: 11px 20px;
55 }
56 .test4
57 {
58 border-top-left-radius: 11% 20px;
59 }
60 .reference5
61 {
62 border-top-left-radius: 7px 20px;
63 }
64 .test5
65 {
66 border-top-left-radius: 7% 20px;
67 }
68 .reference6
69 {
70 border-top-left-radius: 5px 20px;
71 }
72 .test6
73 {
74 border-top-left-radius: 5% 20px;
75 }
76 </style>
77 </head>
78 <body>
79 <p>Test passes if the top left corner of each of the boxes is curved and if there is no red visible on the page.</p>
80 <table>
81 <tbody><tr>
82 <td>
83 <div class="red reference1"></div>
84 <div class="pos test1"></div>
85 </td>
86 <td>
87 <div class="red reference2"></div>
88 <div class="pos test2"></div>
89 </td>
90 </tr>
91 <tr>
92 <td>
93 <div class="red reference3"></div>
94 <div class="pos test3"></div>
95 </td>
96 <td>
97 <div class="red reference4"></div>
98 <div class="pos test4"></div>
99 </td>
100 </tr>
101 <tr>
102 <td>
103 <div class="red reference5"></div>
104 <div class="pos test5"></div>
105 </td>
106 <td>
107 <div class="red reference6"></div>
108 <div class="pos test6"></div>
109 </td>
110 </tr>
111 </tbody></table>
112
113 </body></html>