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

NEW
Unassigned

Status

()

P3
normal
2 years ago
3 months ago

People

(Reporter: eric, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

2 years ago
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.
CJ, looks like you worked on background-clip:text -- perhaps you can take this?
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Depends on: 759568
Ever confirmed: true
Flags: needinfo?(cku)
Product: Firefox → Core
Version: 55 Branch → Trunk

Updated

2 years ago
Assignee: nobody → cku
Flags: needinfo?(cku)
Status: NEW → ASSIGNED
Priority: -- → P3

Updated

11 months ago
Assignee: cku → nobody
Status: ASSIGNED → NEW
You need to log in before you can comment on or make changes to this bug.