1415856 - CSS filter property with "404 not found" url() causes invisible content

Status: VERIFIED INVALID

(Core :: Layout, defect)

Description

[Mikko Rantalainen]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171003101344

Steps to reproduce:

1. Open test case at https://jsfiddle.net/cgLmy8vq/
2. Try to select "Super important text" in the result pane.



Actual results:

The text is invisible (and not just text, the whole element in fact). This is caused by not-found response to filter:url(...) property.


Expected results:

Not found or CSP prevented url value for filter property should cause filter property to be ignored. As such, the content should render as no filter property had been set (and the text should be visible).

Minimal test case inline:
<style>div { filter: url(https://jsfiddle.net/not-found); }</style>
<div>Super important text</div>

Comment 1

[Robert Longson [:longsonr]]

All browsers pass the w3c testsuite test which mandates the opposite behaviour https://www.w3.org/Graphics/SVG/Test/20110816/svg/filters-felem-01-b.svg

Comment 2

[Mikko Rantalainen]

There seems to be some misunderstanding about the feature 'filter'. This bug is about CSS property 'filter', the the @filter attribute in SVG spec is totally unrelated thing.

The test you referred to (https://www.w3.org/Graphics/SVG/Test/20110816/svg/filters-felem-01-b.svg) is about SVG filter *attribute*.

The behavior for CSS 'filter' *property* is defined at
http://dev.w3.org/fxtf/filters/#FilterProperty

"<url>
A filter reference to a filter element. For example url(commonfilters.svg#filter). 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."

I agree that if 'filter' attribute of SVG defines non-existant filter then filtered part of said SVG graphics should not be displayed per spec. However, if HTML+CSS combination defines a filter property for an element and the URL refers to unsupported or HTTP 404 filter, it's definitely *not* ok to render the element as invisible. This bug is about the latter case.

Comment 3

[Robert Longson [:longsonr]]

The SVG filter attribute is a CSS mapped attribute, it's the same as the CSS filter property but with a different specificity.

https://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes

We're not going to have CSS mapped attributes and CSS properties work differently.

Comment 4

[Mikko Rantalainen]

I understand that the current implementation automatically prefers the current situation. I hope you realize that your implementation does not follow the CSS spec:

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

"[filter:] <url>
A filter reference to a filter element. For example url(commonfilters.svg#filter). 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."

I understand that it's problematic that 'filter' would work differently for CSS and SVG as currently specified.

However, the way 'filter' is specified for CSS is less problematic with real world because following SVG spec for this causes filtered element to be invisible in case of e.g. network connection issues even though the element content would be available otherwise. I believe following the spec and ignoring the 'filter' property would follow the spirit of CSS much better (that is, CSS is about styling, not about actual content).


If you think that keeping the CSS mapped attributes and CSS properties working identically is the right way to go, I would suggest raising this issue on W3 and allowing Firefox to be spec conforming by changing the CSS spec. I personally would prefer keeping the CSS spec as-is and Firefox following the spec.

(Current spec about this feature is still an editor's draft - no published version exists with <url> value for property 'filter'.)

Comment 5

[Mikko Rantalainen]

Also note that the actual SVG spec does not require this behavior, only the old test case. I raised a bug about this issue at https://github.com/w3c/web-platform-tests/issues/8650

Comment 6

[Mikko Rantalainen]

Does this bug need to be revisited?

The latest W3C Editor's Draft at https://drafts.fxtf.org/filter-effects/#FilterProperty says that

"5. Graphic filters: the filter property

<url>
A filter reference to a filter element. For example url(commonfilters.svg#filter). 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."

Note the part "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."