fix: [#2042] Support CSS gradients with rgba() colors

packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts

@@ -1,4 +1,5 @@
 import CSSStyleDeclarationValueParser from './CSSStyleDeclarationValueParser.js';
+import CSSStyleDeclarationValueUtility from './CSSStyleDeclarationValueUtility.js';
 import type ICSSStyleDeclarationPropertyValue from './ICSSStyleDeclarationPropertyValue.js';
 
 const RECT_REGEXP = /^rect\((.*)\)$/i;
@@ -2300,11 +2301,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBackgroundColor('initial', important)
 		};
 
-		const parts = value
-			.replace(/\s,\s/g, ',')
-			.replace(/\s\/\s/g, '/')
-			.split(SPLIT_SPACE_SEPARATED_WITH_PARANTHESES_REGEXP);
-
+		const parts = CSSStyleDeclarationValueUtility.splitBySpace(value.replace(/\s+\/\s+/g, '/'));
 		const backgroundPositions = [];
 
 		for (const part of parts) {
@@ -2811,7 +2808,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-image': { value: lowerValue, important } };
 		}
 
-		const parts = value.split(SPLIT_COMMA_SEPARATED_WITH_PARANTHESES_REGEXP);
+		const parts = CSSStyleDeclarationValueUtility.splitByComma(value);
 		const parsed = [];
 
 		for (const part of parts) {

packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationValueParser.ts

@@ -1,3 +1,5 @@
+import CSSStyleDeclarationValueUtility from './CSSStyleDeclarationValueUtility.js';
+
 const COLOR_REGEXP =
 	/^#([0-9a-fA-F]{3,4}){1,2}$|^rgb\(([^)]*)\)$|^rgba\(([^)]*)\)$|^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)|(?:(rgba?|hsla?)\((var\(\s*(--[^)\s]+)\))\))/;
 
@@ -12,7 +14,7 @@ const CALC_REGEXP = /^calc\([^^)]+\)$/;
 const CSS_VARIABLE_REGEXP = /^var\(\s*(--[^)\s]+)\)$/;
 const FIT_CONTENT_REGEXP = /^fit-content\([^^)]+\)$/;
 const GRADIENT_REGEXP =
