Bug 29720 - Inspecting a <p> beneath a <dl> includes the <dl> in the highlighted block
Summary: Inspecting a <p> beneath a <dl> includes the <dl> in the highlighted block
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2009-09-24 11:09 PDT by Ryan McPherson
Modified: 2014-12-12 14:11 PST (History)
1 user (show)

See Also:

test files with <p> and <dl> elements (85.67 KB, application/zip)
2009-09-24 11:09 PDT, Ryan McPherson
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ryan McPherson 2009-09-24 11:09:48 PDT
Created attachment 40073 [details]
test files with <p> and <dl> elements

Problem Description: The Inspect feature incorrectly includes a definition list that precedes a paragraph.

Steps to Reproduce:
1. Open the background.html file in WebKit.
2. Enable Web Inspector and click the magnifying glass icon
3. Hover the mouse pointer over a paragraph that follows a definition list, e.g., the paragraph immediately preceding the "background-color" heading. 

Actual Result: Both the paragraph and the preceding definition list are highlighted, incorrectly showing the top margin of the paragraph above the definition list.

Expected Result: The definition list should not be included.

Note: Firebug gets it wrong too.
Comment 1 Patrick Mueller 2009-10-02 10:46:00 PDT
Reproduce-able with the test case - thanks!

More oddities.

- selecting a <dl> element only selects the first definition
- selecting a <dl> element, looking at the metrics, shows height=0
- selecting a <p> element, looking at the metrics, seems to show a height that also includes the <dl>

So, in some sense, the metrics and selected elements seem to be pretty close to each other, despite being wrong.

Now, rename the reference.css file included to x-reference.css and reload.

voila!  everything seems to work as expected!

The .css doesn't have any really weird stuff in it, like <p>'s and <dl>'s with crazy settings for height/top/bottom/etc.  However, the <dt> and <dd> are both assigned a float: left.  Which is definitely odd.  

Rename the .css file back to reference.css, but change float:left for dd and dt to x-float (so they will be ignored).  Reload.  

voila! everything seems to work as expected!

I think what's happening is the <p> is getting the height of the dt/dd's, because they are floating and it's the next thing in line to be formatted.

At this point, I'm willing to declare - WORKSFORME
Comment 2 Timothy Hatcher 2009-12-04 10:18:40 PST
There are bugs here. The tall height of the <p> and the 0 height of the <dl>. This test case can be reduced for clarity.
Comment 3 Brian Burg 2014-12-12 14:11:08 PST
Closing as invalid, as this bug pertains to the old inspector UI and/or its tests.
Please file a new bug (https://www.webkit.org/new-inspector-bug) if the bug/feature/issue is still relevant to WebKit trunk.