1472641 - Changing size for different fonts gets out from the textbox

Status: RESOLVED DUPLICATE of bug 1463457

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

Description

[Maria Berlinger [:mberlinger], Services QA]

Attachment: screencast-showing the issue

[Affected versions]:
- latest Nightly 63.0a1 (2018-06-26)
- Beta 62.0b4 (BuildId 20180628175621)

[Affected platforms]:
- Windows 10 64bit
- macOS 10.13
- Ubuntu 16.04 64bit

[Steps to reproduce]:
1. Launch Firefox.
2. Open the following link https://www.axis-praxis.org/specimens/amstelvar.
3. Choose different types of fonts by opening the drop-down located in the right corner.

[Expected result]:
- All selected fonts are correctly displayed (Please compare with Chrome).

[Actual result]:
- When changing the font size for some font types (e.g. Winner Regular, dT Jakob variable Concept Regular, Adobe Variable Font Prototype) the font gets out from the textbox.

[Regression range]:
- This is not a regression, I was able to reproduce this issue on Nightly 61.01 (2018-03-12) as well when this feature first landed. 

[Additional notes]:
- see the attached screencast
- no repro on Safari, Chrome and Edge

Comment 1

[Jonathan Kew [:jfkthame]]

This is not actually a variable fonts issue, it's just about the text overflowing the box when the font size is made sufficiently large. Chrome behaves differently because of a known interop issue: it automatically adds word-wrap: break-word to any element with the contenteditable=true attribute.

If that were added to the contenteditable element in Firefox, we'd wrap the text like Chrome does.

Minimal example:

    data:text/html,<div style="width:5em;background:silver">supercalifragilisticexpialidocious

will not wrap the text in either Firefox or Chrome; whereas:

    data:text/html,<div style="width:5em;background:silver" contenteditable>supercalifragilisticexpialidocious

does not wrap in Firefox, but does wrap in Chrome; and finally,

    data:text/html,<div style="width:5em;background:silver;word-wrap:break-word">supercalifragilisticexpialidocious

wraps in both (regardless of the presence/absence of contenteditable).

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.

(:sylvestre, I cleared your tracking flags, given this isn't actually a variable-fonts-related bug.)