border-radius-sum-of-radii-002

Different variations on the value of 'f'

WeasyPrint

This browser

Assertion
When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'.

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: Different variations on the value of 'f'</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 the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'." 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: 50px 50px 30px 30px;
18             }
19             #test1
20             {
21                 margin-top: -100px;
22                 border-color: black;
23                 border-radius: 50px 50px 30px 30px;
24             }
25             #reference2
26             {
27                 border-radius: 0 100px 0 0;
28             }
29             #test2
30             {
31                 margin-top: -100px;
32                 border-color: black;
33                 border-radius: 30px 15000000px 30px 30px;
34             }
35             #reference3
36             {
37                 border-radius: 0;
38             }
39             #test3
40             {
41                 margin-top: -100px;
42                 border-color: black;
43                 border-radius: 30px -150px 30px 30px;
44             }
45             #reference4
46             {
47                 width: 1000px;
48                 height: 500px;
49                 border-radius: 0.1px 0.1px 0.1px 0.1px;
50             }
51             #test4
52             {
53                 width: 1000px;
54                 height: 500px;
55                 margin-top: -520px;
56                 border-color: black;
57                 border-radius: 0.1px 0.1px 0.1px 0.1px;
58             }
59         </style>
60     </head>
61     <body>
62         <p>Test passes if there are no more than two rectangles on the page and there is no red visible on the page.</p>
63         <table>
64             <tbody><tr>
65                  <td>
66                     <div id="reference1"></div>
67                     <div id="test1"></div>
68                 </td>
69                 <td>
70                     <div id="reference2"></div>
71                     <div id="test2"></div>
72                 </td>
73                 <td>
74                     <div id="reference3"></div>
75                     <div id="test3"></div>
76                 </td>
77            </tr>
78         </tbody></table>
79         <div id="reference4"></div>
80         <div id="test4"></div>
81     
82 </body></html>