javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-03 03:30:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(color): support web standard #rrggbbaa format

Browse Source 
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;
}
```
This commit is contained in:
Nathan Walker
2021-03-06 20:27:29 -08:00
parent e9b5eb934d
commit aaeab990c8
10 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/automated/src/color/color-tests.ts
View File

@ -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');
};

10
apps/automated/src/ui/button/button-tests.ts
View File

@ -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 + '; }';

6
apps/automated/src/ui/label/label-tests.ts
View File

@ -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 + '; }';

6
apps/automated/src/ui/page/page-tests-common.ts
View File

@ -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');
}

2
apps/automated/src/ui/page/test-declarative-css-page.css
View File

@ -1,3 +1,3 @@
Label {
background-color: #ff00ff00;
background-color: #00ff00ff;
}

2
apps/automated/src/ui/page/test-module-css-page.css
View File

@ -1,3 +1,3 @@
Label {
background-color: #ff00ff00;
background-color: #00ff00ff;
}

8
apps/automated/src/ui/text-field/text-field-tests.ts
View File

@ -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 + ';');

8
apps/automated/src/ui/text-view/text-view-tests.ts
View File

@ -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>) {