border-radius-clipping

Border radius clipping

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
When set with 'overflow: hidden', outer container should clip background of an element insides at the corners.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <title>Border radius clipping</title>
 4     <link href="mailto:liz@oupeng.com" rel="author" title="zhouli">
 5     <link href="http://www.w3.org/TR/css3-background/#corner-clipping" rel="help">
 6     <link href="reference/border-radius-clipping-ref.htm" rel="match">
 7     <meta content="When set with 'overflow: hidden', outer container should clip background of an element insides at the corners. " name="assert">
 8     <style>
 9         #parent{
10             border-radius: 15px;
11             border: 1px solid blue;
12             overflow: hidden;
13             width: 300px;
14             height: 30px;
15         }
16         #son{
17             background-color: green;
18             width: 300px;
19             height: 30px;
20         }
21         #dummy {
22             border-radius: 5000em;
23             height: 10000em;
24             overflow: hidden;
25             width: 10000em;
26         }
27     </style>
28 </head>
29 <body>
30 <div id="parent">
31     <div id="son"></div>
32 </div>
33 <div id="dummy">
34     This should not appear if browser supports border-radius
35 </div>
36 <script>
37 </script>
38 
39 </body></html>