background-clip-008

background-clip: padding-box with background-color

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3   <meta charset="utf-8">
 4   <title>CSS Background and Borders Test: background-clip: padding-box with background-color</title>
 5   <link href="mailto:jchaffraix@webkit.org" rel="author" title="Julien Chaffraix">
 6   <link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
 7   <link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2013-04-09 -->
 8   <link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
 9   <meta content="" name="flags">
10   <meta content="When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible." name="assert">
11   <link href="reference/ref-if-there-is-no-red.htm" rel="match">
12   <style>
13    div
14    {
15     background-clip: padding-box;
16     background-color: red;
17     border: transparent solid 50px;
18     height: auto;
19     padding: 0px;
20     width: auto;
21    }
22   </style>
23  </head>
24  <body>
25   <p>Test passes if there is <strong>no red</strong>.</p>
26    <div></div>
27  
28 
29 </body></html>