Use rgba 1,1,1,1 as "filler" pixel

Some code we had was assuming that everything fully transparent was
intentionally added by us as filler for missing content on the right of
either the before or after image. To make things more explicit, I'm
using the term "filler pixel" here and setting it to always be 1,1,1,1.
This way the intentions in the code become clearer and at the same time
we have less risk of collisions with a transparent pixel that we do not
control.

Author: trotzig

src/__tests__/colorDelta-test.js

@@ -22,22 +22,22 @@ it('is medium when comparing red and blue', () => {
   expect(delta).toBeLessThan(0.51);
 });
 
-it('is one when comparing transparent and white', () => {
-  expect(colorDelta([0, 0, 0, 0], [255, 255, 255, 255])).toEqual(1);
+it('is one when comparing filler pixel and white', () => {
+  expect(colorDelta([1, 1, 1, 1], [255, 255, 255, 255])).toEqual(1);
 });
 
 it('is large when comparing transparent and black', () => {
   expect(colorDelta([0, 0, 0, 0], [0, 0, 0, 255])).toBeGreaterThan(0.92);
 });
 
-it('is large when comparing white and transparent', () => {
-  expect(colorDelta([255, 255, 255, 255], [0, 0, 0, 0])).toBeGreaterThan(0.92);
+it('is large when comparing white and filler pixel', () => {
+  expect(colorDelta([255, 255, 255, 255], [1, 1, 1, 1])).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 one when comparing filler pixel and some other color', () => {
+  expect(colorDelta([1, 1, 1, 1], [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);
+it('is small when comparing transparent and similar color', () => {
+  expect(colorDelta([1, 46, 250, 0], [1, 42, 250, 4])).toBeLessThan(0.05);
 });

src/__tests__/getDiffPixel-test.js

@@ -22,16 +22,16 @@ it('returns magenta when diff', () => {
   });
 });
 
-it('returns diff when after alpha is zero', () => {
-  currentPixel[3] = 0;
+it('returns diff when after is filler pixel', () => {
+  currentPixel = [1, 1, 1, 1];
   expect(subject()).toEqual({
     diff: 1,
     pixel: [179, 54, 130, 255],
   });
 });
 
-it('returns diff when before alpha is zero', () => {
-  previousPixel[3] = 0;
+it('returns diff when before is filler pixel', () => {
+  previousPixel = [1, 1, 1, 1];
   expect(subject()).toEqual({
     diff: 1,
     pixel: [179, 54, 130, 255],

src/colorDelta.js

@@ -17,14 +17,8 @@ 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;
+function isFillerPixel([r, g, b, a]) {
+  return r === 1 && g === 1 && b === 1 && a === 1;
 }
 
 // calculate color difference according to the paper "Measuring perceived color
@@ -41,8 +35,8 @@ module.exports = function colorDelta(previousPixel, currentPixel) {
   }
 
   if (
-    (isIntentionalTransparent(currentPixel) && a1 > 0) ||
-    (isIntentionalTransparent(previousPixel) && a2 > 0)
+    (isFillerPixel(currentPixel) && a1 > 0) ||
+    (isFillerPixel(previousPixel) && a2 > 0)
   ) {
     return 1;
   }

src/computeAndInjectDiffs.js

@@ -13,6 +13,10 @@ function imageTo2DArray({ data, width, height }, paddingRight) {
     for (let location = 0; location < rowSize; location += 1) {
       pixelsInRow[location] = data[row * rowSize + location];
     }
+    for (let location = rowSize; location < rowSize + (paddingRight * 4); location += 1) {
+      pixelsInRow[location] = 1;
+    }
+
     newData.push(pixelsInRow);
   }
   return newData;