1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds and Borders Test: background-clip Reference</title>
4 <link href="mailto:wangjian@ucweb.com" rel="author" title="James Wang">
5 <link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
6 <meta content="" name="flags">
7 <meta content="background-clip with content-box means paint the background within the content box" name="assert">
8
9 <link href="reference/background-clip-content-box-ref.htm" rel="match">
10
11 <style type="text/css">
12 * { padding: 0; margin: 0; }
13 #test-color-blue {
14 background-color: blue;
15 height: 200px;
16 position: absolute;
17 width: 200px;
18 }
19 #test-color-green {
20 background-clip: content-box;
21 background-color: rgba(0, 255, 0, 1);
22 height: 180px;
23 padding: 10px;
24 position: absolute;
25 width: 180px;
26 }
27 </style>
28 </head>
29 <body>
30 <p>Test pass if the green box has a 10px width red edge</p>
31 <!-- background -->
32 <div id="test-color-blue"></div>
33 <div id="test-color-green"></div>
34
35
36 </body></html>