left-offset-percentage-002

position absolute - left offset percentage and inherit

WeasyPrint

This browser

Assertion
'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.

Source

 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>