1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: background-position - percentage values versus left offset and top offset percentages</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <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">
10 <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">
11 <meta content="image" name="flags">
12 <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. In this testcase, the point coordinates of the background-image are (14px, 84px) and such inner point of the background-image will be placed at the point 14% across and 84% down the padding box of #nearest-positioned-ancestor. 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 to its top edge within the padding box of its nearest positioned ancestor." name="assert">
13
14 <style type="text/css">
15 #nearest-positioned-ancestor
16 {
17 background-color: lime; /* padding box will be lime */
18 background-image: url("support/red_box.png"); /* red_box is 100px wide by 100px tall */
19 background-position: 14% 84%;
20 background-attachment: scroll;
21 background-repeat: no-repeat;
22 height: 100px; /* therefore padding box is 300px tall */
23 padding: 100px;
24 position: relative;
25 width: 200px; /* therefore padding box is 400px wide */
26 }
27
28 /*
29 Calculations of red_box position coordinates within #nearest-positioned-ancestor
30 along the horizontal axis
31 56px (14% of #nearest-positioned-ancestor's padding box width)
32 - 14px (14% of red_box's width)
33 ------------------
34 42px (overlapping bright green box's left offset within #nearest-positioned-ancestor)
35
36 42px represents exactly 10.5% of #nearest-positioned-ancestor's padding box width (400px)
37
38 along the vertical axis
39 252px (84% of #nearest-positioned-ancestor's padding box height)
40 - 84px (84% of red_box's height)
41 ------------------
42 168px (overlapping bright green box's top offset within #nearest-positioned-ancestor)
43
44 168px represents exactly 56% of #nearest-positioned-ancestor's padding box height (300px)
45 */
46
47 #overlapping-abs-pos-lime-box
48 {
49 left: 10.5%; /* == 42px */
50 position: absolute;
51 top: 56%; /* == 168px */
52 }
53 </style>
54
55 </head>
56
57 <body>
58
59 <p>Test passes if there is a filled bright green rectangle and <strong>no red</strong>.</p>
60
61 <div id="nearest-positioned-ancestor">
62 <div id="overlapping-abs-pos-lime-box"><img src="support/lime_color.png" alt="Image download support must be enabled"></div>
63 </div>
64
65 </body>
66 </html>