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 - top 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="'top: inherit' makes the top property take the same computed value as the top property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'top: [percentage]' refers to height 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: 0px;
47 top: inherit;
48 /*
49 =====================================
50 top: inherit should resolve as top: 25% because
51 "the property takes the same computed value as the
52 property for the element's parent"
53 CSS 2.1, section 6.2.1 The 'inherit' value
54 http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit
55 and
56 "Computed value: (...) if specified as a percentage, [then]
57 the specified [percentage] value"
58 http://www.w3.org/TR/CSS21/visuren.html#position-props
59
60 So, the top offset of #green-child-abs-pos-inherit-overlapping
61 should be 25%, which is 25% of the height of its containing
62 block (#parent-abs-pos) which is 0px.
63 =====================================
64 */
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>