Bug 183726 - Initial-Letter can push the rest of the line of text outside of its bounding box
Summary: Initial-Letter can push the rest of the line of text outside of its bounding box
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Macintosh macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-03-17 16:51 PDT by John Beales
Modified: 2018-03-18 15:50 PDT (History)
3 users (show)

See Also:


Attachments
Demo of Initial-Letter float bug. (3.55 KB, text/html)
2018-03-17 16:51 PDT, John Beales
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description John Beales 2018-03-17 16:51:47 PDT
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.