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

Skip to content

fix(core): Four-digit hex color parse failure #10593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 5, 2024
Merged

fix(core): Four-digit hex color parse failure #10593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b1737d5
fix(core): Four-digit hex color parse failure
CatchABus Aug 2, 2024
2814fe3
fix: Updated color regex validity to accept 4-digit hex
CatchABus Aug 2, 2024
f7376d5
test: Added automated tests
CatchABus Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion apps/automated/src/color/color-tests-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,19 @@ export var test_Hex_Color = function () {
TKUnit.assertEqual(color.argb, 0xffff0000, 'Color.argb not properly parsed');
};

export var test_Hex_rgba_Color = function () {
// >> color-hex-rgba
// Creates the red color
var color = new Color('#FF0000FF');
// << color-hex-rgba
TKUnit.assertEqual(color.a, 255, 'Color.a not properly parsed');
TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
TKUnit.assertEqual(color.g, 0, 'Color.g not properly parsed');
TKUnit.assertEqual(color.b, 0, 'Color.b not properly parsed');
TKUnit.assertEqual(color.hex, '#FF0000', 'Color.hex not properly parsed');
TKUnit.assertEqual(color.argb, 0xffff0000, 'Color.argb not properly parsed');
};

export var test_ShortHex_Color = function () {
// >> color-hex-short
// Creates the color #FF8800
Expand All @@ -30,6 +43,19 @@ export var test_ShortHex_Color = function () {
TKUnit.assertEqual(color.argb, 0xffff8800, 'Color.argb not properly parsed');
};

export var test_ShortHex_rgba_Color = function () {
// >> color-hex-short-rgba
// Creates the color #FF8800
var color = new Color('#F80F');
// << color-hex-short-rgba
TKUnit.assertEqual(color.a, 255, 'Color.a not properly parsed');
TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
TKUnit.assertEqual(color.g, 136, 'Color.g not properly parsed'); // 0x88 == 136
TKUnit.assertEqual(color.b, 0, 'Color.b not properly parsed');
TKUnit.assertEqual(color.hex, '#FF8800', 'Color.hex not properly parsed');
TKUnit.assertEqual(color.argb, 0xffff8800, 'Color.argb not properly parsed');
};

export var test_Argb_Color = function () {
// >> color-rgb
// Creates the color with 100 alpha, 255 red, 100 green, 100 blue
Expand Down Expand Up @@ -112,7 +138,10 @@ export var test_Color_isValid = function () {
var color = new Color('#FF0000');

TKUnit.assertEqual(Color.isValid(color), true, 'Failed to validate color instance');
TKUnit.assertEqual(Color.isValid('#FF0000'), true, 'Failed to validate hex color');
TKUnit.assertEqual(Color.isValid('#FFF'), true, 'Failed to validate 3-digit hex color');
TKUnit.assertEqual(Color.isValid('#FFF0'), true, 'Failed to validate 4-digit hex color');
TKUnit.assertEqual(Color.isValid('#FF0000'), true, 'Failed to validate 6-digit hex color');
TKUnit.assertEqual(Color.isValid('#FF000000'), true, 'Failed to validate 8-digit hex color');
TKUnit.assertEqual(Color.isValid('rgb(255, 100, 100)'), true, 'Failed to validate rgb color');
TKUnit.assertEqual(Color.isValid('hsl(50, 50%, 50%)'), true, 'Failed to validate hsl color');
TKUnit.assertEqual(Color.isValid(null) || Color.isValid(undefined), false, 'Failed to invalidate nullish value');
Expand Down
6 changes: 3 additions & 3 deletions packages/core/color/color-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as knownColors from './known-colors';
import { Color } from '.';

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

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

var i = Math.floor(h),
const i = Math.floor(h),
f = h - i,
p = v * (1 - s),
q = v * (1 - f * s),
Expand Down
Loading