-	/^((repeating-linear|linear|radial|repeating-radial|conic|repeating-conic)-gradient)\(([^)]+)\)$/;
+	/^((repeating-linear|linear|radial|repeating-radial|conic|repeating-conic)-gradient)\(((?:[^()]|\([^()]*\))*)\)$/;
 const GLOBALS = ['inherit', 'initial', 'unset', 'revert'];
 const COLORS = [
 	'none',
@@ -333,10 +335,9 @@ export default class CSSStyleDeclarationValueParser {
 	public static getGradient(value: string): string | null {
 		const match = value.match(GRADIENT_REGEXP);
 		if (match) {
-			return `${match[1]}(${match[3]
-				.trim()
-				.split(/\s*,\s*/)
-				.join(', ')})`;
+			const args = match[3].trim();
+			const parts = CSSStyleDeclarationValueUtility.splitByComma(args);
+			return `${match[1]}(${parts.join(', ')})`;
 		}
 		return null;
 	}

packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationValueUtility.ts

@@ -0,0 +1,90 @@
+const SPLIT_BY_COMMA_REGEXP = /[,()]/gm;
+const SPLIT_BY_SPACE_REGEXP = /[()]|\s+/gm;
+
+/**
+ * Style declaration value parser.
+ */
+export default class CSSStyleDeclarationValueUtility {
+	/**
+	 * Splits by comma while respecting nested parentheses.
+	 *
+	 * @param value Value to split.
+	 * @returns Array of parts.
+	 */
+	public static splitByComma(value: string): string[] {
+		const parts: string[] = [];
+		const regexp = new RegExp(SPLIT_BY_COMMA_REGEXP);
+		let match: RegExpExecArray | null;
+		let depth = 0;
+		let lastIndex = 0;
+
+		while ((match = regexp.exec(value))) {
+			switch (match[0]) {
+				case '(':
+					depth++;
+					break;
+				case ')':
+					depth--;
+					break;
+				case ',':
+					if (depth === 0) {
+						const part = value.substring(lastIndex, match.index).trim();
+						if (part) {
+							parts.push(part);
+						}
+						lastIndex = regexp.lastIndex;
+					}
+					break;
+			}
+		}
+
+		if (lastIndex < value.length) {
+			parts.push(value.substring(lastIndex).trim());
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Splits by space while respecting nested parentheses.
+	 *
+	 * @param value Value to split.
+	 * @returns Array of parts.
+	 */
+	public static splitBySpace(value: string): string[] {
+		const parts: string[] = [];
+		const regexp = new RegExp(SPLIT_BY_SPACE_REGEXP);
+		let match: RegExpExecArray | null;
+		let depth = 0;
+		let lastIndex = 0;
+
+		while ((match = regexp.exec(value))) {
+			switch (match[0]) {
+				case '(':
+					depth++;
+					break;
+				case ')':
+					depth--;
+					break;
+				default:
+					if (depth === 0) {
+						const part = value.substring(lastIndex, match.index).trim();
+						if (part) {
+							parts.push(part);
+						}
+						lastIndex = regexp.lastIndex;
+					}
+					break;
+			}
+		}
+
+		if (lastIndex < value.length) {
+			const part = value.substring(lastIndex).trim();
+			if (part) {
+				parts.push(part);
+			}
+		}
+
+		return parts;
+	}
+}

packages/happy-dom/src/nodes/text/Text.ts

@@ -10,7 +10,7 @@ import type HTMLStyleElement from '../html-style-element/HTMLStyleElement.js';
  * Text node.
  */
 export default class Text extends CharacterData {
-	declare public cloneNode: (deep?: boolean) => Text;
+	public declare cloneNode: (deep?: boolean) => Text;
 	public override [PropertySymbol.nodeType] = NodeTypeEnum.textNode;
 	public override [PropertySymbol.textAreaNode]: HTMLTextAreaElement | null = null;
 	public override [PropertySymbol.styleNode]: HTMLStyleElement | null = null;

packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts

@@ -1997,6 +1997,71 @@ describe('CSSStyleDeclaration', () => {
 				'linear-gradient(to right, #111111 0%, #111111 0.5833333333333334rem, #dfdfdf 0.5833333333333334rem, #dfdfdf 100%)'
 			);
 		});
+
+		it('Supports linear-gradient with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.background =
+				'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)';
+
+			expect(declaration.background).toBe(
+				'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)'
+			);
+		});
+
+		it('Supports linear-gradient with mixed color formats.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.background =
+				'linear-gradient(to right, rgba(255, 0, 0, 0.5), #00ff00, hsla(240, 100%, 50%, 0.8))';
+
+			expect(declaration.background).toBe(
+				'linear-gradient(to right, rgba(255, 0, 0, 0.5), #00ff00, hsla(240, 100%, 50%, 0.8))'
+			);
+		});
+
+		it('Supports radial-gradient with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.background =
+				'radial-gradient(circle, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1))';
+
+			expect(declaration.background).toBe(
+				'radial-gradient(circle, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1))'
+			);
+		});
+
+		it('Supports repeating gradients with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.background =
+				'repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0.5) 10px)';
+
+			expect(declaration.background).toBe(
+				'repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0.5) 10px)'
+			);
+		});
+
+		it('Supports conic-gradient with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.background =
+				'conic-gradient(from 90deg, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1))';
+
+			expect(declaration.background).toBe(
+				'conic-gradient(from 90deg, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1))'
+			);
+		});
 	});
 
 	describe('get backgroundImage()', () => {
@@ -2034,6 +2099,45 @@ describe('CSSStyleDeclaration', () => {
 				'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=")'
 			);
 		});
+
+		it('Supports gradients with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.backgroundImage =
+				'radial-gradient(circle, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1))';
+
+			expect(declaration.backgroundImage).toBe(
+				'radial-gradient(circle, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1))'
+			);
+		});
+
+		it('Supports multiple gradients with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.backgroundImage =
+				'linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), radial-gradient(circle, rgba(0, 255, 0, 0.3), rgba(255, 255, 0, 0.3))';
+
+			expect(declaration.backgroundImage).toBe(
+				'linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), radial-gradient(circle, rgba(0, 255, 0, 0.3), rgba(255, 255, 0, 0.3))'
+			);
+		});
+
+		it('Supports URL and gradient combination with rgba() colors.', () => {
+			const declaration = new CSSStyleDeclaration(PropertySymbol.illegalConstructor, window, {
+				element
+			});
+
+			element.style.backgroundImage =
+				'url("test.png"), linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))';
+
+			expect(declaration.backgroundImage).toBe(
+				'url("test.png"), linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))'
+			);
+		});
 	});
 
 	describe('get backgroundColor()', () => {