background-position-152.xht (3504B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: background-position - percentage values versus left offset and top offset percentages</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" title="14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" /> 11 <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> 12 <link rel="match" href="background-position-152-ref.xht" /> 13 14 <meta content="image" name="flags" /> 15 <meta content="The 'background-position' property, when expressed in percentage values will position the inner point (relative to percentage values) of the background-image itself within the padding box of the element. On the other hand, the 'left' property and 'top' property, for absolute positioning, specifies the left offset and the top of the element applied to its left edge (and not its inner horizontal point) and to its top edge (and not its inner vertical point) within the padding box of its nearest positioned ancestor." name="assert" /> 16 17 <style type="text/css"><![CDATA[ 18 #nearest-positioned-ancestor 19 { 20 background-color: green; /* padding box will be green */ 21 background-image: url("support/100x100-red.png"); 22 background-position: 14% 84%; 23 background-attachment: scroll; 24 background-repeat: no-repeat; 25 height: 100px; /* therefore padding box is 300px tall */ 26 padding: 100px; 27 position: relative; 28 width: 200px; /* therefore padding box is 400px wide */ 29 } 30 31 /* 32 33 In this testcase, the point coordinates of the background-image 34 are (14px, 84px) and such inner point of the background-image will 35 be placed at the point 14% across and 84% down the padding box of 36 div#nearest-positioned-ancestor. 37 38 Calculations of 100x100-red position coordinates within #nearest-positioned-ancestor 39 ==================================================================================== 40 41 along the horizontal axis 42 ------------------------- 43 44 56px (14% of #nearest-positioned-ancestor's padding box width) 45 - 14px (14% of 100x100-red's width) 46 ------------------ 47 42px (overlapping green box's left offset within #nearest-positioned-ancestor) 48 49 42px represents exactly 10.5% of #nearest-positioned-ancestor's padding box 50 width (400px) 51 52 along the vertical axis 53 ----------------------- 54 55 252px (84% of #nearest-positioned-ancestor's padding box height) 56 - 84px (84% of 100x100-red's height) 57 ------------------ 58 168px (overlapping green box's top offset within #nearest-positioned-ancestor) 59 60 168px represents exactly 56% of #nearest-positioned-ancestor's padding box 61 height (300px) 62 */ 63 64 #overlapping-abs-pos-green-box 65 { 66 left: 10.5%; /* == 42px */ 67 position: absolute; 68 top: 56%; /* == 168px */ 69 } 70 ]]></style> 71 72 </head> 73 74 <body> 75 76 <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> 77 78 <div id="nearest-positioned-ancestor"> 79 <div id="overlapping-abs-pos-green-box"><img src="support/swatch-green.png" width="100" height="100" alt="Image download support must be enabled" /></div> 80 </div> 81 82 </body> 83 </html>