SVG: apply feDisplacementMap's scale once

Author: matmen

CHANGELOG.md

@@ -37,6 +37,9 @@
     `Animation.decode()` (which reported every image as too large); fractional loop counts in `new Animation()`.
 - `Animation.decode()` reports invalid `threads` and `maxPixels` as such, not as damaged image data.
 - `Image.decode()` refuses GIFs with a hint at `Animation.decode()` instead of "Unsupported image type".
+- SVG `feDisplacementMap` applies its `scale` once, like the specification and browsers (it multiplied by it twice, like
+  resvg, so at typical scales the whole input was displaced out of the filter region and disappeared), and reads the
+  map's colors unpremultiplied.
 
 ## 3.13.2
 

src/render/filter.ts

@@ -409,14 +409,19 @@ function apply(kind: Kind, linear: boolean, ts: Matrix, region: Rect, subregion:
         case 'displacement': {
             const src = inColorSpace(input(kind.input), linear).pixmap, map = inColorSpace(input(kind.input2), linear).pixmap;
             const pixmap = create(region.width, region.height);
-            // (like resvg: the scale counts twice, the map isn't unpremultiplied)
+            // (the scale once, like the specification and browsers: resvg multiplies by it twice, moving everything out
+            // of the region at the scales SVGs use; the map's colors unpremultiplied, as the specification says)
             const sx = kind.scale * scaleX, sy = kind.scale * scaleY, w = src.width, h = src.height;
             const round = (v: number): number => Math.sign(v) * Math.round(Math.abs(v));
+            const channel = (m: number, c: number): number => {
+                const a = map.data[m + 3];
+                return c === 3 ? a / 255 : a ? map.data[m + c] / a : 0;
+            };
             for (let y = 0; y < Math.min(h, map.height); y++)
                 for (let x = 0; x < Math.min(w, map.width); x++) {
                     const m = (y * map.width + x) * 4;
-                    const ox = round(x + (map.data[m + kind.xChannel] / 255 - 0.5) * sx * kind.scale);
-                    const oy = round(y + (map.data[m + kind.yChannel] / 255 - 0.5) * sy * kind.scale);
+                    const ox = round(x + (channel(m, kind.xChannel) - 0.5) * sx);
+                    const oy = round(y + (channel(m, kind.yChannel) - 0.5) * sy);
                     if (ox < 0 || ox >= w || oy < 0 || oy >= h) continue;
                     pixmap.data.set(src.data.subarray((oy * w + ox) * 4, (oy * w + ox) * 4 + 4), (y * pixmap.width + x) * 4);
                 }

tests/svg-primitives.js

@@ -7,3 +7,22 @@ const panic = message => {
 (async () => {
     await require('./util/resvg')(file => file.startsWith('filters/fe'), panic);
 })();
+
+// feDisplacementMap applies its scale once (resvg multiplies by it twice) and reads the map's colors unpremultiplied,
+// like browsers: a map of R = 1 (half transparent) moves every pixel's source 0.5 * scale to the right
+(async () => {
+    const {Image} = require('..');
+    const svg = opacity => `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="20">
+        <filter id="f" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-color="#ff8000" flood-opacity="${opacity}" result="map"/>
+            <feDisplacementMap in="SourceGraphic" in2="map" scale="20" xChannelSelector="R" yChannelSelector="A"/>
+        </filter>
+        <rect x="40" y="0" width="20" height="20" fill="#000" filter="url(#f)"/></svg>`;
+    for (const opacity of [1, 0.5]) {
+        const image = await Image.renderSVG(svg(opacity));
+        // y offset: (alpha - 0.5) * 20, 10 rows down at opacity 1, none at 0.5; x: the rect drawn 10 pixels left
+        const row = opacity === 1 ? 5 : 10;
+        const covered = [...Array(100).keys()].filter(x => image.getRGBAAt(x, row)[3] > 128);
+        if (covered[0] !== 30 || covered.at(-1) !== 49) panic(`feDisplacementMap (map opacity ${opacity}): covers ${covered[0]}-${covered.at(-1)}, not 30-49`);
+    }
+})();