Bug 199410 - background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text
Summary: background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 199409 (view as bug list)
Depends on:
Blocks:
 
Reported: 2019-07-02 10:36 PDT by Jim Ratliff
Modified: 2020-10-07 15:42 PDT (History)
11 users (show)

See Also:


Attachments
Patch (5.86 KB, patch)
2020-10-06 17:55 PDT, Tyler Wilcock
no flags Details | Formatted Diff | Diff
Patch (7.85 KB, patch)
2020-10-06 23:30 PDT, Tyler Wilcock
no flags Details | Formatted Diff | Diff
Patch (7.82 KB, patch)
2020-10-07 09:11 PDT, Tyler Wilcock
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Jim Ratliff 2019-07-02 10:36:48 PDT
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.
Comment 1 Alexey Proskuryakov 2019-07-03 10:14:45 PDT
*** Bug 199409 has been marked as a duplicate of this bug. ***
Comment 2 Radar WebKit Bug Importer 2019-07-03 10:15:18 PDT
<rdar://problem/52595653>
Comment 3 Tyler Wilcock 2020-10-06 17:55:04 PDT
Created attachment 410721 [details]
Patch
Comment 4 Tyler Wilcock 2020-10-06 17:59:38 PDT
With this patch, all permutations of:

 * Properties `-webkit-background-clip` and `background-clip`
 * Values `-webkit-text` and `text`
 * Values as CSS variables

clip correctly.
Comment 5 Tyler Wilcock 2020-10-06 23:30:06 PDT
Created attachment 410735 [details]
Patch
Comment 6 Darin Adler 2020-10-07 08:11:04 PDT
Comment on attachment 410735 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=410735&action=review

> Source/WebCore/css/parser/CSSPropertyParser.cpp:3164
> +    if (RefPtr<CSSPrimitiveValue> value = consumeBackgroundBox(range))

auto
Comment 7 Darin Adler 2020-10-07 08:12:01 PDT
Comment on attachment 410735 [details]
Patch

Ideally we would also add a test about the integration with vat that was originally reported.
Comment 8 Darin Adler 2020-10-07 08:13:43 PDT
(In reply to Darin Adler from comment #7)
> Ideally we would also add a test about the integration with vat that was
> originally reported.

Never mind. That doesn’t make sense. The original report was just confused about cause I think.
Comment 9 Tyler Wilcock 2020-10-07 09:11:17 PDT
Created attachment 410753 [details]
Patch
Comment 10 Tyler Wilcock 2020-10-07 09:13:49 PDT
(In reply to Darin Adler from comment #6)
> Comment on attachment 410735 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=410735&action=review
> 
> > Source/WebCore/css/parser/CSSPropertyParser.cpp:3164
> > +    if (RefPtr<CSSPrimitiveValue> value = consumeBackgroundBox(range))
> 
> auto

Someday I'll get this right :)

Thanks Darin.  Updated the patch — I'll mark it cq? once the tests are green again.
Comment 11 EWS 2020-10-07 15:42:26 PDT
Committed r268158: <https://trac.webkit.org/changeset/268158>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 410753 [details].