New issue
Advanced search Search tips

Issue 844880 link

Starred by 6 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 3
Type: Bug-Regression



Sign in to add a comment

-webkit-background-clip misbehaves when set to "text" via a CSS Custom Property

Reported by vancamp....@gmail.com, May 19 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Steps to reproduce the problem:
1. Apply a background to a text element.
2. Set -webkit-background-clip to `text` via a CSS Custom Property on that element.

Here is a JSFiddle with a minimal repro of the issue: https://jsfiddle.net/0rxh6nox/1/

What is the expected behavior?
The background should be clipped to the text.

What went wrong?
The text disappears, and only the background is visible.

Did this work before? Yes r514071

Does this work in other browsers? Yes

Chrome version: 66.0.3359.181  Channel: stable
OS Version: 10.0
Flash Version: 

I performed a bisect of this issue. r514071 is the last known good build, and r514075 is the first known bad build.

Here's the commits between those two builds: https://chromium.googlesource.com/chromium/src/+log/314714c736ac5966f73716a66c69321bc5f7fa81..37218b85984625720e0b84bc34e421d6b93254f5

This commit seems to be the most likely culprit: https://chromium.googlesource.com/chromium/src/+/82479f4915c1da488897174bef80b957f060e701
 
minimal-repro.html
700 bytes View Download
screenshot.png
2.4 KB View Download

Comment 1 by f...@opera.com, May 19 2018

Labels: OS-Android OS-Chrome OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Thank you for the report (and bisect!) It does seem quite likely have regressed with the commit you identified. I suspect what happens is that when the variable is resolved we've lost the origin information (because of the aliasing introduced in the implicated commit) and thus the 'text' keyword is not recognized... It would seem this would be an issue for any "non-true" aliases. (I.e where the value syntaxes don't match between the alias-source and the alias-target.)

Comment 2 by phistuck@gmail.com, May 19 2018

#1 - it might be worth to write a test that tries to put a var(--custom-property) in all of the CSS properties and verifies that the value of the --custom-property is reflected in the CSS property. This will prevent any future regression regarding custom property value bring ignored.

Comment 3 by e...@chromium.org, May 29 2018

Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)

Sign in to add a comment