happy-dom 14.12.3 → 15.1.0

package/src/css/declaration/AbstractCSSStyleDeclaration.ts

@@ -1,12 +1,9 @@
 import Element from '../../nodes/element/Element.js';
-import * as PropertySymbol from '../../PropertySymbol.js';
-import Attr from '../../nodes/attr/Attr.js';
 import CSSRule from '../CSSRule.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
-import DOMException from '../../exception/DOMException.js';
 import CSSStyleDeclarationElementStyle from './element-style/CSSStyleDeclarationElementStyle.js';
 import CSSStyleDeclarationPropertyManager from './property-manager/CSSStyleDeclarationPropertyManager.js';
-import NamedNodeMap from '../../named-node-map/NamedNodeMap.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
 
 /**
  * CSS Style Declaration.
@@ -71,29 +68,17 @@ export default abstract class AbstractCSSStyleDeclaration {
 	 */
 	public set cssText(cssText: string) {
 		if (this.#computed) {
-			throw new DOMException(
+			throw new this[PropertySymbol.window].DOMException(
 				`Failed to execute 'cssText' on 'CSSStyleDeclaration': These styles are computed, and the properties are therefore read-only.`,
 				DOMExceptionNameEnum.domException
 			);
 		}
 
 		if (this.#ownerElement) {
-			const style = new CSSStyleDeclarationPropertyManager({ cssText });
-			let styleAttribute = <Attr>this.#ownerElement[PropertySymbol.attributes]['style'];
-
-			if (!styleAttribute) {
-				styleAttribute = this.#ownerElement[PropertySymbol.ownerDocument].createAttribute('style');
-				// We use "[PropertySymbol.setNamedItemWithoutConsequences]" here to avoid triggering setting "Element.style.cssText" when setting the "style" attribute.
-				(<NamedNodeMap>this.#ownerElement[PropertySymbol.attributes])[
-					PropertySymbol.setNamedItemWithoutConsequences
-				](styleAttribute);
-			}
-
-			if (this.#ownerElement[PropertySymbol.isConnected]) {
-				this.#ownerElement[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
-			}
-
-			styleAttribute[PropertySymbol.value] = style.toString();
+			this.#ownerElement.setAttribute(
+				'style',
+				new CSSStyleDeclarationPropertyManager({ cssText }).toString()
+			);
 		} else {
 			this.#style = new CSSStyleDeclarationPropertyManager({ cssText });
 		}
@@ -121,7 +106,7 @@ export default abstract class AbstractCSSStyleDeclaration {
 	 */
 	public setProperty(name: string, value: string, priority?: 'important' | '' | undefined): void {
 		if (this.#computed) {
-			throw new DOMException(
+			throw new this[PropertySymbol.window].DOMException(
 				`Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the '${name}' property is read-only.`,
 				DOMExceptionNameEnum.domException
 			);
@@ -136,25 +121,10 @@ export default abstract class AbstractCSSStyleDeclaration {
 		if (!stringValue) {
 			this.removeProperty(name);
 		} else if (this.#ownerElement) {
-			let styleAttribute = <Attr>this.#ownerElement[PropertySymbol.attributes]['style'];
-
-			if (!styleAttribute) {
-				styleAttribute = this.#ownerElement[PropertySymbol.ownerDocument].createAttribute('style');
-
-				// We use "[PropertySymbol.setNamedItemWithoutConsequences]" here to avoid triggering setting "Element.style.cssText" when setting the "style" attribute.
-				(<NamedNodeMap>this.#ownerElement[PropertySymbol.attributes])[
-					PropertySymbol.setNamedItemWithoutConsequences
-				](styleAttribute);
-			}
-
-			if (this.#ownerElement[PropertySymbol.isConnected]) {
-				this.#ownerElement[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
-			}
-
 			const style = this.#elementStyle.getElementStyle();
 			style.set(name, stringValue, !!priority);
 
-			styleAttribute[PropertySymbol.value] = style.toString();
+			this.#ownerElement.setAttribute('style', style.toString());
 		} else {
 			this.#style.set(name, stringValue, !!priority);
 		}
@@ -169,7 +139,7 @@ export default abstract class AbstractCSSStyleDeclaration {
 	 */
 	public removeProperty(name: string): void {
 		if (this.#computed) {
-			throw new DOMException(
+			throw new this[PropertySymbol.window].DOMException(
 				`Failed to execute 'removeProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the '${name}' property is read-only.`,
 				DOMExceptionNameEnum.domException
 			);
@@ -180,18 +150,10 @@ export default abstract class AbstractCSSStyleDeclaration {
 			style.remove(name);
 			const newCSSText = style.toString();
 
-			if (this.#ownerElement[PropertySymbol.isConnected]) {
-				this.#ownerElement[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
-			}
-
 			if (newCSSText) {
-				(<Attr>this.#ownerElement[PropertySymbol.attributes]['style'])[PropertySymbol.value] =
-					newCSSText;
+				this.#ownerElement.setAttribute('style', newCSSText);
 			} else {
-				// We use "[PropertySymbol.removeNamedItemWithoutConsequences]" here to avoid triggering setting "Element.style.cssText" when setting the "style" attribute.
-				(<NamedNodeMap>this.#ownerElement[PropertySymbol.attributes])[
-					PropertySymbol.removeNamedItemWithoutConsequences
-				]('style');
+				this.#ownerElement.removeAttribute('style');
 			}
 		} else {
 			this.#style.remove(name);

package/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts

@@ -17,7 +17,7 @@ import CSSStyleDeclarationCSSParser from '../css-parser/CSSStyleDeclarationCSSPa
 import QuerySelector from '../../../query-selector/QuerySelector.js';
 import CSSMeasurementConverter from '../measurement-converter/CSSMeasurementConverter.js';
 import MediaQueryList from '../../../match-media/MediaQueryList.js';
-import WindowBrowserSettingsReader from '../../../window/WindowBrowserSettingsReader.js';
+import WindowBrowserContext from '../../../window/WindowBrowserContext.js';
 
 const CSS_MEASUREMENT_REGEXP = /[0-9.]+(px|rem|em|vw|vh|%|vmin|vmax|cm|mm|in|pt|pc|Q)/g;
 const CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+)\)|var\( *(--[^), ]+), *(.+)\)/;
@@ -31,16 +31,6 @@ type IStyleAndElement = {
  * CSS Style Declaration utility
  */
 export default class CSSStyleDeclarationElementStyle {
-	private cache: {
-		propertyManager: CSSStyleDeclarationPropertyManager;
-		cssText: string;
-		documentCacheID: number;
-	} = {
-		propertyManager: null,
-		cssText: null,
-		documentCacheID: null
-	};
-
 	private element: Element;
 	private computed: boolean;
 
@@ -65,15 +55,26 @@ export default class CSSStyleDeclarationElementStyle {
 			return this.getComputedElementStyle();
 		}
 
-		const cssText = this.element[PropertySymbol.attributes]['style']?.[PropertySymbol.value];
+		const cachedResult = this.element[PropertySymbol.cache].style;
 
-		if (cssText) {
-			if (this.cache.propertyManager && this.cache.cssText === cssText) {
-				return this.cache.propertyManager;
+		if (cachedResult?.result) {
+			const result = cachedResult.result.deref();
+			if (result) {
+				return result;
 			}
-			this.cache.cssText = cssText;
-			this.cache.propertyManager = new CSSStyleDeclarationPropertyManager({ cssText });
-			return this.cache.propertyManager;
+		}
+
+		const cssText =
+			this.element[PropertySymbol.attributes][PropertySymbol.namedItems].get('style')?.[
+				PropertySymbol.value
+			];
+
+		if (cssText) {
+			const propertyManager = new CSSStyleDeclarationPropertyManager({ cssText });
+			this.element[PropertySymbol.cache].style = {
+				result: new WeakRef(propertyManager)
+			};
+			return propertyManager;
 		}
 
 		return new CSSStyleDeclarationPropertyManager();
@@ -98,15 +99,14 @@ export default class CSSStyleDeclarationElementStyle {
 			return new CSSStyleDeclarationPropertyManager();
 		}
 
-		if (
-			this.cache.propertyManager &&
-			this.cache.documentCacheID ===
-				this.element[PropertySymbol.ownerDocument][PropertySymbol.cacheID]
-		) {
-			return this.cache.propertyManager;
-		}
+		const cacheResult = this.element[PropertySymbol.cache].computedStyle;
 
-		this.cache.documentCacheID = this.element[PropertySymbol.ownerDocument][PropertySymbol.cacheID];
+		if (cacheResult?.result) {
+			const result = cacheResult.result.deref();
+			if (result) {
+				return result;
+			}
+		}
 
 		// Walks through all parent elements and stores them in an array with element and matching CSS text.
 		while (styleAndElement.element) {
@@ -245,8 +245,8 @@ export default class CSSStyleDeclarationElementStyle {
 			}
 
 			const elementStyleAttribute = (<Element>parentElement.element)[PropertySymbol.attributes][
-				'style'
-			];
+				PropertySymbol.namedItems
+			].get('style');
 
 			if (elementStyleAttribute) {
 				elementCSSText += elementStyleAttribute[PropertySymbol.value];
@@ -302,7 +302,14 @@ export default class CSSStyleDeclarationElementStyle {
 			}
 		}
 
-		this.cache.propertyManager = propertyManager;
+		const cachedResult = {
+			result: new WeakRef(propertyManager)
+		};
+
+		this.element[PropertySymbol.cache].computedStyle = cachedResult;
+		this.element[PropertySymbol.ownerDocument][PropertySymbol.affectsComputedStyleCache].push(
+			cachedResult
+		);
 
 		return propertyManager;
 	}
@@ -326,7 +333,7 @@ export default class CSSStyleDeclarationElementStyle {
 			return;
 		}
 
-		const ownerWindow = this.element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
+		const window = this.element[PropertySymbol.window];
 
 		for (const rule of options.cssRules) {
 			if (rule.type === CSSRuleTypeEnum.styleRule) {
@@ -364,7 +371,7 @@ export default class CSSStyleDeclarationElementStyle {
 				rule.type === CSSRuleTypeEnum.mediaRule &&
 				// TODO: We need to send in a predfined root font size as it will otherwise be calculated using Window.getComputedStyle(), which will cause a never ending loop. Is there another solution?
 				new MediaQueryList({
-					ownerWindow,
+					window,
 					media: (<CSSMediaRule>rule).conditionText,
 					rootFontSize: this.element[PropertySymbol.tagName] === 'HTML' ? 16 : null
 				}).matches
@@ -418,9 +425,8 @@ export default class CSSStyleDeclarationElementStyle {
 		parentSize: string | number | null;
 	}): string {
 		if (
-			WindowBrowserSettingsReader.getSettings(
-				this.element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow]
-			).disableComputedStyleRendering
+			new WindowBrowserContext(this.element[PropertySymbol.window]).getSettings()
+				?.disableComputedStyleRendering
 		) {
 			return options.value;
 		}
@@ -432,7 +438,7 @@ export default class CSSStyleDeclarationElementStyle {
 		while ((match = regexp.exec(options.value)) !== null) {
 			if (match[1] !== 'px') {
 				const valueInPixels = CSSMeasurementConverter.toPixels({
-					ownerWindow: this.element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow],
+					window: this.element[PropertySymbol.window],
 					value: match[0],
 					rootFontSize: options.rootFontSize,
 					parentFontSize: options.parentFontSize,

package/src/css/declaration/measurement-converter/CSSMeasurementConverter.ts

@@ -8,7 +8,7 @@ export default class CSSMeasurementConverter {
 	 * Returns measurement in pixels.
 	 *
 	 * @param options Options.
-	 * @param options.ownerWindow Owner window.
+	 * @param options.window Owner window.
 	 * @param options.value Measurement (e.g. "10px", "10rem" or "10em").
 	 * @param options.rootFontSize Root font size in pixels.
 	 * @param options.parentFontSize Parent font size in pixels.
@@ -16,7 +16,7 @@ export default class CSSMeasurementConverter {
 	 * @returns Measurement in pixels.
 	 */
 	public static toPixels(options: {
-		ownerWindow: BrowserWindow;
+		window: BrowserWindow;
 		value: string;
 		rootFontSize: string | number;
 		parentFontSize: string | number;
@@ -37,21 +37,19 @@ export default class CSSMeasurementConverter {
 			case 'em':
 				return this.round(value * parseFloat(<string>options.parentFontSize));
 			case 'vw':
-				return this.round((value * options.ownerWindow.innerWidth) / 100);
+				return this.round((value * options.window.innerWidth) / 100);
 			case 'vh':
-				return this.round((value * options.ownerWindow.innerHeight) / 100);
+				return this.round((value * options.window.innerHeight) / 100);
 			case '%':
 				return options.parentSize !== undefined && options.parentSize !== null
 					? this.round((value * parseFloat(<string>options.parentSize)) / 100)
 					: null;
 			case 'vmin':
 				return this.round(
-					(value * Math.min(options.ownerWindow.innerWidth, options.ownerWindow.innerHeight)) / 100
+					(value * Math.min(options.window.innerWidth, options.window.innerHeight)) / 100
 				);
 			case 'vmax':
-				return (
-					(value * Math.max(options.ownerWindow.innerWidth, options.ownerWindow.innerHeight)) / 100
-				);
+				return (value * Math.max(options.window.innerWidth, options.window.innerHeight)) / 100;
 			case 'cm':
 				return this.round(value * 37.7812);
 			case 'mm':

package/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts

@@ -2,7 +2,8 @@ import CSSStyleDeclarationValueParser from './CSSStyleDeclarationValueParser.js'
 import ICSSStyleDeclarationPropertyValue from './ICSSStyleDeclarationPropertyValue.js';
 
 const RECT_REGEXP = /^rect\((.*)\)$/i;
-const SPLIT_PARTS_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
+const SPLIT_COMMA_SEPARATED_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
+const SPLIT_SPACE_SEPARATED_REGEXP = /\s+(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on spaces that are outside of parentheses
 const BORDER_STYLE = [
 	'none',
 	'hidden',
@@ -496,7 +497,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getOutlineWidth('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getOutlineWidth(part, important);
@@ -648,7 +649,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderImage('initial', important)
 		};
 
-		const parts = value.replace(/ *, */g, ',').split(/ +/);
+		const parts = value.replace(/\s*,\s*/g, ',').split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderWidth(part, important);
@@ -694,7 +695,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getBorderTopWidth(parts[0], important);
 		const right = this.getBorderRightWidth(parts[1] || parts[0], important);
 		const bottom = this.getBorderBottomWidth(parts[2] || parts[0], important);
@@ -740,7 +741,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getBorderTopStyle(parts[0], important);
 		const right = this.getBorderRightStyle(parts[1] || parts[0], important);
 		const bottom = this.getBorderBottomStyle(parts[2] || parts[0], important);
@@ -787,7 +788,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getBorderTopColor(parts[0], important);
 		const right = this.getBorderRightColor(parts[1] || parts[0], important);
 		const bottom = this.getBorderBottomColor(parts[2] || parts[0], important);
@@ -835,14 +836,14 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		let parsedValue = value.replace(/[ ]*\/[ ]*/g, '/');
-		const sourceMatch = parsedValue.match(/ *([a-zA-Z-]+\([^)]*\)) */);
+		let parsedValue = value.replace(/\s\/\s/g, '/');
+		const sourceMatch = parsedValue.match(/\s*([a-zA-Z-]+\([^)]*\))\s*/);
 
 		if (sourceMatch) {
 			parsedValue = parsedValue.replace(sourceMatch[0], '');
 		}
 
-		const parts = parsedValue.split(/ +/);
+		const parts = parsedValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (sourceMatch) {
 			parts.push(sourceMatch[1]);
@@ -1037,7 +1038,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = lowerValue.split(/ +/);
+		const parts = lowerValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (parts.length > 4) {
 			return null;
@@ -1073,6 +1074,15 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
+		if (value === '0') {
+			return {
+				'border-image-outset': {
+					important,
+					value
+				}
+			};
+		}
+
 		const variable = CSSStyleDeclarationValueParser.getVariable(value);
 		if (variable) {
 			return { 'border-image-outset': { value: variable, important } };
@@ -1089,25 +1099,28 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (parts.length > 4) {
 			return null;
 		}
 
+		const newParts = [];
+
 		for (const part of parts) {
-			if (
-				!CSSStyleDeclarationValueParser.getLength(part) &&
-				!CSSStyleDeclarationValueParser.getFloat(part)
-			) {
+			const parsedValue =
+				CSSStyleDeclarationValueParser.getLength(part) ||
+				CSSStyleDeclarationValueParser.getFloat(part);
+			if (!parsedValue) {
 				return null;
 			}
+			newParts.push(parsedValue === '0px' ? '0' : parsedValue);
 		}
 
 		return {
 			'border-image-outset': {
 				important,
-				value
+				value: newParts.join(' ')
 			}
 		};
 	}
@@ -1141,7 +1154,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = lowerValue.split(/ +/);
+		const parts = lowerValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (parts.length > 2) {
 			return null;
@@ -1532,7 +1545,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const topLeft = this.getBorderTopLeftRadius(parts[0], important);
 		const topRight = this.getBorderTopRightRadius(parts[1] || parts[0], important);
 		const bottomRight = this.getBorderBottomRightRadius(parts[2] || parts[0], important);
@@ -1670,7 +1683,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderTopColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderTopWidth(part, important);
@@ -1719,7 +1732,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderRightColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderRightWidth(part, important);
@@ -1768,7 +1781,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderBottomColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderBottomWidth(part, important);
@@ -1817,7 +1830,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderLeftColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderLeftWidth(part, important);
@@ -1860,7 +1873,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getPaddingTop(parts[0], important);
 		const right = this.getPaddingRight(parts[1] || parts[0], important);
 		const bottom = this.getPaddingBottom(parts[2] || parts[0], important);
@@ -1993,7 +2006,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getMarginTop(parts[0], important);
 		const right = this.getMarginRight(parts[1] || parts[0], important);
 		const bottom = this.getMarginBottom(parts[2] || parts[0], important);
@@ -2151,7 +2164,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const flexGrow = this.getFlexGrow(parts[0], important);
 		const flexShrink = this.getFlexShrink(parts[1] || '1', important);
 		const flexBasis = this.getFlexBasis(parts[2] || '0%', important);
@@ -2285,9 +2298,9 @@ export default class CSSStyleDeclarationPropertySetParser {
 		};
 
 		const parts = value
-			.replace(/[ ]*,[ ]*/g, ',')
-			.replace(/[ ]*\/[ ]*/g, '/')
-			.split(/ +/);
+			.replace(/\s,\s/g, ',')
+			.replace(/\s\/\s/g, '/')
+			.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		const backgroundPositions = [];
 
@@ -2384,7 +2397,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-size': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+		const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		const parsed = [];
 
 		for (const imagePart of imageParts) {
@@ -2555,12 +2568,12 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const imageParts = value.split(SPLIT_PARTS_REGEXP);
+		const imageParts = value.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		let x = '';
 		let y = '';
 
 		for (const imagePart of imageParts) {
-			const parts = imagePart.trim().split(/ +/);
+			const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 			if (x) {
 				x += ',';
@@ -2668,11 +2681,11 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-x': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+		const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
-			const parts = imagePart.trim().split(/ +/);
+			const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 			if (parsedValue) {
 				parsedValue += ',';
@@ -2719,11 +2732,11 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-y': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+		const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
-			const parts = imagePart.trim().split(/ +/);
+			const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 			if (parsedValue) {
 				parsedValue += ',';
@@ -2795,15 +2808,17 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-image': { value: lowerValue, important } };
 		}
 
-		const parts = value.split(SPLIT_PARTS_REGEXP);
+		const parts = value.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		const parsed = [];
 
 		for (const part of parts) {
-			const url = CSSStyleDeclarationValueParser.getURL(part.trim());
-			if (!url) {
+			const parsedValue =
+				CSSStyleDeclarationValueParser.getURL(part.trim()) ||
+				CSSStyleDeclarationValueParser.getGradient(part.trim());
+			if (!parsedValue) {
 				return null;
 			}
-			parsed.push(url);
+			parsed.push(parsedValue);
 		}
 
 		if (parsed.length) {
@@ -2902,7 +2917,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getLineHeight('normal', important)
 		};
 
-		const parts = value.replace(/ *\/ */g, '/').split(/ +/);
+		const parts = value.replace(/\s*\/\s*/g, '/').split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (let i = 0, max = parts.length; i < max; i++) {
 			const part = parts[i];
@@ -2970,7 +2985,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 		if (CSSStyleDeclarationValueParser.getGlobal(lowerValue) || FONT_STYLE.includes(lowerValue)) {
 			return { 'font-style': { value: lowerValue, important } };
 		}
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		if (parts.length === 2 && parts[0] === 'oblique') {
 			const degree = CSSStyleDeclarationValueParser.getDegree(parts[1]);
 			return degree ? { 'font-style': { value: lowerValue, important } } : null;