background-origin-008.html (1908B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Backgrounds and Borders Test: background-origin - 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-origin" title="3.8. Positioning Area: the 'background-origin' property"> 9 <link rel="match" href="reference/background-origin-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 21 <meta name="assert" content="Background-origin with 'inherit' implies to inherit its parent element value to position the background area."> 22 <style> 23 div { 24 position: absolute; 25 } 26 #container { 27 background-origin: content-box; 28 } 29 #ref { 30 background-color: red; 31 height: 60px; 32 left: 30px; 33 top: 30px; 34 width: 60px; 35 } 36 #test { 37 background-image: url(support/60x60-green.png); 38 background-origin: inherit; 39 background-repeat: no-repeat; 40 border: transparent dotted 5px; 41 height: 100px; 42 padding: 25px; 43 width: 100px; 44 } 45 </style> 46 </head> 47 <body> 48 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 49 <div id="container"> 50 <div id="ref"></div> 51 <div id="test"></div> 52 </div> 53 </body> 54 </html>