Test: standalone color picker: decorators with hsl values, some don't work, some hsl values do trigger the decorator

[ArturoDent]

Testing https://github.com/microsoft/vscode/issues/180678

@aiday-mar

Steps to Reproduce:

1. Enable the setting Editor: Default Color Decorator.
2. Insert this color value: hsl(253, 100.00%, 47.10%) into a ts or jsx file.
3. No color decorator appears for that specific hsl value, but a decorator appears for other hsl values, like hsl(0, 83.60%, 47.80%).

I don't know which hsl values work or don't - some regex issue I assume.

Version: 1.78.0-insider Commit: 208bbb0d788cce3eb80799e3565ee2204391b86d Date: 2023-04-20T05:20:21.925Z Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.78.0-insider Chrome/108.0.5359.215 Electron/22.4.7 Safari/537.36

[dcecile]

There are two levels of regexes that a color value needs to pass:

https://github.com/microsoft/vscode/blob/39aba8e0afffb3ed32005b1456d911a3cc77d97d/src/vs/editor/common/languages/defaultDocumentColorsComputer.ts#L104

https://github.com/microsoft/vscode/blob/39aba8e0afffb3ed32005b1456d911a3cc77d97d/src/vs/editor/common/languages/defaultDocumentColorsComputer.ts#L124

const s1 = 'hsl(253, 100.00%, 47.10%)';
const s2 = 'hsl(0, 83.60%, 47.80%)';
const initialValidationRegex = /\b(rgb|rgba|hsl|hsla)(\([0-9\s,.\%]*\))|(#)([A-Fa-f0-9]{3})\b|(#)([A-Fa-f0-9]{4})\b|(#)([A-Fa-f0-9]{6})\b|(#)([A-Fa-f0-9]{8})\b/gm;
const regexParameters = /^\(\s*(36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])\s*,\s*(100|\d{1,2}[.]\d*|\d{1,2})%\s*,\s*(100|\d{1,2}[.]\d*|\d{1,2})%\s*\)$/gm;
[...s1.matchAll(initialValidationRegex)]; // OK
[...s2.matchAll(initialValidationRegex)]; // OK
[...[...s1.matchAll(initialValidationRegex)][0][2].matchAll(regexParameters)]; // No matches
[...[...s2.matchAll(initialValidationRegex)][0][2].matchAll(regexParameters)]; // OK

It looks like the issue for this test string is that only 100 is allowed, with no decimals. So hsl(253, 100%, 47.10%) highlights OK.