1191043 - Support for Filter CSS <image> values

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Khvoinitsky Mikhail [:m_khvoinitsky]]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150702232110

Steps to reproduce:

The draft specification is described here:
https://drafts.fxtf.org/filters/#FilterCSSImageValue

If implemented, you can do like this:
background-image: filter(url("..."), hue-rotate(180deg))

Comment 1

[Robert Longson [:longsonr]]

This is already implemented and has been for some time. What makes you think it is not?

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Robert Longson from comment #1)
> This is already implemented and has been for some time. What makes you think
> it is not?

(Are you sure? Note that this is about a filter() function, not the CSS "filter" property.  I don't see the string "filter(" in any of our reftests, nor any "background*filter" usages aside from separate usages of the "background" property & the "filter" property.)

Comment 3

[Khvoinitsky Mikhail [:m_khvoinitsky]]

(In reply to Daniel Holbert [:dholbert] (out 8/5-8/10) from comment #2)
> (In reply to Robert Longson from comment #1)
> > This is already implemented and has been for some time. What makes you think
> > it is not?
> 
> (Are you sure? Note that this is about a filter() function, not the CSS
> "filter" property.  I don't see the string "filter(" in any of our reftests,
> nor any "background*filter" usages aside from separate usages of the
> "background" property & the "filter" property.)

Right. 
Here is a demo: https://jsfiddle.net/ryejmp9p/2/

Comment 4

[bjorklund.emil]

Some general commentary as a developer:

WebKit has implemented this, and recently unprefixed it in the nightlies. There is also a prefixed implementation in Safari 9/iOS9 Mobile Safari, but sadly it is very broken (as it does not take background-size into account. This is fixed in the WebKit nightlies though).

I would love to see this implemented, and I'm kind of surprised at how ignored it has been as it's been part of the spec for a long time.

Comment 6

[Ana Tudor]

This is a feature that can simplify things in the case when we need to apply an effect to the background, but we don't want the text content to be affected as well.

For example, we might want a grainy gradient card. We can get that with an SVG filter, but if we don't want our element's text content to be affected , then we need to move both the background and the filter declarations on an absolutely positioned element (live demo):

div { /* just the relevant CSS */
  position: relative
}

div::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, red, tan);
  filter: url(#grainy);
  content: '';
}

With filter(), all the code above would be reduced to just one declaration:

div { /* just the relevant CSS */
  background: filter(radial-gradient(circle, red, tan), url(#grainy))
}