Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8877bec

Browse files
CatchABusCatchABus
authored
fix(color): four-digit hex color parse failure (#10593)
1 parent 423a2d2 commit 8877bec

File tree

2 files changed

+33
-4
lines changed

2 files changed

+33
-4
lines changed

‎apps/automated/src/color/color-tests-common.ts

+30-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,19 @@ export var test_Hex_Color = function () {
1717
TKUnit.assertEqual(color.argb, 0xffff0000, 'Color.argb not properly parsed');
1818
};
1919

20+
export var test_Hex_rgba_Color = function () {
21+
// >> color-hex-rgba
22+
// Creates the red color
23+
var color = new Color('#FF0000FF');
24+
// << color-hex-rgba
25+
TKUnit.assertEqual(color.a, 255, 'Color.a not properly parsed');
26+
TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
27+
TKUnit.assertEqual(color.g, 0, 'Color.g not properly parsed');
28+
TKUnit.assertEqual(color.b, 0, 'Color.b not properly parsed');
29+
TKUnit.assertEqual(color.hex, '#FF0000', 'Color.hex not properly parsed');
30+
TKUnit.assertEqual(color.argb, 0xffff0000, 'Color.argb not properly parsed');
31+
};
32+
2033
export var test_ShortHex_Color = function () {
2134
// >> color-hex-short
2235
// Creates the color #FF8800
@@ -30,6 +43,19 @@ export var test_ShortHex_Color = function () {
3043
TKUnit.assertEqual(color.argb, 0xffff8800, 'Color.argb not properly parsed');
3144
};
3245

46+
export var test_ShortHex_rgba_Color = function () {
47+
// >> color-hex-short-rgba
48+
// Creates the color #FF8800
49+
var color = new Color('#F80F');
50+
// << color-hex-short-rgba
51+
TKUnit.assertEqual(color.a, 255, 'Color.a not properly parsed');
52+
TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
53+
TKUnit.assertEqual(color.g, 136, 'Color.g not properly parsed'); // 0x88 == 136
54+
TKUnit.assertEqual(color.b, 0, 'Color.b not properly parsed');
55+
TKUnit.assertEqual(color.hex, '#FF8800', 'Color.hex not properly parsed');
56+
TKUnit.assertEqual(color.argb, 0xffff8800, 'Color.argb not properly parsed');
57+
};
58+
3359
export var test_Argb_Color = function () {
3460
// >> color-rgb
3561
// Creates the color with 100 alpha, 255 red, 100 green, 100 blue
@@ -112,7 +138,10 @@ export var test_Color_isValid = function () {
112138
var color = new Color('#FF0000');
113139

114140
TKUnit.assertEqual(Color.isValid(color), true, 'Failed to validate color instance');
115-
TKUnit.assertEqual(Color.isValid('#FF0000'), true, 'Failed to validate hex color');
141+
TKUnit.assertEqual(Color.isValid('#FFF'), true, 'Failed to validate 3-digit hex color');
142+
TKUnit.assertEqual(Color.isValid('#FFF0'), true, 'Failed to validate 4-digit hex color');
143+
TKUnit.assertEqual(Color.isValid('#FF0000'), true, 'Failed to validate 6-digit hex color');
144+
TKUnit.assertEqual(Color.isValid('#FF000000'), true, 'Failed to validate 8-digit hex color');
116145
TKUnit.assertEqual(Color.isValid('rgb(255, 100, 100)'), true, 'Failed to validate rgb color');
117146
TKUnit.assertEqual(Color.isValid('hsl(50, 50%, 50%)'), true, 'Failed to validate hsl color');
118147
TKUnit.assertEqual(Color.isValid(null) || Color.isValid(undefined), false, 'Failed to invalidate nullish value');

‎packages/core/color/color-common.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as knownColors from './known-colors';
44
import { Color } from '.';
55

66
const SHARP = '#';
7-
const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i;
7+
const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)|(^#[0-9A-F]{4}$)/i;
88

99
export class ColorBase implements definition.Color {
1010
private _argb: number;
@@ -29,7 +29,7 @@ export class ColorBase implements definition.Color {
2929
const argb = knownColors.getKnownColor(lowered);
3030
this._name = arg;
3131
this._argb = argb;
32-
} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 7 || arg.length === 9)) {
32+
} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 5 || arg.length === 7 || arg.length === 9)) {
3333
// we dont use the regexp as it is quite slow. Instead we expect it to be a valid hex format
3434
// strange that it would not be. And if it is not a thrown error seems best
3535
// The parameter is a "#RRGGBBAA" formatted string
@@ -578,7 +578,7 @@ function hsvToRgb(h1, s1, v1) {
578578
const s = s1 / 100;
579579
const v = v1 / 100;
580580

581-
var i = Math.floor(h),
581+
const i = Math.floor(h),
582582
f = h - i,
583583
p = v * (1 - s),
584584
q = v * (1 - f * s),

0 commit comments

Comments
 (0)