Bug 12689

Summary: <wbr> :before/:after content causes line break
Product: WebKit Reporter: Matt Lilek <dev+webkit>
Component: Layout and RenderingAssignee: Darin Adler <darin>
Status: RESOLVED FIXED    
Severity: Normal CC: mitz
Priority: P2 Keywords: HasReduction
Version: 420+   
Hardware: Mac   
OS: OS X 10.4   
URL: http://facebook.com
Attachments:
Description Flags
Testcase
none
Screenshot (WebKit)
none
Screenshot (Firefox) none

Matt Lilek
Reported 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.
Attachments
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
View All Add attachment proposed patch, testcase, etc.
Matt Lilek
Comment 1 2007-02-07 19:49:19 PST
Created attachment 13035 [details] Testcase
Matt Lilek
Comment 2 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?
Maciej Stachowiak
Comment 3 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.
Matt Lilek
Comment 4 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.
Matt Lilek
Comment 5 2007-02-07 21:05:25 PST
Created attachment 13042 [details] Screenshot (Firefox)
Matt Lilek
Comment 6 2007-02-07 21:21:09 PST
Bumping to P2 after talking about it on IRC with Maciej.
Darin Adler
Comment 7 2007-05-09 18:05:08 PDT
The patch attached to bug 7452 fixes this one as well.
Darin Adler
Comment 8 2007-05-11 09:11:40 PDT
Committed revision 21405.
Note You need to log in before you can comment on or make changes to this bug.