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.
Sorry, I should have included in my STR: 0. Set about:config pref layout.css.background-clip-text.enabled to true.
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".
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → INVALID
Attachment #8741926 - Attachment description: testcase 1 → testcase 1, with broken CSS ("border" as a value) -- nonetheless, Chrome accepts it
Attachment #8741931 - Attachment description: testcase 1 with fixed CSS (s/border/border-box/) -- works correctly in Firefox → testcase 2, with fixed CSS (s/border/border-box/) -- works correctly in both Chrome & Firefox
Filed bugs on Blink & WebKit: https://bugs.chromium.org/p/chromium/issues/detail?id=604023 https://bugs.webkit.org/show_bug.cgi?id=156641
Summary: "-webkit-background-clip: text, border" is rejected by CSS parser → "-webkit-background-clip: border" is rejected by CSS parser
See Also: → https://bugs.webkit.org/show_bug.cgi?id=156641
Summary: "-webkit-background-clip: border" is rejected by CSS parser → "-webkit-background-clip: border" is rejected by CSS parser (but accepted in Chrome & Safari)
You need to log in before you can comment on or make changes to this bug.