[Webkit-unassigned] [Bug 76707] New: HTML 5 <br/> tag has extra spacing in WebKit browsers

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=76707

           Summary: HTML 5 <br/> tag has extra spacing in WebKit browsers
           Product: WebKit
           Version: 525.x (Safari 3.2)
          Platform: Unspecified
               URL: http://www.ExampleOnly.com/br-tag/
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: RobS.webkit6 at MailScreen.com


Created an attachment (id=123327)
 --> (https://bugs.webkit.org/attachment.cgi?id=123327&action=review)
HTML <br/> tag in Chrome - incorrectly double spaced

When I saw this problem in various forums including some workarounds such as using JavaScript to replace <br/>s with new lines (in white-space: pre styled elements? StackOverflow #7672460) I thought sure I should find this as a bug that has already been reported - am I missing it?

Problem:

In an HTML 5 document, a single <br/> tag is rendered as two <br> tags in Chrome (16.0.912.75) and other WebKit-based browsers.  The Chrome developer tools (br-tag-dev-tools.png) clearly shows two <br> tags where there is only a single <br/> tag in the source (br-tag-view-source.png).  I originally thought that maybe this was being caused by the site's stylesheet document, but I was able to create a version with minimal code that exhibits the same issue.

To recreate:

1. Search for "html br tag" in Google or other search engines.
2. Click on the result for HTML 5 that says "HTML <br/> Tag for Line Breaks in Paragraphs ...".
3. Verify that the outlined example is single spaced, not double spaced.
4. Do "View Source" to verify that there is only one <br/> tag in the source code.
5. If it's double spaced, use developer tools to see if there is one or two <br>s for each <br/> tag in the source code.
6. Try the same thing in other browsers to see the difference.

Original source code:

<div id="br-tag-demo" style="margin-bottom: 1em; border: 3px outset gray; padding: 0.5em; text-align: left">
<p>John & Jane Doe<br/>
123 Second St.<br/>
Riverside, LA 17654</p>
</div>

Result as shown by Chrome developer tools:

<div id="br-tag-demo" style="margin-bottom: 1em; border: 3px outset gray; padding: 0.5em; text-align: left">
<p>John & Jane Doe<br><br>
123 Second St.<br><br>
Riverside, LA 17654</p>
</div>

Attachments:

br-tag-chrome.png - HTML <br/> tag in Chrome - incorrectly double spaced
br-tag-firefox.png - HTML <br/> tag in Firefox - single spaced as expected
br-tag-rockmelt.png - HTML <br/> tag in RockMelt - incorrectly double spaced
br-tag-safari.png - HTML <br/> tag in Safari on Mac - incorrectly double spaced

My minimal code example: http://www.ExampleOnly.com/br-tag/

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.