Bug 114303

Summary: feColorMatrix filter renders poorly via CSS
Product: WebKit Reporter: Mike Sierra <letmespellitoutforyou>
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: bfulgham, dino, krit, lveith, pgr, simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
URL: http://letmespellitoutforyou.com/samples/svg_inlineFilters.html
Bug Depends on:    
Bug Blocks: 68469    
Attachments:
Description Flags
a color matrix filter, as it appears via CSS filter:url(file.svg#filterID)
none
same color matrix filter viewed from within SVG file
none
Same feColorMatrix applied via SVG or CSS, different results
none
Same feColorMatrix applied via SVG or CSS, different results none

Mike Sierra
Reported 2013-04-09 12:46:20 PDT
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.
Attachments
a color matrix filter, as it appears via CSS filter:url(file.svg#filterID) (672.54 KB, image/png)
2013-04-09 12:46 PDT, Mike Sierra 		no flags
Details
same color matrix filter viewed from within SVG file (1.18 MB, image/png)
2013-04-09 12:47 PDT, Mike Sierra 		no flags
Details
Same feColorMatrix applied via SVG or CSS, different results (713 bytes, text/html)
2013-06-15 03:43 PDT, Pierre 		no flags
Details
Same feColorMatrix applied via SVG or CSS, different results (731 bytes, text/html)
2013-06-15 03:57 PDT, Pierre 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Mike Sierra
Comment 1 2013-04-09 12:47:26 PDT
Created attachment 197162 [details] same color matrix filter viewed from within SVG file
Pierre
Comment 2 2013-06-15 03:43:31 PDT
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
Comment 3 2013-06-15 03:57:10 PDT
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
Comment 4 2013-06-15 04:04:44 PDT
I'm not using Nightly. I'm Chromium Version 27.0.1453.110 on Ubuntu 12.04
Lutz
Comment 5 2014-09-26 07:21:40 PDT
(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
Comment 6 2014-09-26 07:23:57 PDT
(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)
Comment 7 2018-01-25 16:48:00 PST
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
Comment 8 2022-07-13 14:33:54 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.