Bug 167406 - Ellipsis box is not considered for background clip
Summary: Ellipsis box is not considered for background clip
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Local Build
Hardware: All Linux
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-01-24 19:21 PST by Mark Wang
Modified: 2017-01-24 20:18 PST (History)
3 users (show)

See Also:


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 Details | Formatted Diff | Diff
The test case for the patch (1.34 KB, text/html)
2017-01-24 20:18 PST, Mark Wang
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Mark Wang 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
Comment 1 Mark Wang 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.
Comment 2 Mark Wang 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>
Comment 3 Mark Wang 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.
Comment 4 Simon Fraser (smfr) 2017-01-24 19:36:47 PST
Comment on attachment 299667 [details]
the patch to fix this issue.

This patch needs a test case.
Comment 5 Mark Wang 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.