css3-background-clip-padding-box

background clip property with value padding-box

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Source

 1 <!DOCTYPE html>
 2 <html lang="en"><head>
 3     <meta charset="utf-8">
 4     <title>CSS Backgrounds Test:background clip property with value padding-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-padding-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: padding-box;
41             }
42     </style>
43   </head>
44   <body>
45     <p>
46       The test passes if threre are two overlapping squares with different color(green 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>