[filter-effects] relative feDisplacementMap on non-square inputs produces a different result in every browser

[thebabydino]

Consider we have a rectangular filter input whose aspect ratio r is .8.

We apply an SVG filter with primitiveUnits set to objectBoundingBox on it. In this filter, we use feFlood to create a displacement map that's 50% alpha black everywhere.

<feFlood flood-opacity='.5'/>

Then we want to move our filter input along either the x (xChannelSelector='R') or y (yChannelSelector='R') axis by its edge length along that axis.

<feDisplacementMap in='SourceGraphic' scale=s yChannelSelector='R'/>

Chrome:

• scale s needs to be 2 for 100% offset along x axis
• scale s needs to be 2/r for 100% offset along y axis

Firefox:

• ¯_(ツ)_/¯ for 100% offset along x axis
• scale needs to be (2√2)/√(1 + r²) for offset along y axis (consistent with diagonal being √2)

Epiphany (on Linux, can't test in actual Safari):

• scale needs to be 2 for 100% offset along x or y axis

Live test.

Which is correct?
¯_(ツ)_/¯
Quite honestly, I'm not the right person to say and for me at this point, any way that works in all browsers the same is better than all doing something different and forcing me to make the input square, then clip it to its desired aspect ratio in order to get the same result cross-browser.

Also, why don't we have separate scale values for the x and y axis?
Scaling the channels of the displacement map is a pain.