Bug 167406

Summary:

Ellipsis box is not considered for background clip

Product:

WebKit

Reporter:

Mark Wang <mwang>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, karlcow, ntim, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

WebKit Local Build

Hardware:

All

OS:

Linux

See Also:

https://bugs.webkit.org/show_bug.cgi?id=179334

Attachments:

Description	Flags
It also can be reproduced on Chrome	none
the patch to fix this issue.	none
The test case for the patch	none
rendering in Safari, firefox, chrome	none
test case with more standard properties.	none
rendering in Safari, firefox, chrome	none

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.

Comment 6 Karl Dubost 2022-06-02 22:50:51 PDT

Created attachment 459997 [details]
rendering in Safari, firefox, chrome

every browser does something slightly different.

Comment 7 Radar WebKit Bug Importer 2022-06-02 22:51:22 PDT

<rdar://problem/94331006>

Comment 8 Tim Nguyen (:ntim) 2022-06-02 23:12:34 PDT

Bug 179334 might fix this.

Comment 9 Karl Dubost 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

Comment 10 Karl Dubost 2022-06-08 22:49:34 PDT

Created attachment 460113 [details]
rendering in Safari, firefox, chrome

This is the rendering with the standard properties.

Comment 11 Karl Dubost 2022-06-08 22:53:06 PDT

So as Tim mentioned it might be fixed by Bug 179334