background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text

• Component: CSS
• Status: RESOLVED DUPLICATE

[Jim Ratliff]

Created attachment 373337 [details]
Screenshot: shows desired and actual rendering by WebKit

See http://dabblet.com/gist/062ef5b3cef1557ed994aae73ee6ff8a for reduced test case.

This problem occurs when `background-clip` is set to `text` using a CSS variable. It causes WebKit to ignore a valid `-webkit-background-clip:text` and instead reverts to `background-clip:border-box`.

Note that the following works fine (renders background through clipped text):
  -webkit-background-clip: text;
  background-clip: text;

But the following does not work (computes `background-clip:border-box` rather than `background-clip:text`) in WebKit, Safari, and Chrome (but works fine in Firefox):
  --a: text;  */
  -webkit-background-clip: text;
  background-clip: var(--a);

Apparently, WebKit finds `background-clip: var(--a);` invalid at computed-value time (even though it is equivalent to `background-clip:text`, which works fine) and causes WebKit to throw out the preceding `-webkit-background-clip: text;` statement.

[Alexey Proskuryakov]

*** This bug has been marked as a duplicate of bug 199410 ***