From aaeab990c8f73d206bf19e1c918ec45e30d9e3a5 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Sat, 6 Mar 2021 20:27:29 -0800
Subject: [PATCH] fix(color): support web standard #rrggbbaa format

original pr credit to @farfromrefug
https://github.com/NativeScript/NativeScript/pull/8519

BREAKING CHANGE

Long standing inconsistency with color handling here.

BEFORE:

```
// #aarrggbb

const color = new Color('#ff00ff00');

Label {
    background-color: #ff00ff00;
}
```

AFTER:

```
// #rrggbbaa

const color = new Color('#00ff00ff');

Label {
    background-color: #00ff00ff;
}
```
---
 apps/automated/src/color/color-tests.ts          |  4 ++--
 apps/automated/src/ui/button/button-tests.ts     | 10 +++++-----
 apps/automated/src/ui/label/label-tests.ts       |  6 +++---
 apps/automated/src/ui/page/page-tests-common.ts  |  6 +++---
 .../src/ui/page/test-declarative-css-page.css    |  2 +-
 .../src/ui/page/test-module-css-page.css         |  2 +-
 .../src/ui/text-field/text-field-tests.ts        |  8 ++++----
 .../src/ui/text-view/text-view-tests.ts          |  8 ++++----
 packages/core/__tests__/css/parser.ts            |  2 +-
 packages/core/color/color-common.ts              | 16 ++++++++++++----
 10 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/apps/automated/src/color/color-tests.ts b/apps/automated/src/color/color-tests.ts
