RESOLVED FIXED 167406
Ellipsis box is not considered for background clip 
https://bugs.webkit.org/show_bug.cgi?id=167406
Summary Ellipsis box is not considered for background clip
Mark Wang
Reported 2017-01-24 19:21:49 PST
Ellipsis box is not considered for background clip, see the attached test app. As you can see, the ellipsis are not blended against the background gradient like the rest of the text. My environment is: 1/ set top box (Linux, mips) 2/ webkitgtk-2.12.2
Attachments
It also can be reproduced on Chrome (43.19 KB, image/png)
2017-01-24 19:25 PST, Mark Wang 		no flags
Details
the patch to fix this issue. (1.32 KB, patch)
2017-01-24 19:29 PST, Mark Wang 		no flags
DetailsFormatted DiffDiff
The test case for the patch (1.34 KB, text/html)
2017-01-24 20:18 PST, Mark Wang 		no flags
Details
rendering in Safari, firefox, chrome (159.63 KB, image/png)
2022-06-02 22:50 PDT, Karl Dubost 		no flags
Details
test case with more standard properties. (1.59 KB, text/html)
2022-06-08 22:48 PDT, Karl Dubost 		no flags
Details
rendering in Safari, firefox, chrome (158.54 KB, image/png)
2022-06-08 22:49 PDT, Karl Dubost 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Mark Wang
Comment 1 2017-01-24 19:25:40 PST
Created attachment 299666 [details] It also can be reproduced on Chrome The ellipsis in the first row is not drawn.
Mark Wang
Comment 2 2017-01-24 19:27:37 PST
The below is to reproduce this issue. <!DOCTYPE html> <html> <body style='font-size: 80px; background-color: black; color: white; '> <div style='width: 200px; background: -webkit-linear-gradient(left, #0c9966 0%, #e5c105 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'> Ellipsis </div> <div style='width: 200px; background: -webkit-linear-gradient(left, #0c9966 0%, #e5c105 100%); -webkit-background-clip: text; -webkit-text-fill-color: blue; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'> Ellipsis </div> <div style='width: 200px; background: -webkit-linear-gradient(left, #0c9966 0%, #e5c105 100%); -webkit-background-clip: text; -webkit-text-fill-color: rgba(255,0,0,0.5); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'> Ellipsis </div> <div style='width: 200px; background: -webkit-linear-gradient(left, #0c9966 0%, #e5c105 100%); -webkit-background-clip: text; color: rgba(255,255,255,0.2); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'> Ellipsis </div> </body> </html>
Mark Wang
Comment 3 2017-01-24 19:29:08 PST
Created attachment 299667 [details] the patch to fix this issue. The patch can fix this issue to render the first line correctly.
Simon Fraser (smfr)
Comment 4 2017-01-24 19:36:47 PST
Comment on attachment 299667 [details] the patch to fix this issue. This patch needs a test case.
Mark Wang
Comment 5 2017-01-24 20:18:23 PST
Created attachment 299674 [details] The test case for the patch The attachment is the test case for the patch in 299667 attachment.
Karl Dubost
Comment 6 2022-06-02 22:50:51 PDT
Created attachment 459997 [details] rendering in Safari, firefox, chrome every browser does something slightly different.
Radar WebKit Bug Importer
Comment 7 2022-06-02 22:51:22 PDT
<rdar://problem/94331006>
Tim Nguyen (:ntim)
Comment 8 2022-06-02 23:12:34 PDT
Bug 179334 might fix this.
Karl Dubost
Comment 9 2022-06-08 22:48:18 PDT
Created attachment 460112 [details] test case with more standard properties. This removes the -webkit- when it makes sense to use the standard properties. That said, that makes it fail in Chrome because of https://bugs.chromium.org/p/chromium/issues/detail?id=1174390 which has been closed in favor of https://bugs.chromium.org/p/chromium/issues/detail?id=872114
Karl Dubost
Comment 10 2022-06-08 22:49:34 PDT
Created attachment 460113 [details] rendering in Safari, firefox, chrome This is the rendering with the standard properties.
Karl Dubost
Comment 11 2022-06-08 22:53:06 PDT
So as Tim mentioned it might be fixed by Bug 179334
Simon Fraser (smfr)
Comment 12 2024-08-08 21:51:03 PDT
Still reproduces.
Simon Fraser (smfr)
Comment 13 2024-08-09 10:42:01 PDT
Pull request: https://github.com/WebKit/WebKit/pull/31951
Simon Fraser (smfr)
Comment 14 2024-08-09 17:08:41 PDT
*** Bug 266566 has been marked as a duplicate of this bug. ***
EWS
Comment 15 2024-08-09 17:17:29 PDT
Committed 282066@main (6a283f41b053): <https://commits.webkit.org/282066@main> Reviewed commits have been landed. Closing PR #31951 and removing active labels.
Simon Fraser (smfr)
Comment 16 2024-08-21 18:15:46 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/47734
Note You need to log in before you can comment on or make changes to this bug.