Handle almost-transparent and transparent pixels better

I came across a case where one pixel is almost transparent and the other
is fully transparent. Consider these pixels:

[ 1, 46, 250, 0 ]
[ 1, 42, 250, 4 ]

With our old logic, there was a color-delta of `1` between these pixels.
If we blend them both with white, we instead get a very low color-delta
value.

At first I was going to always blend with white, but I realized we are
using fully transparent as a signal that there is a gap/missing pixels
in either the before or after image. So I instead changed it to
"intentional transparency" where something like

[255, 255, 255, 0]
[0, 0, 0, 0]
[100, 100, 100, 0]

would be considered "intentional transparency". Of course, this
assumption can't always be made. But for us I think we can use it to get
rid of the edge-case that I present here. There's still a risk that
we'll encounter "wild" transparency with r===g===b but at least this is
better than what we have.

Author: trotzig

src/__tests__/colorDelta-test.js

@@ -33,3 +33,11 @@ it('is large when comparing transparent and black', () => {
 it('is large when comparing white and transparent', () => {
   expect(colorDelta([255, 255, 255, 255], [0, 0, 0, 0])).toBeGreaterThan(0.92);
 });
+
+it('is one when comparing intentionally transparent and some other color', () => {
+  expect(colorDelta([0, 0, 0, 0], [33, 33, 33, 10])).toEqual(1);
+});
+
+it('is small when comparing unintentional transparent and similar color', () => {
+  expect(colorDelta([ 1, 46, 250, 0 ], [ 1, 42, 250, 4 ])).toBeLessThan(0.05);
+});

src/colorDelta.js

@@ -17,6 +17,16 @@ function blend(color, alpha) {
   return 255 + (color - 255) * alpha;
 }
 
+function isIntentionalTransparent([r, g, b, a]) {
+  if (a !== 0) {
+    return false;
+  }
+  if (r === g && g === b && (r === 255 || r === 0)) {
+    return true;
+  }
+  return false;
+}
+
 // calculate color difference according to the paper "Measuring perceived color
 // difference using YIQ NTSC transmission color space in mobile applications" by
 // Y. Kotsarenko and F. Ramos
@@ -30,7 +40,10 @@ module.exports = function colorDelta(previousPixel, currentPixel) {
     return 0;
   }
 
-  if ((a2 === 0 && a1 > 0) || (a1 === 0 && a2 > 0)) {
+  if (
+    (isIntentionalTransparent(currentPixel) && a1 > 0) ||
+    (isIntentionalTransparent(previousPixel) && a2 > 0)
+  ) {
     return 1;
   }