Inherit keyword and computed values for position offset

[GTalbot]

Hello fellow comp.infosystems.www.authoring.stylesheets colleagues,

Imagine this situation:

#grand-parent-abs-pos
{
height: 400px;
position: absolute;
width: 600px;
}

#parent-abs-pos
{
height: 0px;
left: 50%; /* 50% x 600px == 300px */
position: absolute;
top: 25%; /* 25% x 400px == 100px */
width: 0px;
}

#green-child-abs-pos-inherit
{
background-color: green;
left: inherit;
position: absolute;
top: inherit;
height: 100px;
width: 100px;
}

My questions:
1- What should be the computed left offset value of the #green-child-
abs-pos-inherit?

2- Should it inherit "left: 50%" or "left: 300px"?

3- In other words, should it inherit the parent's *specified* left
offset value (50%) or the parent's *computed* left offset value
(300px)?

Testcase:
http://www.gtalbot.org/BrowserBugsSe...-position.html

I read carefully
Section 6.1.2 Computed value
http://www.w3.org/TR/CSS21/cascade.html#computed-value

Section 6.2 Inheritance
http://www.w3.org/TR/CSS21/cascade.html#inheritance

Section 6.2.1 The 'inherit' value
http://www.w3.org/TR/CSS21/cascade.h...ue-def-inherit

and I also carefully read
Bug 117887: elements inherit specified positioning property values
instead of computed values (computed style)
https://bugzilla.mozilla.org/show_bug.cgi?id=117887

Regards, Gérard

[Ben C]

On 2008-11-15, GTalbot <ne*******@gtalbot.orgwrote:

Hello fellow comp.infosystems.www.authoring.stylesheets colleagues,

Imagine this situation:

#grand-parent-abs-pos
{
height: 400px;
position: absolute;
width: 600px;
}

#parent-abs-pos
{
height: 0px;
left: 50%; /* 50% x 600px == 300px */
position: absolute;
top: 25%; /* 25% x 400px == 100px */
width: 0px;
}

#green-child-abs-pos-inherit
{
background-color: green;
left: inherit;
position: absolute;
top: inherit;
height: 100px;
width: 100px;
}

My questions:
1- What should be the computed left offset value of the #green-child-
abs-pos-inherit?

2- Should it inherit "left: 50%" or "left: 300px"?

It should inherit 50% (i.e. be 50% of *its* container).

3- In other words, should it inherit the parent's *specified* left
offset value (50%) or the parent's *computed* left offset value
(300px)?

The computed value is 50%. The *used* value is what's 300px. It inherits
the computed value.

See CSS 2.1 9.3.2:

Computed value: [...] if specified as a length, the corresponding
absolute length; if specified as a percentage, the specified value;
otherwise, 'auto'.

See 6.1 for the definitions of specified, computed and used values.

(There is much confusion here when it comes to the DOM getComputedStyle
method. The DOM spec says it means "computed" as per CSS2 but as far as
I remember CSS2 [as opposed to 2.1] didn't distinguish properly between
computed and used. In many browsers getComputedStyle returns used values
for some things but they seem to be moving towards returning more
computed values in newer releases.)

[GTalbot]

On Nov 15, 2:48*pm, Ben C <[e-mail]:

On 2008-11-15, GTalbot <[e-mail]:

2- Should it inherit "left: 50%" or "left: 300px"?

It should inherit 50% (i.e. be 50% of *its* container).

3- In other words, should it inherit the parent's *specified* left
offset value (50%) or the parent's *computed* left offset value
(300px)?

The computed value is 50%. The *used* value is what's 300px. It inherits
the computed value.

See CSS 2.1 9.3.2:

* * Computed value: [...] if specified as a length, the corresponding
* * absolute length; if specified as a percentage, the specified value;
* * otherwise, 'auto'.

Ben, you nab the bit of info what I was trying to find. Computed value
will be percentage if parent property is specified with a percentage.

See 6.1 for the definitions of specified, computed and used values.

(There is much confusion here when it comes to the DOM getComputedStyle
method. The DOM spec says it means "computed" as per CSS2 but as far as
I remember CSS2 [as opposed to 2.1] didn't distinguish properly between
computed and used. In many browsers getComputedStyle returns used values
for some things but they seem to be moving towards returning more
computed values in newer releases.)

Yes. The IE 8 developer tool will return "50%" in such case and not
the used 300px value.

Thank you very much for your assistance here, Ben. Again, this is very
much appreciated :)

Regards, Gérard