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

feat(core): support RGB alpha notation (#9699)

Browse Source 
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

Co-authored-by: Nathan Walker <walkerrunpdx@gmail.com>
This commit is contained in:
Ruslan Lekhman
2022-01-13 22:38:57 -07:00
committed by Nathan Walker
parent 2cbb135250
commit 388d7eaa7d
6 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
// <snippet module="color" title="color">
// ### 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})`);
// ```
// </snippet>
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;

4
apps/automated/src/ui/styling/style-properties-tests.ts
View File

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

2
packages/core/__tests__/css/parser.ts
View File

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

66
packages/core/__tests__/tsconfig.json
View File

@@ -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"
]
}
"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"]
}

6
packages/core/color/color-common.ts
View File

@@ -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;

1
packages/core/css/parser.ts
View File

@@ -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;