Bug 54368 – Web Inspector: Wrong width displayed if inspecting h1 as block element

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Charlie Saxophone]

Screen capture: http://i.imgur.com/tkGY9.png

See #header h1 CSS width shows 300 pixels and inspected width value for #header h1 in viewport seems to inherit the #header width.

As noted, a trivial issue, but tested this same quirk in firebug and it's inspector read h1 block elements okay.

[Alexander Pavlov (apavlov)]

@cs: can you come up with a publicly accessible test case? Either one on the Web or one attached to this bug.

The values displayed in the tooltip are retrieved from the WebCore, so what you are seeing is effectively a computed width of the h1 element (offsetWidth).

[Charlie Saxophone]

@apavlov

http://2fail4.com/test-case-webkit.html

Just now tested for same quirk on Windows; same result.

[Alexander Pavlov (apavlov)]

@cs: OK, I can see the test case but it is slightly different from the one you are referring to in the screenshot. Are you concerned with the dark-blue area to the right of the black <p> rectangle containing the red text? If so, this is actually the effective right margin displayed in this manner.

If you set the <p> background-color to white, you will see a light-blue box exactly 300x100 px covering the actual <p> element area (offsetWidth x offsetHeight).

[Charlie Saxophone]

http://2fail4.com/test-case2-webkit.html

I see what you mean, but look at this case; I guess I just think it's odd that the helper tag display's an element's parent's width rather than it's set width. i.e. #bd is 500 and p is 300 yet the inspector helper tag reports <element> p <width height> 500x160 rather than 300x160; maybe I just need to brush up on my CSS inheritance but I'm done beating this dead horse.

[Alexander Pavlov (apavlov)]

(In reply to comment #4)
> http://2fail4.com/test-case2-webkit.html
> 
> I see what you mean, but look at this case; I guess I just think it's odd that the helper tag display's an element's parent's width rather than it's set width. i.e. #bd is 500 and p is 300 yet the inspector helper tag reports <element> p <width height> 500x160 rather than 300x160; maybe I just need to brush up on my CSS inheritance but I'm done beating this dead horse.

Charlie, we are definitely running different revisions of WebKit. Please see the attached screenshot for what the tip-of-tree (r78569) renders. Are you running the latest webkit nightly (http://nightly.webkit.org)?

[Alexander Pavlov (apavlov)]

Created attachment 82606 [details]
[IMAGE] Screenshot of what ToT Web Inspector tooltip renders for http://2fail4.com/test-case2-webkit.html

[Charlie Saxophone]

Yeah that looks like the issue; I'm not running the nightly build. Again, I originally tested the issue on Linux (ubuntu meerkat), but is the issue moot if I'm not running the nightly build? Because it looks like the issue has been resolved judging from your screenshot.

[Alexander Pavlov (apavlov)]

(In reply to comment #7)
> Yeah that looks like the issue; I'm not running the nightly build. Again, I originally tested the issue on Linux (ubuntu meerkat), but is the issue moot if I'm not running the nightly build? Because it looks like the issue has been resolved judging from your screenshot.

I just tested it on Lucid Lynx's Chromium daily ppa (WebKit revision 78450), and the dimensions in the tooltip are the same as in my screenshot. So I believe we can close the issue as FIXED.