Bug 114303 – feColorMatrix filter renders poorly via CSS

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Mike Sierra]

Created attachment 197161 [details]
a color matrix filter, as it appears via CSS filter:url(file.svg#filterID)

* Go to URL
* choose the "filter_cmx.svg#dusk" option. 
* Compare with this page: http://letmespellitoutforyou.com/samples/svg/filter_cmx.svg

The reference the same "dusk" filter. Via CSS it appears with only red values. Viewed directly in SVG it appears with more green and blue.

[Mike Sierra]

Created attachment 197162 [details]
same color matrix filter viewed from within SVG file

[Pierre]

Created attachment 204765 [details]
Same feColorMatrix applied via SVG or CSS, different results

Filter of the SEPIA kind, very simple.
Watch the differences.  SVG is correct.

[Pierre]

Created attachment 204766 [details]
 Same feColorMatrix applied via SVG or CSS, different results

Filter of the SEPIA kind, very simple.
Watch the differences.  SVG is correct.

Also, you can view this attachment on Moz/Firefox.
They do it the right way!

[Pierre]

I'm not using Nightly.
I'm Chromium Version 27.0.1453.110 on Ubuntu 12.04

[Lutz]

(In reply to comment #3)
> Created an attachment (id=204766) [details]
>  Same feColorMatrix applied via SVG or CSS, different results
> 
> Filter of the SEPIA kind, very simple.
> Watch the differences.  SVG is correct.
> 
> Also, you can view this attachment on Moz/Firefox.
> They do it the right way!

It helps when "color-interpolation" and "color-interpolation-filters" is not set auto(-matic),
it must set to the same value "sRGB" (or otherwise both to same value "linearRGB").

Possible values for svg-attribute "color-interpolation" and "color-interpolation-filters":  auto | sRGB | linearRGB | inherit
- Example1: <svg><def><filter color-interpolation="sRGB" color-interpolation-filters="sRGB">....</filter></def></svg>
- Example2: <svg color-interpolation="sRGB" color-interpolation-filters="sRGB"><def><filter>....</filter></def></svg>

Possible values for css-style "color-interpolation" and "color-interpolation-filters":  auto | srgb | linearrgb | inherit
Example:  <style> * { color-interpolation: srgb; color-interpolation-filters: srgb; } </style>

Maybe Definition shows something like this, before both parameters set to same value.
----- HTML/SVG-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
----- HTML/SVG/filter-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
----- HTML/SVG/image-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
----- HTML/img-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;

[Lutz]

(In reply to comment #3)
> Created an attachment (id=204766) [details]
>  Same feColorMatrix applied via SVG or CSS, different results
> 
> Filter of the SEPIA kind, very simple.
> Watch the differences.  SVG is correct.
> 
> Also, you can view this attachment on Moz/Firefox.
> They do it the right way!

It helps when "color-interpolation" and "color-interpolation-filters" is not set auto(-matic),
it must set to the same value "sRGB" (or otherwise both to same value "linearRGB").

Possible values for svg-attribute "color-interpolation" and "color-interpolation-filters":  auto | sRGB | linearRGB | inherit
- Example1: <svg><def><filter color-interpolation="sRGB" color-interpolation-filters="sRGB">....</filter></def></svg>
- Example2: <svg color-interpolation="sRGB" color-interpolation-filters="sRGB"><def><filter>....</filter></def></svg>

Possible values for css-style "color-interpolation" and "color-interpolation-filters":  auto | srgb | linearrgb | inherit
Example:  <style> * { color-interpolation: srgb; color-interpolation-filters: srgb; } </style>

Maybe Definition shows something like this, before both parameters set to same value.
----- HTML/SVG-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
----- HTML/SVG/filter-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
----- HTML/SVG/image-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
----- HTML/img-Element -------
color-interpolation: srgb;
color-interpolation-filters: linearrgb;

[Simon Fraser (smfr)]

None of the filters on http://letmespellitoutforyou.com/samples/svg_inlineFilters.html render in Safari.

This is probably related to bug 180565 and related.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.