1 <!DOCTYPE html>
2 <html lang="en"><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds Test:background clip property with value content-box</title>
5 <link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha">
6 <link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen"> <!-- 2013-08-26 -->
7 <link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
8 <link href="reference/css3-background-clip-content-box-ref.htm" rel="match">
9 <style type="text/css">
10 .box {
11 width: 200px;
12 height: 200px;
13 position: relative;
14 }
15 .box div {
16 position: absolute;
17 }
18 #div1 {
19 top: 0;
20 left: 0;
21 right: 0;
22 bottom: 0;
23 background-color: green;
24 }
25 #div2 {
26 top: 15px;
27 left: 15px;
28 right: 15px;
29 bottom: 15px;
30 background-color: red;
31 }
32 #div3 {
33 top: 0;
34 left: 0;
35 right: 0;
36 bottom: 0;
37 border: solid 15px transparent;
38 padding: 15px;
39 background-color: yellow;
40 background-clip: content-box;
41 }
42 </style>
43 </head>
44 <body>
45 <p>
46 The test passes if threre are three overlapping squares with different color(green,red and yellow from outside to inside).
47 </p>
48 <div class="box">
49 <div id="div1"></div>
50 <div id="div2"></div>
51 <div id="div3"></div>
52 </div>
53
54
55 </body></html>