1883933 - feDisplacementMap fails with feColorMatrix map input

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Ana Tudor]

Attachment: no_wave_ff_vs_wave_ch.png

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

Steps to reproduce:

1. Create a div with text such that its upper half (including the text, not just the background) maxes out the red channel, while the lower half has a zero value for the red channel (we normally want this pattern to be relative to the font-size, but this is a simplified case). The text maxes out the blue channel.

div {
	position: relative;
	color: #00f;
	isolation: isolate;
	
	&::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(#f00 50%, #000 0);
		mix-blend-mode: screen;
		content: ''
	}
}

2. Create and set an SVG filter that extracts black text out of the blue channel, then the red channel with .5 alpha. This last result is then used as the displacement map for the previously extracted black text.

<svg width="0" height="0">
  <filter id="f2">
    <feColorMatrix values="0 0 0 0 0 
                                            0 0 0 0 0 
                                            0 0 0 0 0 
                                            0 0 1 0 0" result="text"/>
    <feColorMatrix in="SourceGraphic" 
                              values="1 0 0 0   0 
                                            0 0 0 0   0 
                                            0 0 0 0   0
                                            0 0 0  .5 0"/>
    <feDisplacementMap in="text" scale="25" xChannelSelector="R"/>
  </filter>
</svg>

div { filter: url(#f) }

Actual results:

The text isn't displaced in Firefox.

Expected results:

The top and the bottom half of the text should be displaced in opposite directions. This is what happens in Chrome and in Safari.

This method of using a CSS-set gradient extracted via feColorMatrix as a displacement map allows for font-size-relative displacement maps and for controlling the displacement from the CSS by controlling the custom properties the gradient depends on.

Live tests https://codepen.io/thebabydino/pen/RwOWZMv?editors=1100

A couple of other demos using feDisplacementMap this way (broken in Firefox, working in Chrome):

https://codepen.io/thebabydino/full/yLwaNQr/b59a40c3e0e161055a3c4e73c4463633

https://codepen.io/thebabydino/full/NWJNRYX/b880fd4ec42cdfc8c72b22c117bc0788

Comment 1

[Michal Čaplygin [:myf]]

Attachment: testcase 01

Comment 2

[Michal Čaplygin [:myf]]

Attachment: testcase 01 Edge vs Nightly

Comment 3

[Daniel Bodea [:danibodea]]

I can reproduce this issue in the latest versions of the 4 channels in Windows 10 and MacOS 11.
I am assuming that the SVG is the correct component. Please change it to a more appropriate one if incorrect.

Comment 4

[Tom S. (please needinfo tschuster)]

Robert, would you mind taking a look at this?

Comment 5

[Robert Longson [:longsonr]]

I don't even know how to debug filters any more, the filter is played into a draw target recording and then some other process does stuff with it.

Comment 6

[Ana Tudor]

FWIW, it fails with feComponentTransfer too, not just with feColorMatrix, something I discovered this week with this demo - works perfectly fine in Chrome and Safari, no animation happens in Firefox.

I'd venture to guess it fails in any case where the displacement map comes from the SourceGraphic. Getting the displacement map out of the SourceGraphic is a tactic I've used a lot in order to create displacement maps that depend on the font metrics of the font used by the element that has the filter applied. This allows displacing individual letters without wrapping each in an element - demo. I've also used this in order to animate filters when the state of the elements they're applied on changes (hover like in the first example in this comment or like in this demo, focus, click, whatever) or on scroll (using scroll-driven animations, for example the final effects here, which also need support for animation-range to work).

Comment 7

[Tom S. (please needinfo tschuster)]

Ashley, is this something you could debug? I saw you working on Webrender and SVG recently.

Comment 8

[Ashley Hale [:ahale]]

Currently feDisplacementMap is not accelerated, so this is hitting the existing blob rendering path - any animation issues would be on that side of things.

Bug to implement WebRender native support for feDisplacementMap https://bugzilla.mozilla.org/show_bug.cgi?id=1896504

Comment 9

[Robert Longson [:longsonr]]

This is invalid. feDisplacement map does nothing on tainted input. Feel free to raise bugs on other browsers if they aren't implementing tainting correctly.

https://www.w3.org/TR/filter-effects-1/#fedisplacemnentmap-restrictions

and

https://www.w3.org/TR/filter-effects-1/#tainted-filter-primitives