Bug 12689 - <wbr> :before/:after content causes line break
Summary: <wbr> :before/:after content causes line break
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 420+
Hardware: Mac OS X 10.4
: P2 Normal
Assignee: Darin Adler
URL: http://facebook.com
Keywords: HasReduction
Depends on:
Reported: 2007-02-07 19:48 PST by Matt Lilek
Modified: 2007-05-11 09:11 PDT (History)
1 user (show)

See Also:

Testcase (467 bytes, text/html)
2007-02-07 19:49 PST, Matt Lilek
no flags Details
Screenshot (WebKit) (21.46 KB, image/png)
2007-02-07 21:04 PST, Matt Lilek
no flags Details
Screenshot (Firefox) (17.48 KB, image/png)
2007-02-07 21:05 PST, Matt Lilek
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Lilek 2007-02-07 19:48:46 PST
A <wbr> tag that has dynamic css content in a :before/:after causes a line break. If you load the testcase, you shouldn't see any cyan.  Safari 2.0.4 and Firefox behave properly.  This is visible in Facebook's status faux drop down menu.
Comment 1 Matt Lilek 2007-02-07 19:49:19 PST
Created attachment 13035 [details]
Comment 2 Matt Lilek 2007-02-07 19:59:23 PST
You can see this on Facebook by going to your profile; under the "Status" content box thingy; click edit, then click the arrow on the right to reveal the fake menu drop down.  At the very bottom, between the last item and the bottom border should be empty space.  If there isn't any space, change your status to something long and without spaces like "abcdefghijklmnopqrstuvwxyz".  That seems to be what causes it.

Doubt many people have statuses like that so perhaps this can probably be bumped to P2?
Comment 3 Maciej Stachowiak 2007-02-07 20:53:23 PST
I reproduced the same thing in shipping Safari so I think this is not a regression. Also, the symptom is a minor cosmetic issue and hard to run into. Lowering to P3.
Comment 4 Matt Lilek 2007-02-07 21:04:41 PST
Created attachment 13041 [details]
Screenshot (WebKit)

Here's some screenshots to hopefully make it a bit more clear.  The top item in the menu is the cause - its "abcdefghijklmnopqrstuvwxyz" with a <wbr> stuck in the middle.  Firefox has implemented <wbr> and the word breaks in two.  We don't, but it's not really that big of an issue, just a bit of chopped off text.

The issue is that it causes an extra line break to be added to the container - the blank space between the last item in the list and the bottom border you can see through.  This doesn't happen in Safari 2.0.4 or Firefox.
Comment 5 Matt Lilek 2007-02-07 21:05:25 PST
Created attachment 13042 [details]
Screenshot (Firefox)
Comment 6 Matt Lilek 2007-02-07 21:21:09 PST
Bumping to P2 after talking about it on IRC with Maciej.
Comment 7 Darin Adler 2007-05-09 18:05:08 PDT
The patch attached to bug 7452 fixes this one as well.
Comment 8 Darin Adler 2007-05-11 09:11:40 PDT
Committed revision 21405.