border-radius-overflow-hidden

Clipping to the border-radius curve

WeasyPrint

This browser

Assertion
Effects that clip to the border or padding edge (such as 'overflow' other than 'visible') must clip to the curve

Source

 1 <!DOCTYPE html>
 2 <html><!-- Submitted from TestTWF Paris --><head>
 3 
 4 <title>CSS Backgrounds and Borders Test: Clipping to the border-radius curve</title>
 5 <link href="http://lea.verou.me" rel="author" title="Lea Verou">
 6 <link href="http://www.w3.org/TR/css3-background/#corner-clipping" rel="help">
 7 <meta content="" name="flags">
 8 <meta content="Effects that clip to the border or padding edge (such as 'overflow' other than 'visible') must clip to the curve" name="assert">
 9 <style>
10 div {
11 	position: absolute;
12 }
13 
14 .ref,
15 .test {
16 	border-radius: 30px;
17 }
18 
19 .ref {
20 	width: 104px;
21 	height: 104px;
22 	left: -2px;
23 	top: -2px;
24 	background-color: green;
25 }
26 
27 .test,
28 .contents {
29 	background-color: red;
30 	width: 100px;
31 	height: 100px;
32 }
33 
34 .test {
35 	overflow: hidden;
36 }
37 
38 </style>
39 
40 </head>
41 <body>
42 
43 <p>Test passes if there is one filled green rounded square and <strong>no red</strong>.</p>
44 <div class="container">
45   <div class="test">
46   	<div class="contents"></div>
47   </div>
48   <div class="ref"></div>
49 </div>
50 
51 
52 
53 </body></html>