1463457 - Sample text is spilling out of frame when the Font size is increased

Status: NEW

(Core :: DOM: Editor, defect, P3)

Description

[Rares Doghi, Desktop QA]

Attachment: SpillsOutOfFrame.png

[Affected versions]: 
Nightly 62.0a1

[Affected platforms]:
Platforms: Windows 10 x 64, Windows 7 x 32, Mac OS X 10.12 and Ubuntu 16.04 x64.

[Steps to reproduce]:
1. Reach https://www.axis-praxis.org/specimens/amstelvar
2. Increase the Font Size for the Heading to Maximum


[Expected result]:
- The Text should wrap down and remain inside the yellow Box area.

[Actual result]:
- The text will spill out of the box when the user increases the Font size

Please note that this issue only occurs on Firefox, on Google Chrome the Text is Wrapped and will not spill out of the frame.

Please check the attachments.

Comment 1

[Rares Doghi, Desktop QA]

Attachment: Chrome.png

Comment 2

[Rares Doghi, Desktop QA]

Also note that on Firefox this issue occurs with both "layout.css.font-variations.enabled" set to TRUE or FALSE.

Comment 3

[Xidorn Quan [:xidorn] UTC+11]

This is because Chrome sets "word-wrap: break-word;" for contenteditable, while we don't seem to set that. Moving to Editor as I suppose style of contenteditable should be in that component?

Comment 5

[Jonathan Kew [:jfkthame]]

Carrying over from bug 1472641 comment 1:

> See https://readable-email.org/list/www-style/topic/css-text-should-contenteditable-word-wrap-break-by-default for some discussion. General view in that thread seems to be that Chrome shouldn't be doing this.