border-top-left-radius-values-001

'Border-top-left-radius' with two values.

WeasyPrint

This browser

Assertion
The first value of the 'border-top-left-radius' is the horizontal radius of the rounded corner and the second value is its vertical radius.

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: 'Border-top-left-radius' with two values.</title>
 4         <link href="http://www.microsoft.com/" rel="author" title="Microsoft">
 5         <link href="http://www.w3.org/TR/css3-background/#border-top-left-radius" rel="help">
 6         <meta content="" name="flags">
 7         <meta content="The first value of the 'border-top-left-radius' is the horizontal radius of the rounded corner and the second value is its vertical radius." name="assert">
 8         <style type="text/css">
 9             body
10             {
11                 margin: 10px;
12             }
13             #test
14             {
15                 height: 288px;
16                 width: 384px;
17                 border: 2px solid;
18                 border-top-left-radius: 50px 80px;
19             }
20             #reference
21             {
22                 position: absolute;
23                 border: 2px solid blue;
24                 border-left: none;
25                 border-top: none;
26                 left: 10px;
27                 top: 10px;
28                 width: 50px;
29                 height: 80px;
30             }
31         </style>
32     </head>
33     <body>
34         <div id="reference"></div>
35         <div id="test"></div>
36         <p>Test passes if the two blue lines are radii of the rounded corner.</p>
37     
38 
39 </body></html>