border-radius-clip-001

'Overflow' clips to the curve of the rounded corner.

WeasyPrint

This browser

Assertion
'Overflow' clips to the curve of the rounded corner.

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: 'Overflow' clips to the curve of the rounded corner.</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="'Overflow' clips to the curve of the rounded corner." name="assert">
 8         <style type="text/css">
 9             div
10             {
11                 border: solid black;
12                 border-radius: 40px;
13                 height: 1in;
14                 width: 2in;
15                 overflow: hidden;
16             }
17         </style>
18     </head>
19     <body>
20         <p>Test passes if the 'Filler Text' below is clipped to the curve of the rounded corners.</p>
21         <div>
22             Filler Text. Filler Text.
23             Filler Text. Filler Text.
24             Filler Text. Filler Text.
25             Filler Text. Filler Text.
26             Filler Text. Filler Text.
27             Filler Text. Filler Text.
28             Filler Text. Filler Text.
29             Filler Text. Filler Text.
30             Filler Text. Filler Text.
31         </div>
32     
33 </body></html>