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: position absolute - left offset percentage and inherit</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">
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="'left: inherit' makes the left property take the same computed value as the left property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'left: [percentage]' refers to width of containing block." name="assert">
12 <meta content="" name="flags">
13
14 <style type="text/css">
15 div {position: absolute;}
16
17 #grand-parent-abs-pos
18 {
19 height: 400px;
20 width: 600px;
21 }
22
23 #red-abs-pos-overlapped
24 {
25 background-color: red;
26 color: white;
27 height: 100px;
28 left: 300px;
29 top: 100px;
30 width: 100px;
31 }
32
33 #parent-abs-pos
34 {
35 height: 0px;
36 left: 50%; /* 50% x 600px == 300px */
37 /* 'left: [percentage]' refers to width of containing block. */
38 top: 25%; /* 25% x 400px == 100px */
39 /* 'top: [percentage]' refers to height of containing block. */
40 width: 0px;
41 }
42
43 #green-child-abs-pos-inherit-overlapping
44 {
45 background-color: green;
46 left: inherit;
47 /*
48 =====================================
49 left: inherit should resolve as left: 50% because
50 "the property takes the same computed value as the
51 property for the element's parent"
52 CSS 2.1, section 6.2.1 The 'inherit' value
53 http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit
54 and
55 "Computed value: (...) if specified as a percentage, [then]
56 the specified [percentage] value"
57 http://www.w3.org/TR/CSS21/visuren.html#position-props
58
59 So, the left offset of #green-child-abs-pos-inherit-overlapping
60 should be 50%, which is 50% of the width of its containing
61 block (#parent-abs-pos) which is 0px.
62 =====================================
63 */
64 top: 0px;
65 height: 100px;
66 width: 100px;
67 }
68 </style>
69
70 </head>
71
72 <body>
73
74 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
75
76 <div id="grand-parent-abs-pos">
77 <div id="red-abs-pos-overlapped">test FAILED</div>
78 <div id="parent-abs-pos">
79 <div id="green-child-abs-pos-inherit-overlapping"></div>
80 </div>
81 </div>
82
83 </body>
84 </html>