happy-dom 14.12.3 → 15.1.0

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

@@ -2,17 +2,17 @@ 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*)?\)/;
 
 const LENGTH_REGEXP =
-	/^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch|vw|vh|vmin|vmax|Q))$/;
+	/^(0|[-+]?[0-9]*\.?[0-9]+)(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch|vw|vh|vmin|vmax|Q)$/;
 const PERCENTAGE_REGEXP = /^[-+]?[0-9]*\.?[0-9]+%$/;
 const DEGREE_REGEXP = /^[0-9]+deg$/;
 const URL_REGEXP = /^url\(\s*([^)]*)\s*\)$/;
 const INTEGER_REGEXP = /^[0-9]+$/;
 const FLOAT_REGEXP = /^[0-9.]+$/;
 const CALC_REGEXP = /^calc\([^^)]+\)$/;
-const CSS_VARIABLE_REGEXP = /^var\( *(--[^) ]+)\)$/;
+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',
@@ -182,8 +182,14 @@ export default class CSSStyleDeclarationValueParser {
 		if (value === '0') {
 			return '0px';
 		}
-		if (LENGTH_REGEXP.test(value)) {
-			return value;
+		const match = value.match(LENGTH_REGEXP);
+		if (match) {
+			const number = parseFloat(match[1]);
+			if (isNaN(number)) {
+				return null;
+			}
+			const unit = match[2];
+			return `${Math.round(number * 1000000) / 1000000}${unit}`;
 		}
 		return null;
 	}
@@ -309,7 +315,11 @@ export default class CSSStyleDeclarationValueParser {
 	 */
 	public static getFloat(value: string): string {
 		if (FLOAT_REGEXP.test(value)) {
-			return value;
+			const number = parseFloat(value);
+			if (isNaN(number)) {
+				return null;
+			}
+			return String(Math.round(number * 1000000) / 1000000);
 		}
 		return null;
 	}
@@ -321,8 +331,12 @@ export default class CSSStyleDeclarationValueParser {
 	 * @returns Parsed value.
 	 */
 	public static getGradient(value: string): string {
-		if (GRADIENT_REGEXP.test(value)) {
-			return value;
+		const match = value.match(GRADIENT_REGEXP);
+		if (match) {
+			return `${match[1]}(${match[3]
+				.trim()
+				.split(/\s*,\s*/)
+				.join(', ')})`;
 		}
 		return null;
 	}
@@ -368,7 +382,7 @@ export default class CSSStyleDeclarationValueParser {
 			return null;
 		}
 
-		let url = result[1];
+		let url = result[1].trim();
 
 		if ((url[0] === '"' || url[0] === "'") && url[0] !== url[url.length - 1]) {
 			return null;

package/src/custom-element/CustomElementRegistry.ts

@@ -1,4 +1,3 @@
-import DOMException from '../exception/DOMException.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import HTMLElement from '../nodes/html-element/HTMLElement.js';
 import Node from '../nodes/node/Node.js';
@@ -13,7 +12,8 @@ export default class CustomElementRegistry {
 		[k: string]: { elementClass: typeof HTMLElement; extends: string };
 	} = {};
 	public [PropertySymbol.registedClass]: Map<typeof HTMLElement, string> = new Map();
-	public [PropertySymbol.callbacks]: { [k: string]: (() => void)[] } = {};
+	public [PropertySymbol.callbacks]: Map<string, Array<() => void>> = new Map();
+	public [PropertySymbol.destroyed]: boolean = false;
 	#window: BrowserWindow;
 
 	/**
@@ -22,6 +22,9 @@ export default class CustomElementRegistry {
 	 * @param window Window.
 	 */
 	constructor(window: BrowserWindow) {
+		if (!window) {
+			throw new TypeError('Illegal constructor');
+		}
 		this.#window = window;
 	}
 
@@ -38,30 +41,35 @@ export default class CustomElementRegistry {
 		elementClass: typeof HTMLElement,
 		options?: { extends?: string }
 	): void {
+		if (this[PropertySymbol.destroyed]) {
+			return;
+		}
+
 		if (!this.#isValidCustomElementName(name)) {
-			throw new DOMException(
+			throw new this.#window.DOMException(
 				`Failed to execute 'define' on 'CustomElementRegistry': "${name}" is not a valid custom element name`
 			);
 		}
 
 		if (this[PropertySymbol.registry][name]) {
-			throw new DOMException(
+			throw new this.#window.DOMException(
 				`Failed to execute 'define' on 'CustomElementRegistry': the name "${name}" has already been used with this registry`
 			);
 		}
 
 		if (this[PropertySymbol.registedClass].has(elementClass)) {
-			throw new DOMException(
+			throw new this.#window.DOMException(
 				"Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry"
 			);
 		}
 
 		const tagName = name.toUpperCase();
 
-		elementClass[PropertySymbol.ownerDocument] = this.#window.document;
-		elementClass[PropertySymbol.tagName] = tagName;
-		elementClass[PropertySymbol.localName] = name;
-		elementClass[PropertySymbol.namespaceURI] = NamespaceURI.html;
+		elementClass.prototype[PropertySymbol.window] = this.#window;
+		elementClass.prototype[PropertySymbol.ownerDocument] = this.#window.document;
+		elementClass.prototype[PropertySymbol.tagName] = tagName;
+		elementClass.prototype[PropertySymbol.localName] = name;
+		elementClass.prototype[PropertySymbol.namespaceURI] = NamespaceURI.html;
 
 		this[PropertySymbol.registry][name] = {
 			elementClass,
@@ -70,13 +78,13 @@ export default class CustomElementRegistry {
 		this[PropertySymbol.registedClass].set(elementClass, name);
 
 		// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
-		if (elementClass.prototype.attributeChangedCallback) {
-			elementClass[PropertySymbol.observedAttributes] = elementClass.observedAttributes;
-		}
+		elementClass[PropertySymbol.observedAttributes] = (elementClass.observedAttributes || []).map(
+			(name) => String(name).toLowerCase()
+		);
 
-		if (this[PropertySymbol.callbacks][name]) {
-			const callbacks = this[PropertySymbol.callbacks][name];
-			delete this[PropertySymbol.callbacks][name];
+		const callbacks = this[PropertySymbol.callbacks].get(name);
+		if (callbacks) {
+			this[PropertySymbol.callbacks].delete(name);
 			for (const callback of callbacks) {
 				callback();
 			}
@@ -110,15 +118,30 @@ export default class CustomElementRegistry {
 	 * @param name Tag name of element.
 	 */
 	public whenDefined(name: string): Promise<void> {
+		if (this[PropertySymbol.destroyed]) {
+			return Promise.reject(
+				new this.#window.DOMException(
+					`Failed to execute 'whenDefined' on 'CustomElementRegistry': The custom element registry has been destroyed.`
+				)
+			);
+		}
 		if (!this.#isValidCustomElementName(name)) {
-			return Promise.reject(new DOMException(`Invalid custom element name: "${name}"`));
+			return Promise.reject(
+				new this.#window.DOMException(
+					`Failed to execute 'whenDefined' on 'CustomElementRegistry': Invalid custom element name: "${name}"`
+				)
+			);
 		}
 		if (this.get(name)) {
 			return Promise.resolve();
 		}
 		return new Promise((resolve) => {
-			this[PropertySymbol.callbacks][name] = this[PropertySymbol.callbacks][name] || [];
-			this[PropertySymbol.callbacks][name].push(resolve);
+			const callbacks: Array<() => void> = this[PropertySymbol.callbacks].get(name);
+			if (callbacks) {
+				callbacks.push(resolve);
+			} else {
+				this[PropertySymbol.callbacks].set(name, [resolve]);
+			}
 		});
 	}
 
@@ -136,12 +159,17 @@ export default class CustomElementRegistry {
 	 * Destroys the registry.
 	 */
 	public [PropertySymbol.destroy](): void {
+		this[PropertySymbol.destroyed] = true;
 		for (const entity of Object.values(this[PropertySymbol.registry])) {
-			entity.elementClass[PropertySymbol.ownerDocument] = null;
+			entity.elementClass.prototype[PropertySymbol.window] = null;
+			entity.elementClass.prototype[PropertySymbol.ownerDocument] = null;
+			entity.elementClass.prototype[PropertySymbol.tagName] = null;
+			entity.elementClass.prototype[PropertySymbol.localName] = null;
+			entity.elementClass.prototype[PropertySymbol.namespaceURI] = null;
 		}
 		this[PropertySymbol.registry] = {};
 		this[PropertySymbol.registedClass] = new Map();
-		this[PropertySymbol.callbacks] = {};
+		this[PropertySymbol.callbacks] = new Map();
 	}
 
 	/**

package/src/dom-implementation/DOMImplementation.ts

@@ -12,26 +12,34 @@ export default class DOMImplementation {
 	/**
 	 * Constructor.
 	 *
-	 * @param window Window.
+	 * @param document Document.
 	 */
-	constructor(window: Document) {
-		this.#document = window;
+	constructor(document: Document) {
+		this.#document = document;
 	}
 
 	/**
 	 * Creates and returns an XML Document.
 	 *
 	 * TODO: Not fully implemented.
+	 *
+	 * @param _namespaceURI Namespace URI.
+	 * @param _qualifiedName Qualified name.
+	 * @param [_docType] Document type.
 	 */
-	public createDocument(): Document {
-		return new this.#document[PropertySymbol.ownerWindow].HTMLDocument();
+	public createDocument(
+		_namespaceURI: string,
+		_qualifiedName: string,
+		_docType?: string
+	): Document {
+		return new this.#document[PropertySymbol.window].HTMLDocument();
 	}
 
 	/**
 	 * Creates and returns an HTML Document.
 	 */
 	public createHTMLDocument(): Document {
-		return new this.#document[PropertySymbol.ownerWindow].HTMLDocument();
+		return new this.#document[PropertySymbol.window].HTMLDocument();
 	}
 
 	/**
@@ -46,13 +54,12 @@ export default class DOMImplementation {
 		publicId: string,
 		systemId: string
 	): DocumentType {
-		const documentType = NodeFactory.createNode<DocumentType>(
-			this.#document,
-			this.#document[PropertySymbol.ownerWindow].DocumentType
-		);
+		const documentType = NodeFactory.createNode<DocumentType>(this.#document, DocumentType);
+
 		documentType[PropertySymbol.name] = qualifiedName;
 		documentType[PropertySymbol.publicId] = publicId;
 		documentType[PropertySymbol.systemId] = systemId;
+
 		return documentType;
 	}
 }

package/src/dom-parser/DOMParser.ts

@@ -1,7 +1,6 @@
 import Document from '../nodes/document/Document.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import XMLParser from '../xml-parser/XMLParser.js';
-import DOMException from '../exception/DOMException.js';
 import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
 import BrowserWindow from '../window/BrowserWindow.js';
 import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
@@ -13,16 +12,8 @@ import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/DOMParser.
  */
 export default class DOMParser {
-	readonly #window: BrowserWindow;
-
-	/**
-	 * Constructor.
-	 *
-	 * @param window Window.
-	 */
-	constructor(window: BrowserWindow) {
-		this.#window = window;
-	}
+	// Injected by WindowClassExtender
+	protected declare [PropertySymbol.window]: BrowserWindow;
 
 	/**
 	 * Parses HTML and returns a root element.
@@ -33,19 +24,23 @@ export default class DOMParser {
 	 */
 	public parseFromString(string: string, mimeType: string): Document {
 		if (!mimeType) {
-			throw new DOMException('Second parameter "mimeType" is mandatory.');
+			throw new this[PropertySymbol.window].DOMException(
+				'Second parameter "mimeType" is mandatory.'
+			);
 		}
 
 		const newDocument = <Document>this.#createDocument(mimeType);
+		const documentChildNodes = newDocument[PropertySymbol.nodeArray];
 
-		newDocument[PropertySymbol.childNodes].length = 0;
-		newDocument[PropertySymbol.children].length = 0;
+		while (documentChildNodes.length) {
+			newDocument.removeChild(documentChildNodes[0]);
+		}
 
 		const root = <DocumentFragment>XMLParser.parse(newDocument, string, { evaluateScripts: true });
 		let documentElement = null;
 		let documentTypeNode = null;
 
-		for (const node of root[PropertySymbol.childNodes]) {
+		for (const node of root[PropertySymbol.nodeArray]) {
 			if (node['tagName'] === 'HTML') {
 				documentElement = node;
 			} else if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentTypeNode) {
@@ -64,16 +59,16 @@ export default class DOMParser {
 			newDocument.appendChild(documentElement);
 			const body = newDocument.body;
 			if (body) {
-				for (const child of root[PropertySymbol.childNodes].slice()) {
-					body.appendChild(child);
+				while (root[PropertySymbol.nodeArray].length) {
+					body.appendChild(root[PropertySymbol.nodeArray][0]);
 				}
 			}
 		} else {
 			switch (mimeType) {
 				case 'image/svg+xml':
 					{
-						for (const node of root[PropertySymbol.childNodes].slice()) {
-							newDocument.appendChild(node);
+						while (root[PropertySymbol.nodeArray].length) {
+							newDocument.appendChild(root[PropertySymbol.nodeArray][0]);
 						}
 					}
 					break;
@@ -88,8 +83,8 @@ export default class DOMParser {
 						documentElement.appendChild(bodyElement);
 						newDocument.appendChild(documentElement);
 
-						for (const node of root[PropertySymbol.childNodes].slice()) {
-							bodyElement.appendChild(node);
+						while (root[PropertySymbol.nodeArray].length) {
+							bodyElement.appendChild(root[PropertySymbol.nodeArray][0]);
 						}
 					}
 					break;
@@ -105,17 +100,19 @@ export default class DOMParser {
 	 * @returns Document.
 	 */
 	#createDocument(mimeType: string): Document {
+		const window = this[PropertySymbol.window];
+
 		switch (mimeType) {
 			case 'text/html':
-				return new this.#window.HTMLDocument();
+				return new window.HTMLDocument();
 			case 'image/svg+xml':
-				return new this.#window.SVGDocument();
+				return new window.SVGDocument();
 			case 'text/xml':
 			case 'application/xml':
 			case 'application/xhtml+xml':
-				return new this.#window.XMLDocument();
+				return new window.XMLDocument();
 			default:
-				throw new DOMException(`Unknown mime type "${mimeType}".`);
+				throw new window.DOMException(`Unknown mime type "${mimeType}".`);
 		}
 	}
 }

package/src/event/Event.ts

@@ -12,18 +12,19 @@ import Document from '../nodes/document/Document.js';
  * Event.
  */
 export default class Event {
-	public composed: boolean;
-	public bubbles: boolean;
-	public cancelable: boolean;
-	public defaultPrevented = false;
-	public eventPhase: EventPhaseEnum = EventPhaseEnum.none;
-	public timeStamp: number = performance.now();
-	public type: string;
 	public NONE = EventPhaseEnum.none;
 	public CAPTURING_PHASE = EventPhaseEnum.capturing;
 	public AT_TARGET = EventPhaseEnum.atTarget;
 	public BUBBLING_PHASE = EventPhaseEnum.bubbling;
 
+	public [PropertySymbol.composed] = false;
+	public [PropertySymbol.bubbles] = false;
+	public [PropertySymbol.cancelable] = false;
+	public [PropertySymbol.defaultPrevented] = false;
+	public [PropertySymbol.eventPhase] = EventPhaseEnum.none;
+	public [PropertySymbol.timeStamp] = performance.now();
+	public [PropertySymbol.type]: string;
+
 	public [PropertySymbol.immediatePropagationStopped] = false;
 	public [PropertySymbol.propagationStopped] = false;
 	public [PropertySymbol.target]: EventTarget = null;
@@ -37,11 +38,73 @@ export default class Event {
 	 * @param [eventInit] Event init.
 	 */
 	constructor(type: string, eventInit: IEventInit | null = null) {
-		this.type = type;
+		this[PropertySymbol.type] = type;
+		this[PropertySymbol.bubbles] = eventInit?.bubbles ?? false;
+		this[PropertySymbol.cancelable] = eventInit?.cancelable ?? false;
+		this[PropertySymbol.composed] = eventInit?.composed ?? false;
+	}
+
+	/**
+	 * Returns composed.
+	 *
+	 * @returns Composed.
+	 */
+	public get composed(): boolean {
+		return this[PropertySymbol.composed];
+	}
 
-		this.bubbles = eventInit?.bubbles ?? false;
-		this.cancelable = eventInit?.cancelable ?? false;
-		this.composed = eventInit?.composed ?? false;
+	/**
+	 * Returns bubbles.
+	 *
+	 * @returns Bubbles.
+	 */
+	public get bubbles(): boolean {
+		return this[PropertySymbol.bubbles];
+	}
+
+	/**
+	 * Returns cancelable.
+	 *
+	 * @returns Cancelable.
+	 */
+	public get cancelable(): boolean {
+		return this[PropertySymbol.cancelable];
+	}
+
+	/**
+	 * Returns defaultPrevented.
+	 *
+	 * @returns Default prevented.
+	 */
+	public get defaultPrevented(): boolean {
+		return this[PropertySymbol.defaultPrevented];
+	}
+
+	/**
+	 * Returns eventPhase.
+	 *
+	 * @returns Event phase.
+	 */
+	public get eventPhase(): EventPhaseEnum {
+		return this[PropertySymbol.eventPhase];
+	}
+
+	/**
+	 * Returns timeStamp.
+	 *
+	 * @returns Time stamp.
+	 */
+	public get timeStamp(): number {
+		return this[PropertySymbol.timeStamp];
+	}
+
+	/**
+	 * Returns type.
+	 *
+	 * @returns Type.
+	 */
+	public get type(): string {
+		return this[PropertySymbol.type];
 	}
 
 	/**
@@ -92,13 +155,17 @@ export default class Event {
 			if ((<Node>(<unknown>eventTarget)).parentNode) {
 				eventTarget = (<Node>(<unknown>eventTarget)).parentNode;
 			} else if (
-				this.composed &&
+				this[PropertySymbol.composed] &&
 				(<Node>eventTarget)[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode &&
 				(<ShadowRoot>eventTarget).host
 			) {
 				eventTarget = (<ShadowRoot>eventTarget).host;
-			} else if ((<Node>eventTarget)[PropertySymbol.nodeType] === NodeTypeEnum.documentNode) {
-				eventTarget = (<Document>(<unknown>eventTarget))[PropertySymbol.ownerWindow];
+			} else if (
+				(<Node>eventTarget)[PropertySymbol.nodeType] === NodeTypeEnum.documentNode &&
+				// The "load" event is a special case. It should not bubble up to the window.
+				this[PropertySymbol.type] !== 'load'
+			) {
+				eventTarget = (<Document>(<unknown>eventTarget))[PropertySymbol.window];
 			} else {
 				break;
 			}
@@ -116,17 +183,17 @@ export default class Event {
 	 * @param [cancelable=false] "true" if it cancelable.
 	 */
 	public initEvent(type: string, bubbles = false, cancelable = false): void {
-		this.type = type;
-		this.bubbles = bubbles;
-		this.cancelable = cancelable;
+		this[PropertySymbol.type] = type;
+		this[PropertySymbol.bubbles] = bubbles;
+		this[PropertySymbol.cancelable] = cancelable;
 	}
 
 	/**
 	 * Prevents default.
 	 */
 	public preventDefault(): void {
-		if (!this[PropertySymbol.isInPassiveEventListener]) {
-			this.defaultPrevented = true;
+		if (!this[PropertySymbol.isInPassiveEventListener] && this.cancelable) {
+			this[PropertySymbol.defaultPrevented] = true;
 		}
 	}