index 6f55c871e..5e8c455df 100644
--- a/apps/automated/src/color/color-tests.ts
+++ b/apps/automated/src/color/color-tests.ts
@@ -39,7 +39,7 @@ export var test_Argb_Color = function () {
 	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
 	TKUnit.assertEqual(color.g, 100, 'Color.g not properly parsed');
 	TKUnit.assertEqual(color.b, 100, 'Color.b not properly parsed');
-	TKUnit.assertEqual(color.hex, '#64FF6464', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF646464', 'Color.hex not properly parsed');
 	TKUnit.assertEqual(color.argb, 0x64ff6464, 'Color.argb not properly parsed');
 };
 
@@ -86,6 +86,6 @@ export var test_rgba_Color_CSS = function () {
 	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
 	TKUnit.assertEqual(color.g, 100, 'Color.g not properly parsed');
 	TKUnit.assertEqual(color.b, 100, 'Color.b not properly parsed');
-	TKUnit.assertEqual(color.hex, '#80FF6464', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF646480', 'Color.hex not properly parsed');
 	TKUnit.assertEqual(color.argb, 0x80ff6464, 'Color.argb not properly parsed');
 };
diff --git a/apps/automated/src/ui/button/button-tests.ts b/apps/automated/src/ui/button/button-tests.ts
index 5e6d3bab2..8e3c68807 100644
--- a/apps/automated/src/ui/button/button-tests.ts
+++ b/apps/automated/src/ui/button/button-tests.ts
@@ -181,7 +181,7 @@ var _testNativeFontSizeFromLocal = function (views: Array<View>) {
 	helper.assertAreClose(actualResult, expectedFontSize, 'FontSizeFromLocal');
 };
 
-var actualColorHex = '#ffff0000';
+var actualColorHex = '#ff0000ff';
 var expectedNormalizedColorHex = '#FF0000';
 var _testLocalColorFromCss = function (views: Array<View>) {
 	var button = <Button>views[0];
@@ -209,7 +209,7 @@ var _testNativeColorFromLocal = function (views: Array<View>) {
 	TKUnit.assert(actualResult === expectedNormalizedColorHex, 'Actual: ' + actualResult + '; Expected: ' + expectedNormalizedColorHex);
 };
 
-var actualBackgroundColorHex = '#FF00FF00';
+var actualBackgroundColorHex = '#00FF00FF';
 var expectedNormalizedBackgroundColorHex = '#00FF00';
 var _testLocalBackgroundColorFromCss = function (views: Array<View>) {
 	var button = <Button>views[0];
@@ -268,7 +268,7 @@ export var test_StateHighlighted_also_fires_pressedState = function () {
 	helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<View>) {
 		var view = <Button>views[0];
 		var page = <Page>views[1];
-		var expectedColor = '#FFFF0000';
+		var expectedColor = '#FF0000FF';
 		var expectedNormalizedColor = '#FF0000';
 		page.css = 'button:pressed { background-color: ' + expectedColor + '; }';
 
@@ -285,7 +285,7 @@ export var test_StateHighlighted_also_fires_activeState = function () {
 	helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<View>) {
 		var view = <Button>views[0];
 		var page = <Page>views[1];
-		var expectedColor = '#FFFF0000';
+		var expectedColor = '#FF0000FF';
 		var expectedNormalizedColor = '#FF0000';
 		page.css = 'button:active { background-color: ' + expectedColor + '; }';
 
@@ -302,7 +302,7 @@ export var test_applying_disabled_visual_State_when_button_is_disable = function
 	helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<View>) {
 		var view = <Button>views[0];
 		var page = <Page>views[1];
-		var expectedColor = '#FFFF0000';
+		var expectedColor = '#FF0000FF';
 		var expectedNormalizedColor = '#FF0000';
 		page.css = 'button:disabled { background-color: ' + expectedColor + '; }';
 
diff --git a/apps/automated/src/ui/label/label-tests.ts b/apps/automated/src/ui/label/label-tests.ts
index 764c15f06..cf011ba80 100644
--- a/apps/automated/src/ui/label/label-tests.ts
+++ b/apps/automated/src/ui/label/label-tests.ts
@@ -295,8 +295,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
 		const label = this.testView;
 
 		const fontSize = 14;
-		const color = '#FFFF0000';
-		const backgroundColor = '#FF00FF00';
+		const color = '#FF0000FF';
+		const backgroundColor = '#00FF00FF';
 		const testCss = ['.title {background-color: ', backgroundColor, '; ', 'color: ', color, '; ', 'font-size: ', fontSize, ';}'].join('');
 
 		// >> label-cssclass
@@ -566,7 +566,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
 		let view = this.testView;
 		let page = this.testPage;
 		this.waitUntilTestElementIsLoaded();
-		let expectedColor = '#FFFF0000';
+		let expectedColor = '#FF0000FF';
 		let expectedNormalizedColor = '#FF0000';
 
 		page.css = 'label:disabled { background-color: ' + expectedColor + '; }';
diff --git a/apps/automated/src/ui/page/page-tests-common.ts b/apps/automated/src/ui/page/page-tests-common.ts
index 74ef94543..00f5035d8 100644
--- a/apps/automated/src/ui/page/page-tests-common.ts
+++ b/apps/automated/src/ui/page/page-tests-common.ts
@@ -324,7 +324,7 @@ export function test_cssShouldBeAppliedToAllNestedElements() {
 	const stackLayout = new StackLayout();
 	stackLayout.addChild(label);
 	testPage.content = stackLayout;
-	testPage.css = 'stackLayout {background-color: #FFFF0000;} label {background-color: #FF00FF00;}';
+	testPage.css = 'stackLayout {background-color: #FF0000FF;} label {background-color: #00FF00FF;}';
 
 	const pageFactory = function () {
 		return testPage;
@@ -346,7 +346,7 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
 	const stackLayout = new StackLayout();
 	stackLayout.addChild(label);
 	testPage.content = stackLayout;
-	testPage.css = 'stackLayout {background-color: #FFFF0000;} label {background-color: #FF00FF00;}';
+	testPage.css = 'stackLayout {background-color: #FF0000FF;} label {background-color: #00FF00FF;}';
 
 	const pageFactory = function () {
 		return testPage;
@@ -357,7 +357,7 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
 	TKUnit.assertEqual(label.style.backgroundColor.hex, '#00FF00');
 	TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, '#FF0000');
 
-	testPage.css = 'stackLayout {background-color: #FF0000FF;} label {background-color: #FFFF0000;}';
+	testPage.css = 'stackLayout {background-color: #0000FFFF;} label {background-color: #FF0000FF;}';
 	TKUnit.assertEqual(label.style.backgroundColor.hex, '#FF0000');
 	TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, '#0000FF');
 }
diff --git a/apps/automated/src/ui/page/test-declarative-css-page.css b/apps/automated/src/ui/page/test-declarative-css-page.css
index a0e61f439..f92ac3ed0 100644
--- a/apps/automated/src/ui/page/test-declarative-css-page.css
+++ b/apps/automated/src/ui/page/test-declarative-css-page.css
@@ -1,3 +1,3 @@
 Label {
-    background-color: #ff00ff00;
+    background-color: #00ff00ff;
 }
diff --git a/apps/automated/src/ui/page/test-module-css-page.css b/apps/automated/src/ui/page/test-module-css-page.css
index a0e61f439..f92ac3ed0 100644
--- a/apps/automated/src/ui/page/test-module-css-page.css
+++ b/apps/automated/src/ui/page/test-module-css-page.css
@@ -1,3 +1,3 @@
 Label {
-    background-color: #ff00ff00;
+    background-color: #00ff00ff;
 }
diff --git a/apps/automated/src/ui/text-field/text-field-tests.ts b/apps/automated/src/ui/text-field/text-field-tests.ts
index 44bb76904..89ae45ed5 100644
--- a/apps/automated/src/ui/text-field/text-field-tests.ts
+++ b/apps/automated/src/ui/text-field/text-field-tests.ts
@@ -514,7 +514,7 @@ export var testNativeFontSizeFromLocal = function () {
 	});
 };
 
-var expectedColorHex = '#FFFF0000';
+var expectedColorHex = '#FF0000FF';
 var expectedNormalizedColorHex = '#FF0000';
 export var testLocalColorFromCss = function () {
 	helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<View>) {
@@ -548,7 +548,7 @@ export var testNativeColorFromLocal = function () {
 	});
 };
 
-var expectedBackgroundColorHex = '#FF00FF00';
+var expectedBackgroundColorHex = '#00FF00FF';
 var expectedNormalizedBackgroundColorHex = '#00FF00';
 export var testLocalBackgroundColorFromCss = function () {
 	helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<View>) {
@@ -695,7 +695,7 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
 
 export function test_set_placeholder_color() {
 	const view = new TextField();
-	const expectedColorHex = '#FFFF0000';
+	const expectedColorHex = '#FF0000FF';
 	const expectedNormalizedColorHex = '#FF0000';
 	helper.buildUIAndRunTest(view, function (views: Array<View>) {
 		view.hint = 'Some text for hint';
@@ -707,7 +707,7 @@ export function test_set_placeholder_color() {
 
 export function test_set_placeholder_color_when_hint_is_not_set() {
 	const view = new TextField();
-	const expectedColorHex = '#FFFF0000';
+	const expectedColorHex = '#FF0000FF';
 	const expectedNormalizedColorHex = '#FF0000';
 	helper.buildUIAndRunTest(view, function (views: Array<View>) {
 		view.setInlineStyle('placeholder-color: ' + expectedColorHex + ';');
diff --git a/apps/automated/src/ui/text-view/text-view-tests.ts b/apps/automated/src/ui/text-view/text-view-tests.ts
index 6236a472a..806c142ec 100644
--- a/apps/automated/src/ui/text-view/text-view-tests.ts
+++ b/apps/automated/src/ui/text-view/text-view-tests.ts
@@ -270,11 +270,11 @@ export var testHintColoriOS = function () {
 
 		actualValue = textViewTestsNative.getNativeColor(textView).hex;
 
-		TKUnit.assertEqual(actualValue, '#38FF0000', 'Expected hint color to be a subtle transparent red: #38FF0000');
+		TKUnit.assertEqual(actualValue, '#FF000038', 'Expected hint color to be a subtle transparent red: #FF000038');
 
 		textView.text = 'text';
 
-		expectedValue = '#FFFF0000'; // red
+		expectedValue = '#FF0000FF'; // red
 		expectedNormalizedValue = '#FF0000';
 		actualValue = textViewTestsNative.getNativeColor(textView).hex;
 		TKUnit.assert(actualValue === expectedNormalizedValue, 'Actual: ' + actualValue + '; Expected: ' + expectedNormalizedValue);
@@ -403,7 +403,7 @@ export var testLocalLineHeightFromCss = function () {
 	});
 };
 
-var expectedColorHex = '#FFFF0000';
+var expectedColorHex = '#FF0000FF';
 var expectedNormalizedColorHex = '#FF0000';
 export var testLocalColorFromCss = function () {
 	helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
@@ -437,7 +437,7 @@ export var testNativeColorFromLocal = function () {
 	});
 };
 
-var expectedBackgroundColorHex = '#FF00FF00';
+var expectedBackgroundColorHex = '#00FF00FF';
 var expectedNormalizedBackgroundColorHex = '#00FF00';
 export var testLocalBackgroundColorFromCss = function () {
 	helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
diff --git a/packages/core/__tests__/css/parser.ts b/packages/core/__tests__/css/parser.ts
index edc6786eb..2fabfc3d2 100644
--- a/packages/core/__tests__/css/parser.ts
+++ b/packages/core/__tests__/css/parser.ts
@@ -39,7 +39,7 @@ describe('css', () => {
 			describe('color', () => {
 				test(parseColor, '  #369 ', { start: 0, end: 7, value: 0xff336699 });
 				test(parseColor, '  #456789 ', { start: 0, end: 10, value: 0xff456789 });
-				test(parseColor, '  #85456789 ', { start: 0, end: 12, value: 0x85456789 });
+				test(parseColor, '  #45678985 ', { start: 0, end: 12, value: 0x45678985 });
 				test(parseColor, '  rgb(255, 8, 128) ', { start: 0, end: 18, value: 0xffff0880 });
 				test(parseColor, '  rgba(255, 8, 128, 0.5) ', { start: 0, end: 24, value: 0x80ff0880 });
 				test(parseColor, '  hsl(330.9, 100%, 51.6%) ', { start: 0, end: 25, value: 0xffff0880 });
diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts
index f3ff39561..8667836fc 100644
--- a/packages/core/color/color-common.ts
+++ b/packages/core/color/color-common.ts
@@ -26,8 +26,10 @@ export class Color implements definition.Color {
 					const argb = knownColors.getKnownColor(arg);
 					this._name = arg;
 					this._argb = argb;
-				} else if (HEX_REGEX.test(arg)) {
-					// The parameter is a "#AARRGGBB" formatted string
+				} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 7 || arg.length === 9)) {
+					// we dont use the regexp as it is quite slow. Instead we expect it to be a valid hex format
+					// strange that it would not be. And if it is not a thrown error seems best
+					// The parameter is a "#RRGGBBAA" formatted string
 					const hex = this._normalizeHex(arg);
 					this._argb = this._argbFromString(hex);
 				} else {
@@ -73,7 +75,7 @@ export class Color implements definition.Color {
 		if (this.a === 0xff) {
 			return ('#' + this._componentToHex(this.r) + this._componentToHex(this.g) + this._componentToHex(this.b)).toUpperCase();
 		} else {
-			return ('#' + this._componentToHex(this.a) + this._componentToHex(this.r) + this._componentToHex(this.g) + this._componentToHex(this.b)).toUpperCase();
+			return ('#' + this._componentToHex(this.r) + this._componentToHex(this.g) + this._componentToHex(this.b) + this._componentToHex(this.a)).toUpperCase();
 		}
 	}
 
@@ -104,6 +106,11 @@ export class Color implements definition.Color {
 		if (hex.length === 6) {
 			// add the alpha component since the provided string is RRGGBB
 			intVal = (intVal & 0x00ffffff) + 0xff000000;
+		} else {
+			// the new format is #RRGGBBAA
+			// we need to shift the alpha value to 0x01000000 position
+			const a = (intVal / 0x00000001) & 0xff;
+			intVal = (intVal >>> 8) + (a & 0xff) * 0x01000000;
 		}
 
 		return intVal;
@@ -157,7 +164,8 @@ export class Color implements definition.Color {
 	}
 
 	private _normalizeHex(hexStr: string): string {
-		if (hexStr.charAt(0) === SHARP && hexStr.length === 4) {
+		// we expect this to already has a # as first char as it is supposed to be tested before
+		if (hexStr.length === 4) {
 			// Duplicate each char after the #, so "#123" becomes "#112233"
 			hexStr = hexStr.charAt(0) + hexStr.charAt(1) + hexStr.charAt(1) + hexStr.charAt(2) + hexStr.charAt(2) + hexStr.charAt(3) + hexStr.charAt(3);
 		}