From bb796be9e1641fc29f52126fa6be01e0eb1f2c6b Mon Sep 17 00:00:00 2001
From: Sara Valderrama <saramv@fb.com>
Date: Thu, 4 Feb 2021 14:15:40 -0800
Subject: [PATCH] fix rounding for translation to android/ios colors

Summary:
Currently, there is a bug with the way that fabric translates float values for color components to hex/int value (which android uses). There are two main problems with the current setup. The first is that we are using 256 as our ratio instead of 255 which is the maximum value for any color component in hex. The second is that we cast the components to ints instead of rounding which truncates the values. We uncovered this with UIQR because our off-by-one color values were incorrectly off a little bit extra for fabric surfaces.

Changelog: [Internal] updates the float-to-int value conversion for color components to be fully accurate

Reviewed By: shergin

Differential Revision: D26161396

fbshipit-source-id: 884e27ffa01b116f9307c00298bb8d888f9f6dd7
---
 ReactCommon/react/renderer/graphics/conversions.h    |  8 ++++----
 .../platform/cxx/react/renderer/graphics/Color.cpp   | 12 ++++++------
 .../platform/cxx/react/renderer/graphics/Color.h     |  1 +
 .../react/renderer/graphics/platform/ios/Color.cpp   | 12 ++++++------
 .../react/renderer/graphics/platform/ios/Color.h     |  1 +
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/ReactCommon/react/renderer/graphics/conversions.h b/ReactCommon/react/renderer/graphics/conversions.h
index 6fa241a4fa3..3a61d17fc62 100644
--- a/ReactCommon/react/renderer/graphics/conversions.h
+++ b/ReactCommon/react/renderer/graphics/conversions.h
@@ -51,10 +51,10 @@ inline folly::dynamic toDynamic(const SharedColor &color) {
   ColorComponents components = colorComponentsFromColor(color);
   auto ratio = 255.f;
   return (
-      ((int)(components.alpha * ratio) & 0xff) << 24 |
-      ((int)(components.red * ratio) & 0xff) << 16 |
-      ((int)(components.green * ratio) & 0xff) << 8 |
-      ((int)(components.blue * ratio) & 0xff));
+      ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff));
 }
 
 #endif
diff --git a/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.cpp b/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.cpp
index ff2acbb8142..92b738e5b33 100644
--- a/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.cpp
+++ b/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.cpp
@@ -11,16 +11,16 @@ namespace facebook {
 namespace react {
 
 SharedColor colorFromComponents(ColorComponents components) {
-  float ratio = 255.9999;
+  float ratio = 255;
   return SharedColor(
-      ((int)(components.alpha * ratio) & 0xff) << 24 |
-      ((int)(components.red * ratio) & 0xff) << 16 |
-      ((int)(components.green * ratio) & 0xff) << 8 |
-      ((int)(components.blue * ratio) & 0xff));
+      ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff));
 }
 
 ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
-  float ratio = 256;
+  float ratio = 255;
   Color color = *sharedColor;
   return ColorComponents{
       (float)((color >> 16) & 0xff) / ratio,
diff --git a/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h b/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h
index 86196c6a404..5ab4dabd568 100644
--- a/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h
+++ b/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h
@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <cmath>
 #include <functional>
 #include <limits>
 
diff --git a/ReactCommon/react/renderer/graphics/platform/ios/Color.cpp b/ReactCommon/react/renderer/graphics/platform/ios/Color.cpp
index d2f5f10ad35..0b9bf45c56d 100644
--- a/ReactCommon/react/renderer/graphics/platform/ios/Color.cpp
+++ b/ReactCommon/react/renderer/graphics/platform/ios/Color.cpp
@@ -12,12 +12,12 @@ namespace facebook {
 namespace react {
 
 SharedColor colorFromComponents(ColorComponents components) {
-  float ratio = 255.9999;
+  float ratio = 255;
   return SharedColor(
-      ((int)(components.alpha * ratio) & 0xff) << 24 |
-      ((int)(components.red * ratio) & 0xff) << 16 |
-      ((int)(components.green * ratio) & 0xff) << 8 |
-      ((int)(components.blue * ratio) & 0xff));
+      ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff));
 }
 
 ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
@@ -27,7 +27,7 @@ ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
     return ColorComponents{0, 0, 0, 0};
   }
 
-  float ratio = 256;
+  float ratio = 255;
   Color color = *sharedColor;
   return ColorComponents{
       (float)((color >> 16) & 0xff) / ratio,
diff --git a/ReactCommon/react/renderer/graphics/platform/ios/Color.h b/ReactCommon/react/renderer/graphics/platform/ios/Color.h
index 0b8ab406b40..e85a92fffac 100644
--- a/ReactCommon/react/renderer/graphics/platform/ios/Color.h
+++ b/ReactCommon/react/renderer/graphics/platform/ios/Color.h
@@ -8,6 +8,7 @@
 #pragma once
 
 #include <better/optional.h>
+#include <cmath>
 
 #include <react/renderer/graphics/ColorComponents.h>
 #include <react/renderer/graphics/Float.h>