1 <!DOCTYPE html>
2 <html><!-- Submitted from TestTWF Paris --><head>
3
4 <title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title>
5 <link href="http://lea.verou.me" rel="author" title="Lea Verou">
6 <link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
7 <link href="http://www.w3.org/TR/css3-background/#corner-shaping" rel="help">
8 <meta content="" name="flags">
9 <meta content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness." name="assert">
10 <style>
11 div {
12 position: absolute;
13 }
14
15 .container {
16 position: relative;
17 width: 140px;
18 height: 140px;
19 margin: 10px;
20 }
21
22 .ref {
23 top: 10px;
24 left: 10px;
25 height: 140px;
26 width: 140px;
27 border-radius: 30px;
28 }
29
30 .test {
31 width: 100px;
32 height: 100px;
33 padding: 20px;
34 border: 10px solid transparent;
35 border-radius: 40px;
36 background-clip: padding-box;
37 }
38
39 .behind {
40 background-color: red;
41 }
42
43 .top {
44 background-color: green;
45 }
46
47 .ref.top {
48 width: 144px;
49 height: 144px;
50 left: 8px;
51 top: 8px;
52 }
53
54 .test.top {
55 width: 104px;
56 height: 104px;
57 left: -2px;
58 top: -2px;
59 }
60 </style>
61
62 </head>
63 <body>
64
65 <p>Test passes if there are two filled green rounded squares and <strong>no red</strong>.</p>
66 <div class="container">
67 <div class="test behind"></div>
68 <div class="ref top"></div>
69 </div>
70
71 <div class="container">
72 <div class="ref behind"></div>
73 <div class="test top"></div>
74 </div>
75
76
77 </body></html>