Bug 183726 – Initial-Letter can push the rest of the line of text outside of its bounding box

• Component: CSS
• Status: NEW

[John Beales]

Created attachment 336019 [details]
Demo of Initial-Letter float bug.

If there's a floated block, immediately followed by a non-floated block, and the non-floated block has a large initial-letter, (2 or 3 is enough), the first line of text is pushed to the right, (in left-to-right languages), and the last word doesn't always wrap properly, leaving the end of the line of text hanging out of the right side of the box.

In cases where the text with initial-letter set is the width of the browser, a horizontal scrollbar appears on the document.

Tested on:

- Safari on iOS 11.2.6
- Safari 11.0.3 (13604.5.6) on MacOS 10.13.3
- Safari Technology Preview Release 51 (Safari 11.2, WebKit 13606.1.6) on MacOS 10.13.3
- Webkit Build r229696

Demo: http://johnbeales.com/demos/safari/floatcap.html (Identical to the attached HTML file).

In the demo you may have to change the width of the browser window to see it in action. As you change the width of the window, you should see the last word of the bold line of text start to stick out of its box, (and trigger a horizontal scrollbar), before it wraps.

[Brent Fulgham]

None of the major browsers seem to do well with this test case.

[Radar WebKit Bug Importer]

<rdar://problem/97092958>