1322352 - Incorrect word wrapping when using pseudo elements

Status: RESOLVED DUPLICATE of bug 1283222

(Core :: Layout: Text and Fonts, defect, P3)

Description

[alexander]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36

Steps to reproduce:

Used SPAN with absolutely positioned ::before pseudo-element withing text.
See this code example:
http://codepen.io/waterplea/pen/pNVxqE


Actual results:

Firefox started seeing this SPAN as a separate word, i.e. incorrect word wrapping occurred.


Expected results:

This SPAN should be a part of the word it's within, if there are no spaces around it. The issue is only reproducible in Firefox, works fine in IE, Chrome and Safari.

Comment 1

[Astley Chen (inactive)]

TY, looks like the positioned pseudo element will break the work-break rule here. Any idea before we figure out the regression window?

Comment 2

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Jeremy might have some ideas.

Comment 3

[Jeremy Chen ([e-mail])]

Yeah, I did the bisec (mozregression) this afternoon. It turns out that we seem have this problem from the very beginning in 2009-01-01, which is the earliest version in mozregression. Might be the case that we didn't take into consideration while implementing word-break rule or something.


Here's the document that I used for the bisec (which should be exactly the same as listed in comment 0):

data:text/html, <style>div { width: 130px; border: 1px solid black; } span { color: red; } span::before { content: ''; position: absolute; }</style> <div>Firefox has a word<span>wrapping</span> issue</div>

Comment 4

[Astley Chen (inactive)]

Thanks, Jeremy. Let's figure it out further.

Comment 5

[alexander]

Here's another case of similar issue, it is reproducible in Chrome too this time, I'll submit a bug there as well.
http://codepen.io/waterplea/pen/zombor

Comment 6

[Jeremy Chen ([e-mail])]

(In reply to alexander from comment #5)
> Here's another case of similar issue, it is reproducible in Chrome too this
> time, I'll submit a bug there as well.
> http://codepen.io/waterplea/pen/zombor

Looks like this link is no longer available. Could you provide another one? Or, maybe an raw html document (like comment 3) would be great!

Also, could you provide the link to the Chrome bug as well? Thank you.

Comment 7

[alexander]

Hi Jeremy. Here's a bin replicating that codepen that I used for Chrome bug:

http://output.jsbin.com/meyoxagufu/3

And here's that Chrome bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=674097

Comment 8

[Jeremy Chen ([e-mail])]

Busy with stylo, so unassign myself for now.

Comment 9

[Jonathan Kew [:jfkthame]]

This sounds a lot like bug 1283222; I'm going to mark it "depends on" for now. I suspect fixing that bug might be all that's needed here, too.

Comment 10

[Xidorn Quan [:xidorn] UTC+10]

Attachment: reporter's testcase

Comment 11

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 12

[Jonathan Kew [:jfkthame]]

The testcases here do appear to have been fixed by the patch in bug 1283222.