1097856 - feImage requires SVG images to have non-percentage width and height attributes

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Xandor Schiefer]

Attachment: blend-svg.svg

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

Steps to reproduce:

User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0

Created a filter which multiplies one image with another.

One image is the SourceGraphic, which is an image element that xlinks an external JPG.

The other is an feImage which xlinks to an external SVG file (just an orange rectangle).

NB: possibly related to bug 598204 (although this has nothing to do with document fragments) and probably not related to bug 455986 (the SVG test case in that bug works just fine for me).

NB: In the attached example I've used mode="multiply" but changing this mode does not affect the result, which is that the filter is not applied.

NB: I also tried this with using the SVG file xlinked in the feImage as base64 data-URI (no difference in result), and using relative, base-relative, and absolute URLs (no difference in result).

NB: When using a PNG image xlinked in the feImage, the expected behaviour works just fine.


Actual results:

Nothing. The filter was not applied.


Expected results:

The filter should have been applied. Works in Google Chrome 38 (current stable version at this time), and Internet Explorer 11 (current stable version at this time).

Comment 1

[Xandor Schiefer]

Attachment: blend-png.svg

When using a PNG xlinked in the feImage instead, it works fine, as this attachment shows.

Comment 2

[Xandor Schiefer]

Correction, the other bugs mentioned should have been as follows:

NB: possibly related to bug 455986 (although this has nothing to do with document fragments) and probably not related to bug 598204 (the SVG test case in that bug works just fine for me).

Comment 3

[Robert Longson [:longsonr]]

Similar to bug 700533. Quite possibly the same underlying reason.

Comment 4

[Robert Longson [:longsonr]]

The testcase is no longer functional because width and height attributes have been added to the referenced image.

Comment 5

[Robert Longson [:longsonr]]

Attachment: referenced image

Comment 6

[Robert Longson [:longsonr]]

Attachment: testcase

Comment 7

[Robert Longson [:longsonr]]

Attachment: Bug 1097856 - use fallback values if width/height cannot be resolved for feImage r=emilio

Comment 8

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=4d6ac20b637f7949a9e1a60c6ba37ae23fa646b4

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/be0bfc7f9065
use fallback values if width/height cannot be resolved for feImage r=emilio

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/43826 for changes under testing/web-platform/tests

Comment 11

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/be0bfc7f9065

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 13

[Robert Longson [:longsonr]]

Release Note Request (optional, but appreciated)
[Why is this notable]:
Removes one of the restrictions on feImage elements that frequently catches people out.
[Affects Firefox for Android]:
Yes
[Suggested wording]:
Previously SVG feImage elements that pointed to SVG content required the SVG document to have a root element that had non-percentage width and height values. Since SVG root elements default to width and height of 100%, people frequently found that feImage didn't work on Firefox and didn't know why. Such content will now fall back to use the default replaced element values of 300px width and 150px height and the feImage will no longer fail to render.
[Links (documentation, blog post, etc)]:
The following Stack Overflow question shows someone being caught out by this restriction.
https://stackoverflow.com/questions/57750604/cross-browser-svg-animation-with-filter-chrome-works-not-firefox-safari

Comment 14

[Dianna Smith [:diannaS]]

Note added to 123 nightly release notes in the Web Platform section.