[css-backgrounds] Background-clip and text underline

[FremyCompany]

Chrome and Firefox do not provide a way to render underlined text when using background-clip:text.

https://jsfiddle.net/c3p74zuo/3/

The background is painted within (clipped to) the union of the border box and the geometry of the text in the element and its in-flow and floated descendants.
https://drafts.csswg.org/css-backgrounds-4/#background-clip

[upsuper]

The spec text doesn't seem to indicate that underline is included, though...

I guess it is probably fine to add, but I'm somehow concerned about its interaction with text-decor spec in the case that, there is a transparent decoration line provided by some ancestor. Should that decoration line show the background clip? What if the decoration line is far from the text because of, e.g. vertical-align? (Probably anything outside the border box would not be not included?)

[FremyCompany]

By the way, it looks like Chrome and Firefox do include the underline, but apply some transparency discount unlike what they do for text, sounds like an error: https://jsfiddle.net/c3p74zuo/4/

[smfr]

Filed https://bugs.webkit.org/show_bug.cgi?id=179334 on WebKit's buggy behavior.

[css-meeting-bot]

The Working Group just discussed CSS BAckgrounds - background-flip and text-underline, and agreed to the following resolutions:

• RESOLVED: text color has no effect on background-clip
• RESOLVED: text-decorations should be considered as part of the text shape for background-clip purposes

The full IRC log of that discussion

<TabAtkins> Topic: CSS BAckgrounds - background-flip and text-underline
<astearns> github: https://github.com//issues/900
<TabAtkins> fremy: It seems we always consider underlines as part of the text shape
<TabAtkins> fremy: So for background-clip: text, you draw the background only under the text of th eelement. Intention is you set the text to transparent, so the background layer fills in for the text.
<TabAtkins> fremy: In Firefox tho, the color of the text doesn' tmatter for the shape, but the transparency fo the underline is applied as an opacity on the background.
<TabAtkins> fremy: So if people use color:transparent, the underline is too, and the background under the underline becomes transparent.
<fantasai> @___________@
<TabAtkins> fremy: I don't think this makes sense... Edge is not doing this.
<TabAtkins> TabAtkins: This sounds like accidentally over-applying an opacity filter...
<TabAtkins> fremy: I think it would be good to specify the behavior.
<TabAtkins> smfr: Related, the fill and stroke module will someday handle this, right? Should we even specify this, given that it'll be replaced?
<TabAtkins> TabAtkins: So back to François's point - settle that text color shouldn't ahve any effect on background
<TabAtkins> fremy: And that text-decoration should be included as part of the text shape.
<TabAtkins> RESOLVED: text color has no effect on background-clip
<TabAtkins> RESOLVED: text-decorations should be considered as part of the text shape for background-clip purposes
<AmeliaBR> I would definitely expect background-clip: text to include the underline area. Looks like browsers do that even when the underline is from a parent element: https://jsfiddle.net/yLwq77ss/2/

[yisibl]

@smfr It looks like Safari has been fixed?

[smfr]

Safari has not been fixed (the bug is still open).

[yisibl]

I confirm that this is already implemented in Safari TP 202(WebKit PR). The specification needs to be updated.

[yisibl]

@SebastianZ Can you help add the relevant tags?