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

REOPENED
Unassigned

Status

()

REOPENED
4 years ago
a year ago

People

(Reporter: karlcow, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [country-fr] [css] [sitewait], URL)

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
+++ 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.
Hmm, good point; I don't know if this should be SVG, or imagelib or filters or... let's start with SVG.
Component: Graphics → SVG
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
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INVALID

Comment 3

4 years ago
(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...
Flags: needinfo?(longsonr)
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.
(Reporter)

Comment 5

4 years ago
(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.
(Reporter)

Comment 6

4 years ago
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.
Status: RESOLVED → REOPENED
Resolution: INVALID → ---

Comment 7

4 years ago
(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.
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
Flags: needinfo?(longsonr)
Note that invalid filter, invalid clip-path, invalid mask etc all work the same way. I.e. Don't draw anything.
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.
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?
Flags: needinfo?(krit)

Comment 12

4 years ago
"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.
Flags: needinfo?(krit)

Comment 13

4 years ago
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.
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.
(Reporter)

Comment 15

3 years ago
Created attachment 8755318 [details]
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.

Updated

2 years ago
See Also: → bug 1287320
See also: bug 1415856
You need to log in before you can comment on or make changes to this bug.