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>