1265071 - "-webkit-background-clip: border" is rejected by CSS parser (but accepted in Chrome & Safari)

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1, with broken CSS ("border" as a value) -- nonetheless, Chrome accepts it

STR:
 1. Load attached testcase.
 2. (optional) Check browser console. (Ctrl Shift J)

EXPECTED RESULTS:
Text should be visible. (Background is clipped to text)

ACTUAL RESULTS:
Text is not visible (i.e. background is not clipped to text).
Also, this appears in browser console:
>Error in parsing value for '-webkit-background-clip'.  Declaration dropped.

So, it looks like this is purely a parsing error.

My testcase here is reduced from the WebKit blog post about this feature:
 https://webkit.org/blog/164/background-clip-text/

I'm not sure how common this comma-separated style is on the web, but given that it was used in the announcement blog post, I'm expecting some of the web must depend on it.

Comment 1

[Daniel Holbert [:dholbert]]

Sorry, I should have included in my STR:
 0. Set about:config pref layout.css.background-clip-text.enabled to true.

Comment 2

[Daniel Holbert [:dholbert]]

Sorry, turns out this has nothing to do with "text" -- it's just that "border" is an invalid value for this property.  "border-box" is the correct value. If I tweak the testcase to use "border-box", it works correctly.

So, I'm going to resolve this as INVALID and I'll file bugs on WebKit/Blink to remove their stale "border" value.  If it turns out there's web content (beyond this one blog post) that depends on us supporting this value, we can reconsider adding it as a value that aliases "border-box".

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2, with fixed CSS (s/border/border-box/) -- works correctly in both Chrome & Firefox

Comment 4

[Daniel Holbert [:dholbert]]

Filed bugs on Blink & WebKit:
 https://bugs.chromium.org/p/chromium/issues/detail?id=604023
 https://bugs.webkit.org/show_bug.cgi?id=156641