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