capricorn86#1004@patch: Fix missing css named colors.

AlexisTessier · Jul 30, 2023 · 760fc94 · 760fc94
1 parent e9038c7
commit 760fc94
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/happy-dom/package.json b/packages/happy-dom/package.json
@@ -89,6 +89,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.16.0",
 		"@typescript-eslint/parser": "^5.16.0",
 		"@vitest/ui": "^0.33.0",
+		"@webref/css": "6.6.2",
 		"eslint": "^8.11.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-filenames": "^1.3.2",

diff --git a/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationValueParser.ts b/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationValueParser.ts
@@ -15,6 +15,7 @@ const GRADIENT_REGEXP =
 	/^(repeating-linear|linear|radial|repeating-radial|conic|repeating-conic)-gradient\([^)]+\)$/;
 const GLOBALS = ['inherit', 'initial', 'unset', 'revert'];
 const COLORS = [
+	'none',
 	'currentcolor',
 	'transparent',
 	'silver',
@@ -31,12 +32,14 @@ const COLORS = [
 	'navy',
 	'blue',
 	'teal',
+	'aliceblue',
 	'aqua',
 	'antiquewhite',
 	'aquamarine',
 	'azure',
 	'beige',
 	'bisque',
+	'black',
 	'blanchedalmond',
 	'blueviolet',
 	'brown',
@@ -48,6 +51,7 @@ const COLORS = [
 	'cornflowerblue',
 	'cornsilk',
 	'crimson',
+	'cyan',
 	'darkblue',
 	'darkcyan',
 	'darkgoldenrod',
@@ -108,6 +112,7 @@ const COLORS = [
 	'lightyellow',
 	'limegreen',
 	'linen',
+	'magenta',
 	'mediumaquamarine',
 	'mediumblue',
 	'mediumorchid',
@@ -124,6 +129,7 @@ const COLORS = [
 	'navajowhite',
 	'oldlace',
 	'olivedrab',
+	'orange',
 	'orangered',
 	'orchid',
 	'palegoldenrod',
@@ -136,6 +142,7 @@ const COLORS = [
 	'pink',
 	'plum',
 	'powderblue',
+	'rebeccapurple',
 	'rosybrown',
 	'royalblue',
 	'saddlebrown',

diff --git a/packages/happy-dom/test/css/css-named-colors.test.ts b/packages/happy-dom/test/css/css-named-colors.test.ts
@@ -0,0 +1,24 @@
+import { test, expect } from 'vitest';
+import parser from '../../src/css/declaration/property-manager/CSSStyleDeclarationValueParser';
+import { values } from '@webref/css/css-color.json';
+
+function isString(value: string | undefined): value is string {
+	return typeof value === 'string';
+}
+
+const namedColorsFromWebref = values
+	.filter((value) => value.name === '<color>')
+	.flatMap((value) => value.values)
+	.map((color) => color?.name)
+	.filter(isString);
+
+test('named colors from webref are correctly selected', () => {
+	expect(namedColorsFromWebref).toContain('red');
+	expect(namedColorsFromWebref).toContain('green');
+	expect(namedColorsFromWebref).toContain('blue');
+});
+
+test.each(namedColorsFromWebref)('"%s" css named color must be defined', (expectedNamedColor) => {
+	const parsedColor = parser.getColor(expectedNamedColor);
+	expect(parsedColor).toStrictEqual(expectedNamedColor);
+});