Bug 14429

Summary: floating div after center alignment causes premature linebreak in text
Product: WebKit Reporter: Liam Breck <webkit>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, darin, koivisto, mitz, rniwa, webkit, zalan
Priority: P2    
Version: 523.x (Safari 3)   
Hardware: All   
OS: OS X 10.4   
Attachments:
Description Flags
SAR none

Description Liam Breck 2007-06-27 06:47:47 PDT 
Observe the premature linebreak after "three" in this example.

<html><body style=”width:200”>

<div style="text-align:center">centered section</div><br/>

One two three <div style="background:#ccc; float:right;">div<br/>float</div>four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen.

</body></html>
Comment 1 mitz 2007-06-27 14:08:16 PDT 
Behavior is the same without text-align:center.
Comment 2 Liam Breck 2007-06-27 22:50:31 PDT 
(In reply to comment #1)
> Behavior is the same without text-align:center.

On 522.11, commenting out the centered line yields the correct layout.

Workaround is to use <div style="text-align:left"> immediately after centered div
Comment 3 Ahmad Saleem 2022-06-16 16:53:08 PDT 
Created attachment 460285 [details]
SAR
Comment 4 Ahmad Saleem 2022-06-16 16:53:56 PDT 
(In reply to Ahmad Saleem from comment #3)
> Created attachment 460285 [details]
> SAR

^ APOLOGY - I pressed Enter by mistake.

I changed the test case from Comment 01 into JSFiddle below:

Testcase - https://jsfiddle.net/eLtjzy3n/show

I am unable to reproduce this bug in Safari 15.5 on macOS 12.4. All browsers (Chrome Canary 105 and Firefox Nightly 103) behaves same as Safari 15.5 and match each other. See attached "SAR" Screenshot. Thanks!
Comment 5 zalan 2022-06-16 20:37:05 PDT 
Thank you for testing!