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
Created attachment 299666 [details] It also can be reproduced on Chrome The ellipsis in the first row is not drawn.
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>
Created attachment 299667 [details] the patch to fix this issue. The patch can fix this issue to render the first line correctly.
Comment on attachment 299667 [details] the patch to fix this issue. This patch needs a test case.
Created attachment 299674 [details] The test case for the patch The attachment is the test case for the patch in 299667 attachment.
Created attachment 459997 [details] rendering in Safari, firefox, chrome every browser does something slightly different.
<rdar://problem/94331006>
Bug 179334 might fix this.
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
Created attachment 460113 [details] rendering in Safari, firefox, chrome This is the rendering with the standard properties.
So as Tim mentioned it might be fixed by Bug 179334