1368174 - background-clip: text clips to all foreground, including borders

Status: NEW

(Core :: Layout, defect, P3)

Description

[Eric A. Meyer]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:55.0) Gecko/20100101 Firefox/55.0
Build ID: 20170523030206

Steps to reproduce:

1. Defined a background and visible border on an element.
2. Applied 'background-clip: text' to the element.
3. Applied 'color: transparent' to the element.

See http://meyerweb.com/eric/css/tests/firefox/background-clip-text-borders.html for a testcase using a repeating gradient background to make the problem more clear.


Actual results:

The background was blended with the borders in addition to the element text, making them visible if their color is 'transparent' and blending them with the background if their color is semi-opaque.


Expected results:

The background should be clipped to only the text, not the entire foreground.  See https://drafts.csswg.org/css-backgrounds-4/#background-clip for the definition of 'text'.

Accordingly, when clipping the background to the text, the borders should not blend with the background of the element, but with the backdrop of the element.

Chrome does the expected thing, albeit with '-webkit-background-clip' instead of unprefixed 'background-clip', which Chrome apparently has yet to support.  See above testcase, which uses both 'webkit-background-clip' and 'background-clip' for ease of comparison.

Comment 1

[Daniel Holbert [:dholbert]]

CJ, looks like you worked on background-clip:text -- perhaps you can take this?

Comment 2

[Michal Čaplygin [:myf]]

Attachment: Testcase 01 (Interactive, Ghost dashed borders)

• This bug currently exhibits itself at MDN background-clip page's [1] interactive example [2]
• On top of strangeness of background-image shown under transparent dashed borders those "ghost text" borders sometimes do not match the "real" border dashes, as if they wrapped box with slightly different dimensions.

Attaching minimalistic interactive testcase.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
[2] https://interactive-examples.mdn.mozilla.net/pages/css/background-clip.html

Comment 3

[Michal Čaplygin [:myf]]

Attachment: Screenshot of Testcase 01 in Firefox 92.0b6, Windows

Comment 4

[Michal Čaplygin [:myf]]

Attachment: Testcase 01.1 (Interactive, Ghost dashed borders)

(Prefixes for WK/Blink in testcase)

Comment 5

[Michal Čaplygin [:myf]]

Attachment: screenshot of Testcase 01.1 in Edge 93.0.961.24

Comment 6

[Clement Cherlin]

(In reply to Michal Čaplygin [:myf] from comment #2)

Created attachment 9237240 [details]
Testcase 01 (Interactive, Ghost dashed borders)

• This bug currently exhibits itself at MDN background-clip page's [1] interactive example [2]
• On top of strangeness of background-image shown under transparent dashed borders those "ghost text" borders sometimes do not match the "real" border dashes, as if they wrapped box with slightly different dimensions.

Attaching minimalistic interactive testcase.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
[2] https://interactive-examples.mdn.mozilla.net/pages/css/background-clip.html

The same problem of ghost borders occurs with dotted as well as dashed. Ghost dots are visible on MDN [1] in the example with text "The background is clipped to the foreground text."