Bug 104167 – Web Inspector: used values are displaying results that are unexpected

• Status: RESOLVED
• Resolution: INVALID
• Component: Web Inspector (Deprecated)

Apologies for my question, but I have just stumbled over a case number #73334, as I have been experiencing an issue that I was not expecting. The thread and the one it stemmed from, has lead me to believe this concerns my issue. However I have noticed this bug has been marked resolved which is where my confusion is stemming from.

After reading the W3C specs I was expecting a block level value that was over-constrained to return to me a negative value, in regards to the right-margin.

However it's returning the value I supplied it via CSS.



in the following example:

http://jsfiddle.net/fezec/EVuHR/1/

The provided url makes use of a DIV container and a PARAGRAPH child element.
The DIV width is set to 500px and the PARAGRAPH is given 100px MARGIN and is set to be 400px in WIDTH.  The expected result is that the right margin would become 0px, as this is the only way the Block Element formula is satisfied.

Yet when viewing the calculated and layout within Firebug, the margin right displays the styled value, NOT the used value.


Am I missing something? Have I learned enough information to merely hang myself with it?

[Alexander Pavlov (apavlov)]

(In reply to comment #0)
> The provided url makes use of a DIV container and a PARAGRAPH child element.
> The DIV width is set to 500px and the PARAGRAPH is given 100px MARGIN and is set to be 400px in WIDTH.  The expected result is that the right margin would become 0px, as this is the only way the Block Element formula is satisfied.

You are correct. The USED value of 'margin-right' would become 0px, which actually happens.

> Yet when viewing the calculated and layout within Firebug, the margin right displays the styled value, NOT the used value.

It is not quite clear to me why you are referencing the Firebug output in this context, but let's turn back to the Web Inspector (oh, and there is no notion of "styled" value. The "Computed Style" pane displays... well... the values from the computed style).

Let me quote the relevant paragraph from http://www.w3.org/TR/CSS21/visudet.html#blockwidth (item 10.3.3) first:

"If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead."

Please note the phrase "...one of the used values will have to be different from its computed value." So, what you are actually observing is an exact result of this paragraph's requirement: the computed values for all margins are 100px, BUT "the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true". Thus, the 'margin-right' USED value is 0px, as opposed to its COMPUTED value of 100px.

Does this sound reasonable?

(In reply to comment #1)
> (In reply to comment #0)

It does. I thank you for taking the time to discuss this. My apologies for the Firebug reference, I had meant Web Inspector but typed otherwise.

What you say makes complete sense, but would it not be advantageous for developers to be able to view the used values in addition to the computed values?

For the many developers who are unaware of Margin-Collapse or the overriding values that occur behind the scenes, it can be a bit difficult to understanding why layout appears to be slightly/extremely different than one had expected.

[Brian Burg]

The inspector doesn't show used values from running layout, except as reflected by queries like offsetWidth. This would be a significant project, and should be filed as a feature not a bug.