Bug 115258

Summary: text-overflow::clip and ::ellipsis render differently, when floating inline element is present.
Product: WebKit Reporter: alan <zalan>
Component: Layout and RenderingAssignee: alan <zalan>
Status: RESOLVED WORKSFORME    
Severity: Major CC: dtrebbien, karlcow, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=115462
Attachments:
Description Flags
text-overflow:clip
none
rendering in safari, firefox, chrome
none
rendering in safari, firefox, chrome with clip
none
test with ellipsis and clip none

alan
Reported 2013-04-26 07:10:02 PDT
<html> <head> <style> div { overflow: hidden; white-space: nowrap; } input { float: right; } </style> </head> <body> <div> <input type="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</div> </body> </html> <div> with 'text-overflow: ellipsis;' renders the ellipsis to the left edge of the floating inline element, while with 'text-overflow:: clip' the text is clipped at the right edge of the containing block, overdrawing the input. 'text-overflow: clip' should respect the floating element.
Attachments
text-overflow:clip (364 bytes, text/html)
2013-04-26 07:10 PDT, alan 		no flags
Details
rendering in safari, firefox, chrome (101.87 KB, image/png)
2022-06-02 21:33 PDT, Karl Dubost 		no flags
Details
rendering in safari, firefox, chrome with clip (90.26 KB, image/png)
2022-06-02 21:35 PDT, Karl Dubost 		no flags
Details
test with ellipsis and clip (816 bytes, text/html)
2022-06-02 21:42 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
alan
Comment 1 2013-04-26 07:10:43 PDT
Created attachment 199830 [details] text-overflow:clip
alan
Comment 2 2013-04-26 07:15:24 PDT
<rdar://problem/13747959>
Karl Dubost
Comment 3 2022-06-02 21:33:58 PDT
Created attachment 459987 [details] rendering in safari, firefox, chrome data:text/html,<!doctype%20html><div%20style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:30ch;"><input%20type="text"%20style="width:5ch;background-color:%20gold;float:right;"%20value="ABCD">012345678901234567890123456789</div>
Karl Dubost
Comment 4 2022-06-02 21:35:17 PDT
Created attachment 459988 [details] rendering in safari, firefox, chrome with clip And this time with clip instead of ellipsis data:text/html,<!doctype%20html><div%20style="text-overflow:clip;overflow:hidden;white-space:nowrap;width:30ch;"><input%20type="text"%20style="width:5ch;background-color:%20gold;float:right;"%20value="ABCD">012345678901234567890123456789</div>
Karl Dubost
Comment 5 2022-06-02 21:42:05 PDT
Created attachment 459990 [details] test with ellipsis and clip
Karl Dubost
Comment 6 2022-06-05 22:10:29 PDT
See comment in https://bugs.webkit.org/show_bug.cgi?id=115462#c2
Note You need to log in before you can comment on or make changes to this bug.