background-clip-006.html (1870B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders Test: background-clip - inherit keyword value</title> 6 <link rel="author" title="Intel" href="http://www.intel.com"> 7 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 --> 8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property"> 9 <link rel="match" href="reference/background-clip-005-ref.html"> 10 <link rel="help" href="http://www.w3.org/TR/css3-background/#value-types" title="2.2. Value Types"> 11 <!-- 12 " 13 all properties defined in this specification also accept 14 the inherit keyword as their property value 15 " 16 CSS Backgrounds and Borders Module Level 3 17 2.2. Value Types 18 http://www.w3.org/TR/css3-background/#value-types 19 --> 20 <meta name="assert" content="Background-clip with 'inherit' implies to inherit its parent element value to paint the background area."> 21 <style> 22 #container { 23 background-clip: content-box; 24 } 25 #test-overlapped-red { 26 background-clip: inherit; 27 background-color: red; 28 border: transparent dotted 5px; 29 height: 100px; 30 padding: 25px; 31 width: 100px; 32 } 33 #ref-overlapping-green { 34 background-color: green; 35 bottom: 130px; 36 height: 100px; 37 left: 30px; 38 position: relative; 39 width: 100px; 40 } 41 </style> 42 </head> 43 <body> 44 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 45 <div id="container"> 46 <div id="test-overlapped-red"></div> 47 <div id="ref-overlapping-green"></div> 48 </div> 49 </body> 50 </html>