Round interpolation for RGB components

lelandrichardson · Facebook Github Bot 6 · commit 4ee0f7b2189d · 2016-04-15T14:51:27.000-07:00
Summary:The CSS spec doesn't allow for decimal values inside of rgb colors, however the RN implementation does, so there was a disconnect here. This tests to see if the output range is an rgb color, and if so, rounds the first 3 interpolated components (but not the 4th, since that would be opacity and allows for a decimal). cc vjeux Closes facebook/react-native#6984 Differential Revision: D3186473 fb-gh-sync-id: a320bf2311764e084386700bf8c8a42ab2a347eb fbshipit-source-id: a320bf2311764e084386700bf8c8a42ab2a347eb
diff --git a/Libraries/Animated/src/Interpolation.js b/Libraries/Animated/src/Interpolation.js
@@ -222,17 +222,27 @@ function createInterpolationFromStringOutputRange(
     });
   });
 
+  // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
+  // round the opacity (4th column).
+  const shouldRound = isRgbOrRgba(outputRange[0]);
+
   return (input) => {
     var i = 0;
     // 'rgba(0, 100, 200, 0)'
     // ->
     // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
     return outputRange[0].replace(stringShapeRegex, () => {
-      return String(interpolations[i++](input));
+      const val = +interpolations[i++](input);
+      const rounded = shouldRound && i < 4 ? Math.round(val) : val;
+      return String(rounded);
     });
   };
 }
 
+function isRgbOrRgba(range) {
+  return typeof range === 'string' && range.startsWith('rgb');
+}
+
 function checkPattern(arr: Array<string>) {
   var pattern = arr[0].replace(stringShapeRegex, '');
   for (var i = 1; i < arr.length; ++i) {
diff --git a/Libraries/Animated/src/__tests__/Interpolation-test.js b/Libraries/Animated/src/__tests__/Interpolation-test.js
@@ -231,7 +231,7 @@ describe('Interpolation', () => {
     });
 
     expect(interpolation(0)).toBe('rgba(0, 34, 68, 1)');
-    expect(interpolation(0.5)).toBe('rgba(76.5, 110.5, 161.5, 1)');
+    expect(interpolation(0.5)).toBe('rgba(77, 111, 162, 1)');
     expect(interpolation(1)).toBe('rgba(153, 187, 255, 1)');
   });
 
@@ -242,7 +242,7 @@ describe('Interpolation', () => {
     });
 
     expect(interpolation(0)).toBe('rgba(255, 149, 0, 1)');
-    expect(interpolation(0.5)).toBe('rgba(195, 200.5, 56, 1)');
+    expect(interpolation(0.5)).toBe('rgba(195, 201, 56, 1)');
     expect(interpolation(1)).toBe('rgba(135, 252, 112, 1)');
   });
 
@@ -253,7 +253,7 @@ describe('Interpolation', () => {
     });
 
     expect(interpolation(0)).toBe('rgba(100, 120, 140, 0.4)');
-    expect(interpolation(0.5)).toBe('rgba(117.5, 186, 126, 0.7)');
+    expect(interpolation(0.5)).toBe('rgba(118, 186, 126, 0.7)');
     expect(interpolation(1)).toBe('rgba(135, 252, 112, 1)');
   });
 
@@ -284,7 +284,7 @@ describe('Interpolation', () => {
 
     expect(interpolation(0)).toBe('rgba(0, 100, 200, 0)');
     expect(interpolation(0.5)).toBe('rgba(25, 125, 225, 0.5)');
-    expect(interpolation(1.5)).toBe('rgba(152.5, 75, 125, 1)');
+    expect(interpolation(1.5)).toBe('rgba(153, 75, 125, 1)');
     expect(interpolation(2)).toBe('rgba(255, 0, 0, 1)');
   });
 
