1105145 - When a CSS filter URL fails on an img element, the src image is not displayed

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[Karl Dubost💡 :karlcow]

+++ This bug was initially created as a clone of Bug #1067252 +++

This might be the wrong component. 

It's a very specific issue about data: URI for images with SVG format on a CSS filter applied to an img element.

See for the STR https://bugzilla.mozilla.org/show_bug.cgi?id=1067252#c13

Might need a test case to reproduce the issue.
Basically because the data:image/svg+xml;utf8,… is improper the filter is not applied but still replaces the original image with a black square.

There might be other parameters.

Comment 1

[Milan Sreckovic [:milan] (needinfo for best results)]

Hmm, good point; I don't know if this should be SVG, or imagelib or filters or... let's start with SVG.

Comment 2

[Robert Longson [:longsonr]]

That's what is supposed to happen per the SVG testsuite i.e. http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filters-felem-01-b.html

Comment 3

[kalviskajaks]

(In reply to Robert Longson from comment #2)
> That's what is supposed to happen per the SVG testsuite i.e.
> http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/
> filters-felem-01-b.html

I did feed the CORRUPT CSS rule firefox gets served to chrome. Chrome not even showed the thumbnails like IE does, but even blurred the images correctly without blacking them out. And chrome passes your SVG testsuite correctly too. Turns out one doesn't rule out the other...

Comment 4

[Cameron McCormack (:heycam)]

http://dev.w3.org/fxtf/filters/#FilterProperty says:

  If the filter references a non-existent object or the referenced object is not a filter element, then the
  whole filter chain is ignored. No filter is applied to the object.

Comment 5

[Karl Dubost💡 :karlcow]

(In reply to Robert Longson from comment #2)
> That's what is supposed to happen per the SVG testsuite i.e.
> http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/
> filters-felem-01-b.html

Robert the issue here is that we have different behaviors in between different browsers. That's the issue to solve. The comment of the user is not stupid, aka to fallback on the src and shows the content of the image instead of the black square.

Comment 6

[Karl Dubost💡 :karlcow]

Could we reopen this according to the comment #4 by Cameron. "No filter is applied to the object." -> then show the "img src" if I interpret correctly.

Comment 7

[kalviskajaks]

(In reply to Cameron McCormack (:heycam) from comment #4)
> http://dev.w3.org/fxtf/filters/#FilterProperty says:
> 
>   If the filter references a non-existent object or the referenced object is
> not a filter element, then the
>   whole filter chain is ignored. No filter is applied to the object.

So as far as i understand this the standard doesnt imply "if bad filter => make image black". Standard says "if bad filter => ignore filter". So IE is actually the one doing it correctly => displaying the original image without any filters applied.

Comment 8

[Robert Longson [:longsonr]]

The CSS rule in the other bug has a -webkit-filter which chrome uses, so I don't really see the relevance of comment 3.

As to comment 4 I've complained about that being inconsistent with the SVG testsuite already and suggested keep to the status quo: http://lists.w3.org/Archives/Public/www-svg/2014Nov/0040.html

Comment 9

[Robert Longson [:longsonr]]

Note that invalid filter, invalid clip-path, invalid mask etc all work the same way. I.e. Don't draw anything.

Comment 10

[Robert Longson [:longsonr]]

I remain opposed to this change without the SVG specification having consistent statements about all cases in comment 9 AND the testsuite test being changed.

Comment 11

[Cameron McCormack (:heycam)]

FWIW clip-path does behave this way:

  http://dev.w3.org/fxtf/css-masking-1/#the-clip-path

but mask-image (the longhand property that gets the url() value when referencing an SVG <mask>) does not:

  http://dev.w3.org/fxtf/css-masking-1/#propdef-mask-image

I'd prefer masks to operate the same way too.  Dirk, what's the reason for mask-image to behave like this?

Comment 12

[Dirk Schulze]

"A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an mask element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black."

Transparent black causes the element to disappear.

Comment 13

[Dirk Schulze]

To the original question: What happens if the filter URL is invalid? This was discussed in the SVG WG. Most members felt like the object should still get displayed. So I changed the spec. Personally I do not have a strong opinion either way. On HTML, WebKit and Blink behave according to the spec. In all other cases, the object disappears.

Comment 14

[Cameron McCormack (:heycam)]

Is there a reason for making mask disable rendering when the reference is invalid?  I agree with Robert that invalid clip-path/filter/mask should behave the same.  And I think the "ignore the entire clip-path/filter/mask when invalid and still render the element" behaviour is better.

Comment 15

[Karl Dubost💡 :karlcow]

Attachment: svg-filter-fail.png

I have the feeling this is another instance of this bug
https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/#live-demo-svg-filter

In this article the SVG code has been forgotten and so the image is not displayed.

Attached the screenshot in case they fix it.

And the markup:

```html
<style>.svg-gray{max-width:500px;min-height:250px;display:block;background:url('https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2016/02/01-bird-preview-opt.jpg');background-repeat:no-repeat;-webkit-filter:url(#grayscale-filter);filter:url(#grayscale-filter);}</style>
<div class="svg-gray"></div>
```

(SVG code is missing)

aka

```
<svg>
  <filter id="grayscale-filter">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>
```


On Safari, the filter is not applied but the image still appears.

Comment 16

[u459114]

https://github.com/w3c/csswg-drafts/issues/997

Comment 17

[Mikko Rantalainen]

See also: bug 1415856

Comment 18

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 19

[Karl Dubost💡 :karlcow]

Just to note that there is a resolution here.
https://github.com/w3c/fxtf-drafts/issues/130

Comment 20

[Robert Longson [:longsonr]]

http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filters-felem-01-b.html now shows red, same as Chrome.