From d8f9ca8881beaa8987a43480105b60266e691b8a Mon Sep 17 00:00:00 2001 From: Ruslan Lekhman Date: Tue, 14 Dec 2021 15:35:24 -0700 Subject: [PATCH] feat(core): support RGB alpha notation Functional notation: rgb[a](R G B[ / A]) CSS Colors Level 4 adds support for space-separated values in the functional notation. See https://www.w3.org/TR/css-color-4/#rgb-functions --- apps/automated/src/color/color-tests.ts | 18 +++++ .../src/ui/styling/style-properties-tests.ts | 4 ++ packages/core/__tests__/css/parser.ts | 2 + packages/core/__tests__/tsconfig.json | 66 +++++++------------ packages/core/color/color-common.ts | 6 +- packages/core/css/parser.ts | 1 - 6 files changed, 50 insertions(+), 47 deletions(-) diff --git a/apps/automated/src/color/color-tests.ts b/apps/automated/src/color/color-tests.ts index 5e8c455dfe..e229769854 100644 --- a/apps/automated/src/color/color-tests.ts +++ b/apps/automated/src/color/color-tests.ts @@ -72,6 +72,24 @@ export var test_rgb_Color_CSS = function () { TKUnit.assertEqual(color.argb, 0xffff6464, 'Color.argb not properly parsed'); }; +export var test_rgb_Color_CSS_lvl4 = function () { + var alpha = 0.5; + var expected = 0x80; + // + // ### Creating a Color from four RGB values + // ``` JavaScript + // Creates the color with 255 red, 100 green, 100 blue + var color = new Color(`rgb(255 100 100 / ${alpha})`); + // ``` + // + TKUnit.assertEqual(color.a, expected, 'Color.a not properly parsed'); + 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, '#FF646480', 'Color.hex not properly parsed'); + TKUnit.assertEqual(color.argb, 0x80ff6464, 'Color.argb not properly parsed'); +}; + export var test_rgba_Color_CSS = function () { var alpha = 0.5; var expected = 0x80; diff --git a/apps/automated/src/ui/styling/style-properties-tests.ts b/apps/automated/src/ui/styling/style-properties-tests.ts index a643400f15..63a6fd3df5 100644 --- a/apps/automated/src/ui/styling/style-properties-tests.ts +++ b/apps/automated/src/ui/styling/style-properties-tests.ts @@ -59,6 +59,10 @@ export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Styl test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255, 0, 0)'); } +export function test_setting_borderColorRGBLvl4_property_from_CSS_is_applied_to_Style() { + test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255 0 0 / 1)'); +} + export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() { test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgba(255,0,0,1)'); } diff --git a/packages/core/__tests__/css/parser.ts b/packages/core/__tests__/css/parser.ts index 80d89e6cd9..5e1826d4aa 100644 --- a/packages/core/__tests__/css/parser.ts +++ b/packages/core/__tests__/css/parser.ts @@ -44,6 +44,8 @@ describe('css', () => { test(parseColor, ' #456789 ', { start: 0, end: 10, value: new Color(0xff456789) }); test(parseColor, ' #45678985 ', { start: 0, end: 12, value: new Color(0x45678985) }); test(parseColor, ' rgb(255, 8, 128) ', { start: 0, end: 18, value: new Color(0xffff0880) }); + test(parseColor, ' rgb(255 8 128 / .5) ', { start: 0, end: 22, value: new Color(0x80ff0880) }); + test(parseColor, ' rgb(255 8 128/0.5)', { start: 0, end: 20, value: new Color(0x80ff0880) }); test(parseColor, ' rgba(255, 8, 128, 0.5) ', { start: 0, end: 24, value: new Color(0x80ff0880) }); test(parseColor, ' hsl(330.9, 100%, 51.6%) ', { start: 0, end: 25, value: new Color(0xffff0880) }); test(parseColor, ' hsla(330.9, 100%, 51.6%, 0.5) ', { start: 0, end: 31, value: new Color(0x80ff0880) }); diff --git a/packages/core/__tests__/tsconfig.json b/packages/core/__tests__/tsconfig.json index 48350c360b..030ad9a41a 100644 --- a/packages/core/__tests__/tsconfig.json +++ b/packages/core/__tests__/tsconfig.json @@ -1,45 +1,23 @@ { - "compilerOptions": { - "noEmitOnError": false, - "noEmitHelpers": true, - "target": "es5", - "module": "commonjs", - "noImplicitUseStrict": true, - "removeComments": true, - "experimentalDecorators": true, - "diagnostics": true, - "sourceMap": true, - "inlineSourceMap": false, - "lib": [ - "es6", - "dom" - ], - "types": [ - "node", - "chai", - "mocha" - ], - "baseUrl": ".", - "paths": { - "@nativescript/core": [ - "../index.ts" - ], - "@nativescript/core/*": [ - "../*" - ], - } - }, - "include": [ - "../global-types.d.ts", - "./**/*.ts" - ], - "exclude": [ - "../**/*.android.ts", - "../**/*.android.d.ts", - "../**/*.ios.ts", - "../**/*.ios.d.ts", - "../node-modules", - "../references.d.ts", - "../platforms" - ] -} \ No newline at end of file + "compilerOptions": { + "noEmitOnError": false, + "noEmitHelpers": true, + "target": "es5", + "module": "commonjs", + "noImplicitUseStrict": true, + "removeComments": true, + "experimentalDecorators": true, + "diagnostics": true, + "sourceMap": true, + "inlineSourceMap": false, + "lib": ["es6", "dom"], + "types": ["node", "chai", "mocha"], + "baseUrl": ".", + "paths": { + "@nativescript/core": ["../index.ts"], + "@nativescript/core/*": ["../*"] + } + }, + "include": ["../global-types.d.ts", "./**/*.ts"], + "exclude": ["../**/*.android.ts", "../**/*.android.d.ts", "../**/*.ios.ts", "../**/*.ios.d.ts", "../node-modules", "../references.d.ts", "../platforms"] +} diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts index 9e522a1c53..060d0e5167 100644 --- a/packages/core/color/color-common.ts +++ b/packages/core/color/color-common.ts @@ -406,12 +406,14 @@ function isHsvOrHsva(value: string): boolean { } function parseColorWithAlpha(value: string): any { + const separator = value.indexOf(',') !== -1 ? ',' : ' '; const parts = value .replace(/(rgb|hsl|hsv)a?\(/, '') .replace(')', '') + .replace(/\//, ' ') .replace(/%/g, '') - .trim() - .split(','); + .split(separator) + .filter((part) => Boolean(part.length)); let f = 255; let s = 255; diff --git a/packages/core/css/parser.ts b/packages/core/css/parser.ts index e13411158d..b3669b7c7f 100644 --- a/packages/core/css/parser.ts +++ b/packages/core/css/parser.ts @@ -135,7 +135,6 @@ export function parseColorKeyword(value, start: number, keyword = parseKeyword(v const parseColor = keyword && getKnownColor(keyword.value); if (parseColor != null) { const end = keyword.end; - const value = parseColor; return { start, end, value: new Color(parseColor) }; } return null;