happy-dom 10.3.2 → 10.5.0

package/src/css/declaration/css-parser/CSSStyleDeclarationCSSParser.ts

@@ -1,3 +1,10 @@
+// PropName   => \s*([^:;]+?)\s*:
+// PropValue  => \s*((?:[^(;]*?(?:\([^)]*\))?)*?) <- will match any non ';' char except inside (), nested parentheses are not supported
+// !important => \s*(!important)?
+// EndOfRule  => \s*(?:$|;)
+const SPLIT_RULES_REGEXP =
+	/\s*([^:;]+?)\s*:\s*((?:[^(;]*?(?:\([^)]*\))?)*?)\s*(!important)?\s*(?:$|;)/g;
+
 /**
  * CSS parser.
  */
@@ -12,23 +19,10 @@ export default class CSSStyleDeclarationCSSParser {
 		cssText: string,
 		callback: (name: string, value: string, important: boolean) => void
 	): void {
-		const parts = cssText.split(';');
-
-		for (const part of parts) {
-			if (part) {
-				const [name, value]: string[] = part.trim().split(':');
-				if (value) {
-					const trimmedName = name.trim();
-					const trimmedValue = value.trim();
-					if (trimmedName && trimmedValue) {
-						const important = trimmedValue.endsWith(' !important');
-						const valueWithoutImportant = trimmedValue.replace(' !important', '');
-
-						if (valueWithoutImportant) {
-							callback(trimmedName, valueWithoutImportant, important);
-						}
-					}
-				}
+		const rules = Array.from(cssText.matchAll(SPLIT_RULES_REGEXP));
+		for (const [, key, value, important] of rules) {
+			if (key && value) {
+				callback(key.trim(), value.trim(), !!important);
 			}
 		}
 	}

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

@@ -2,6 +2,7 @@ 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 BORDER_STYLE = [
 	'none',
 	'hidden',
@@ -2383,7 +2384,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-size': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(',');
+		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
 		const parsed = [];
 
 		for (const imagePart of imageParts) {
@@ -2554,7 +2555,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const imageParts = value.replace(/ *, */g, ',').split(',');
+		const imageParts = value.split(SPLIT_PARTS_REGEXP);
 		let x = '';
 		let y = '';
 
@@ -2667,7 +2668,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-x': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.replace(/ *, */g, ',').split(',');
+		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
@@ -2718,7 +2719,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-y': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.replace(/ *, */g, ',').split(',');
+		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
@@ -2794,7 +2795,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-image': { value: lowerValue, important } };
 		}
 
-		const parts = value.replace(/ *, */g, ',').split(',');
+		const parts = value.split(SPLIT_PARTS_REGEXP);
 		const parsed = [];
 
 		for (const part of parts) {

package/src/event/events/IMouseEventInit.ts

@@ -10,6 +10,8 @@ export default interface IMouseEventInit extends IUIEventInit {
 	shiftKey?: boolean;
 	altKey?: boolean;
 	metaKey?: boolean;
+	movementX?: number;
+	movementY?: number;
 	button?: number;
 	buttons?: number;
 	relatedTarget?: EventTarget;

package/src/event/events/MouseEvent.ts

@@ -40,6 +40,8 @@ export default class MouseEvent extends UIEvent {
 			this.clientY = eventInit.clientY !== undefined ? eventInit.clientY : 0;
 			this.ctrlKey = eventInit.ctrlKey || false;
 			this.metaKey = eventInit.metaKey || false;
+			this.movementX = eventInit.movementX || 0;
+			this.movementY = eventInit.movementY || 0;
 			this.region = eventInit.region || '';
 			this.relatedTarget = eventInit.relatedTarget || null;
 			this.screenX = eventInit.screenX !== undefined ? eventInit.screenX : 0;