happy-dom 2.24.5 → 2.25.0

package/src/nodes/document/IDocument.ts

@@ -23,6 +23,7 @@ export default interface IDocument extends IParentNode {
 	readonly doctype: IDocumentType;
 	readonly body: IHTMLElement;
 	readonly head: IHTMLElement;
+	readonly activeElement: IHTMLElement;
 
 	/**
 	 * Replaces the document HTML with new HTML.

package/src/nodes/document-fragment/DocumentFragment.ts

@@ -13,6 +13,7 @@ import HTMLCollectionFactory from '../element/HTMLCollectionFactory';
 export default class DocumentFragment extends Node implements IDocumentFragment {
 	public nodeType = Node.DOCUMENT_FRAGMENT_NODE;
 	public readonly children: IHTMLCollection<IElement> = HTMLCollectionFactory.create();
+	public _rootNode: INode = this;
 
 	/**
 	 * Last element child.

package/src/nodes/element/Element.ts

@@ -598,7 +598,7 @@ export default class Element extends Node implements IElement {
 		(<IDocument>this.shadowRoot.ownerDocument) = this.ownerDocument;
 		(<Element>this.shadowRoot.host) = this;
 		(<string>this.shadowRoot.mode) = shadowRootInit.mode;
-		this.shadowRoot.isConnected = this.isConnected;
+		(<ShadowRoot>this.shadowRoot)._connectToNode(this);
 		return this.shadowRoot;
 	}
 
@@ -636,7 +636,46 @@ export default class Element extends Node implements IElement {
 	 * @returns "true" if matching.
 	 */
 	public matches(selector: string): boolean {
-		return new SelectorItem(selector).match(this);
+		for (const part of selector.split(',')) {
+			if (new SelectorItem(part.trim()).match(this)) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * Traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string.
+	 *
+	 * @param selector Selector.
+	 * @returns Closest matching element.
+	 */
+	public closest(selector: string): IElement {
+		let rootElement: IElement = this.ownerDocument.documentElement;
+		if (!this.isConnected) {
+			rootElement = this;
+			while (rootElement.parentNode) {
+				rootElement = <IElement>rootElement.parentNode;
+			}
+		}
+		const elements = rootElement.querySelectorAll(selector);
+
+		// eslint-disable-next-line
+		let parent: IElement = this;
+		while (parent) {
+			if (elements.includes(parent)) {
+				return parent;
+			}
+			parent = parent.parentElement;
+		}
+
+		// QuerySelectorAll() will not match the element it is looking in when searched for
+		// Therefore we need to check if it matches the root
+		if (rootElement.matches(selector)) {
+			return rootElement;
+		}
+
+		return null;
 	}
 
 	/**

package/src/nodes/element/IElement.ts

@@ -152,6 +152,14 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	 */
 	matches(selector: string): boolean;
 
+	/**
+	 * Traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string.
+	 *
+	 * @param selector Selector.
+	 * @returns Closest matching element.
+	 */
+	closest(selector: string): IElement;
+
 	/**
 	 * The setAttributeNode() method adds a new Attr node to the specified element.
 	 *

package/src/nodes/html-element/HTMLElement.ts

@@ -1,8 +1,9 @@
 import Element from '../element/Element';
-import Event from '../../event/Event';
 import IHTMLElement from './IHTMLElement';
 import CSSStyleDeclaration from '../../css/CSSStyleDeclaration';
 import Attr from '../../attribute/Attr';
+import FocusEvent from '../../event/events/FocusEvent';
+import PointerEvent from '../../event/events/PointerEvent';
 
 /**
  * HTML Element.
@@ -172,7 +173,7 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	 * Triggers a click event.
 	 */
 	public click(): void {
-		const event = new Event('click', {
+		const event = new PointerEvent('click', {
 			bubbles: true,
 			composed: true
 		});
@@ -185,8 +186,14 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	 * Triggers a blur event.
 	 */
 	public blur(): void {
+		if (this.ownerDocument['_activeElement'] !== this || !this.isConnected) {
+			return;
+		}
+
+		this.ownerDocument['_activeElement'] = null;
+
 		for (const eventType of ['blur', 'focusout']) {
-			const event = new Event(eventType, {
+			const event = new FocusEvent(eventType, {
 				bubbles: true,
 				composed: true
 			});
@@ -200,8 +207,18 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	 * Triggers a focus event.
 	 */
 	public focus(): void {
+		if (this.ownerDocument['_activeElement'] === this || !this.isConnected) {
+			return;
+		}
+
+		if (this.ownerDocument['_activeElement'] !== null) {
+			this.ownerDocument['_activeElement'].blur();
+		}
+
+		this.ownerDocument['_activeElement'] = this;
+
 		for (const eventType of ['focus', 'focusin']) {
-			const event = new Event(eventType, {
+			const event = new FocusEvent(eventType, {
 				bubbles: true,
 				composed: true
 			});

package/src/nodes/html-input-element/HTMLInputElement.ts

@@ -37,9 +37,6 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 	// Type specific: file
 	public files: File[] = [];
 
-	// Not categorized
-	public defaultValue = '';
-
 	// Type specific: text/password/search/tel/url/week/month
 	private _selectionStart = null;
 	private _selectionEnd = null;
@@ -384,21 +381,21 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 	}
 
 	/**
-	 * Returns defaultvalue.
+	 * Returns defaultValue.
 	 *
 	 * @returns Defaultvalue.
 	 */
-	public get defaultvalue(): string {
+	public get defaultValue(): string {
 		return this.getAttributeNS(null, 'defaultvalue') || '';
 	}
 
 	/**
-	 * Sets defaultvalue.
+	 * Sets defaultValue.
 	 *
-	 * @param defaultvalue Defaultvalue.
+	 * @param defaultValue Defaultvalue.
 	 */
-	public set defaultvalue(defaultvalue: string) {
-		this.setAttributeNS(null, 'defaultvalue', defaultvalue);
+	public set defaultValue(defaultValue: string) {
+		this.setAttributeNS(null, 'defaultvalue', defaultValue);
 	}
 
 	/**
@@ -780,6 +777,21 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 		return this.value ? parseFloat(this.value) : NaN;
 	}
 
+	/**
+	 * Selects the text.
+	 */
+	public select(): void {
+		if (!this._isSelectionSupported()) {
+			return null;
+		}
+
+		this._selectionStart = 0;
+		this._selectionEnd = this.value.length;
+		this._selectionDirection = HTMLInputElementSelectionDirectionEnum.none;
+
+		this.dispatchEvent(new Event('select', { bubbles: true, cancelable: true }));
+	}
+
 	/**
 	 * Set selection range.
 	 *

package/src/nodes/html-input-element/IHTMLInputElement.ts

@@ -35,7 +35,6 @@ export default interface IHTMLInputElement extends IHTMLElement {
 	allowdirs: string;
 	autocomplete: string;
 	src: string;
-	defaultvalue: string;
 	readOnly: boolean;
 	disabled: boolean;
 	autofocus: boolean;

package/src/nodes/html-link-element/HTMLLinkElement.ts

@@ -6,6 +6,7 @@ import Document from '../document/Document';
 import IHTMLLinkElement from './IHTMLLinkElement';
 import Event from '../../event/Event';
 import ErrorEvent from '../../event/events/ErrorEvent';
+import INode from '../../nodes/node/INode';
 
 /**
  * HTML Link Element.
@@ -19,79 +20,6 @@ export default class HTMLLinkElement extends HTMLElement implements IHTMLLinkEle
 	public readonly sheet: CSSStyleSheet = null;
 	public _evaluateCSS = true;
 
-	/**
-	 * Returns "true" if connected to DOM.
-	 *
-	 * @returns "true" if connected.
-	 */
-	public get isConnected(): boolean {
-		return this._isConnected;
-	}
-
-	/**
-	 * Sets the connected state.
-	 *
-	 * @param isConnected "true" if connected.
-	 */
-	public set isConnected(isConnected) {
-		if (this._isConnected !== isConnected) {
-			this._isConnected = isConnected;
-
-			for (const child of this.childNodes) {
-				child.isConnected = isConnected;
-			}
-
-			// eslint-disable-next-line
-			if (this.shadowRoot) {
-				// eslint-disable-next-line
-				this.shadowRoot.isConnected = isConnected;
-			}
-
-			if (isConnected && this._evaluateCSS) {
-				const href = this.getAttributeNS(null, 'href');
-				const rel = this.getAttributeNS(null, 'rel');
-				if (href !== null && rel && rel.toLowerCase() === 'stylesheet') {
-					(<Document>this.ownerDocument)._readyStateManager.startTask();
-					ResourceFetcher.fetch({ window: this.ownerDocument.defaultView, url: href })
-						.then(code => {
-							const styleSheet = new CSSStyleSheet();
-							styleSheet.replaceSync(code);
-							(<CSSStyleSheet>this.sheet) = styleSheet;
-							this.dispatchEvent(new Event('load'));
-							(<Document>this.ownerDocument)._readyStateManager.endTask();
-						})
-						.catch(error => {
-							this.dispatchEvent(
-								new ErrorEvent('error', {
-									message: error.message,
-									error
-								})
-							);
-							this.ownerDocument.defaultView.dispatchEvent(
-								new ErrorEvent('error', {
-									message: error.message,
-									error
-								})
-							);
-							(<Document>this.ownerDocument)._readyStateManager.endTask();
-							if (
-								!this._listeners['error'] &&
-								!this.ownerDocument.defaultView._listeners['error']
-							) {
-								this.ownerDocument.defaultView.console.error(error);
-							}
-						});
-				}
-			}
-
-			if (isConnected && this.connectedCallback) {
-				this.connectedCallback();
-			} else if (!isConnected && this.disconnectedCallback) {
-				this.disconnectedCallback();
-			}
-		}
-	}
-
 	/**
 	 * Returns as.
 	 *
@@ -286,4 +214,49 @@ export default class HTMLLinkElement extends HTMLElement implements IHTMLLinkEle
 
 		return replacedAttribute;
 	}
+
+	/**
+	 * @override
+	 */
+	public _connectToNode(parentNode: INode = null): void {
+		const isConnected = this.isConnected;
+		const isParentConnected = parentNode ? parentNode.isConnected : false;
+
+		super._connectToNode(parentNode);
+
+		if (isConnected !== isParentConnected && this._evaluateCSS) {
+			const href = this.getAttributeNS(null, 'href');
+			const rel = this.getAttributeNS(null, 'rel');
+
+			if (href !== null && rel && rel.toLowerCase() === 'stylesheet') {
+				(<Document>this.ownerDocument)._readyStateManager.startTask();
+				ResourceFetcher.fetch({ window: this.ownerDocument.defaultView, url: href })
+					.then(code => {
+						const styleSheet = new CSSStyleSheet();
+						styleSheet.replaceSync(code);
+						(<CSSStyleSheet>this.sheet) = styleSheet;
+						this.dispatchEvent(new Event('load'));
+						(<Document>this.ownerDocument)._readyStateManager.endTask();
+					})
+					.catch(error => {
+						this.dispatchEvent(
+							new ErrorEvent('error', {
+								message: error.message,
+								error
+							})
+						);
+						this.ownerDocument.defaultView.dispatchEvent(
+							new ErrorEvent('error', {
+								message: error.message,
+								error
+							})
+						);
+						(<Document>this.ownerDocument)._readyStateManager.endTask();
+						if (!this._listeners['error'] && !this.ownerDocument.defaultView._listeners['error']) {
+							this.ownerDocument.defaultView.console.error(error);
+						}
+					});
+			}
+		}
+	}
 }

package/src/nodes/html-script-element/HTMLScriptElement.ts

@@ -4,6 +4,7 @@ import IHTMLScriptElement from './IHTMLScriptElement';
 import ScriptUtility from './ScriptUtility';
 import Event from '../../event/Event';
 import ErrorEvent from '../../event/events/ErrorEvent';
+import INode from '../../nodes/node/INode';
 
 /**
  * HTML Script Element.
@@ -16,55 +17,6 @@ export default class HTMLScriptElement extends HTMLElement implements IHTMLScrip
 	public onload: (event: Event) => void = null;
 	public _evaluateScript = true;
 
-	/**
-	 * Returns "true" if connected to DOM.
-	 *
-	 * @returns "true" if connected.
-	 */
-	public get isConnected(): boolean {
-		return this._isConnected;
-	}
-
-	/**
-	 * Sets the connected state.
-	 *
-	 * @param isConnected "true" if connected.
-	 */
-	public set isConnected(isConnected) {
-		if (this._isConnected !== isConnected) {
-			this._isConnected = isConnected;
-
-			for (const child of this.childNodes) {
-				child.isConnected = isConnected;
-			}
-
-			// eslint-disable-next-line
-			if (this.shadowRoot) {
-				// eslint-disable-next-line
-				this.shadowRoot.isConnected = isConnected;
-			}
-
-			if (isConnected && this._evaluateScript) {
-				const src = this.getAttributeNS(null, 'src');
-
-				if (src !== null) {
-					ScriptUtility.loadExternalScript(this);
-				} else {
-					const textContent = this.textContent;
-					if (textContent) {
-						this.ownerDocument.defaultView.eval(textContent);
-					}
-				}
-			}
-
-			if (isConnected && this.connectedCallback) {
-				this.connectedCallback();
-			} else if (!isConnected && this.disconnectedCallback) {
-				this.disconnectedCallback();
-			}
-		}
-	}
-
 	/**
 	 * Returns type.
 	 *
@@ -226,4 +178,27 @@ export default class HTMLScriptElement extends HTMLElement implements IHTMLScrip
 	public cloneNode(deep = false): IHTMLScriptElement {
 		return <IHTMLScriptElement>super.cloneNode(deep);
 	}
+
+	/**
+	 * @override
+	 */
+	public _connectToNode(parentNode: INode = null): void {
+		const isConnected = this.isConnected;
+		const isParentConnected = parentNode ? parentNode.isConnected : false;
+
+		super._connectToNode(parentNode);
+
+		if (isConnected !== isParentConnected && this._evaluateScript) {
+			const src = this.getAttributeNS(null, 'src');
+
+			if (src !== null) {
+				ScriptUtility.loadExternalScript(this);
+			} else {
+				const textContent = this.textContent;
+				if (textContent) {
+					this.ownerDocument.defaultView.eval(textContent);
+				}
+			}
+		}
+	}
 }

package/src/nodes/html-style-element/HTMLStyleElement.ts

@@ -15,7 +15,7 @@ export default class HTMLStyleElement extends HTMLElement implements IHTMLStyleE
 	 * @returns CSS style sheet.
 	 */
 	public get sheet(): CSSStyleSheet {
-		if (!this._isConnected) {
+		if (!this.isConnected) {
 			return null;
 		}
 		const styleSheet = new CSSStyleSheet();

package/src/nodes/node/INode.ts

@@ -8,7 +8,7 @@ export default interface INode extends IEventTarget {
 	readonly parentElement: IElement;
 	readonly nodeType: number;
 	readonly childNodes: INode[];
-	isConnected: boolean;
+	readonly isConnected: boolean;
 	readonly nodeValue: string;
 	readonly nodeName: string;
 	readonly previousSibling: INode;

package/src/nodes/node/Node.ts

@@ -9,7 +9,6 @@ import IDocument from '../document/IDocument';
 import IElement from '../element/IElement';
 import INodeList from './INodeList';
 import NodeListFactory from './NodeListFactory';
-import { IShadowRoot } from '../..';
 
 /**
  * Node.
@@ -27,9 +26,8 @@ export default class Node extends EventTarget implements INode {
 	public readonly parentNode: INode = null;
 	public readonly nodeType: number;
 	public readonly childNodes: INodeList<INode> = NodeListFactory.create();
-
-	// Protected properties
-	protected _isConnected = false;
+	public readonly isConnected: boolean = false;
+	public _rootNode: INode = null;
 
 	// Custom Properties (not part of HTML standard)
 	protected _observers: MutationObserverListener[] = [];
@@ -42,42 +40,6 @@ export default class Node extends EventTarget implements INode {
 		this.ownerDocument = (<typeof Node>this.constructor).ownerDocument;
 	}
 
-	/**
-	 * Returns "true" if connected to DOM.
-	 *
-	 * @returns "true" if connected.
-	 */
-	public get isConnected(): boolean {
-		return this._isConnected;
-	}
-
-	/**
-	 * Sets the connected state.
-	 *
-	 * @param isConnected "true" if connected.
-	 */
-	public set isConnected(isConnected) {
-		if (this._isConnected !== isConnected) {
-			this._isConnected = isConnected;
-
-			if (isConnected && this.connectedCallback) {
-				this.connectedCallback();
-			} else if (!isConnected && this.disconnectedCallback) {
-				this.disconnectedCallback();
-			}
-
-			for (const child of this.childNodes) {
-				child.isConnected = isConnected;
-			}
-
-			// eslint-disable-next-line
-			if ((<any>this).shadowRoot) {
-				// eslint-disable-next-line
-				(<any>this).shadowRoot.isConnected = isConnected;
-			}
-		}
-	}
-
 	/**
 	 * Get text value of children.
 	 *
@@ -208,21 +170,15 @@ export default class Node extends EventTarget implements INode {
 	 * @returns Node.
 	 */
 	public getRootNode(options?: { composed: boolean }): INode {
-		// eslint-disable-next-line
-        let parent: INode = this;
+		if (!this.isConnected) {
+			return this;
+		}
 
-		while (!!parent) {
-			if (!parent.parentNode) {
-				if (!options?.composed || !(<IShadowRoot>parent).host) {
-					return parent;
-				}
-				parent = (<IShadowRoot>parent).host;
-			} else {
-				parent = parent.parentNode;
-			}
+		if (this._rootNode && !options?.composed) {
+			return this._rootNode;
 		}
 
-		return null;
+		return this.ownerDocument;
 	}
 
 	/**
@@ -234,8 +190,11 @@ export default class Node extends EventTarget implements INode {
 	public cloneNode(deep = false): INode {
 		const clone = new (<typeof Node>this.constructor)();
 
-		for (const node of clone.childNodes.slice()) {
-			node.parentNode.removeChild(node);
+		// Document has childNodes directly when it is created
+		if (clone.childNodes.length) {
+			for (const node of clone.childNodes.slice()) {
+				node.parentNode.removeChild(node);
+			}
 		}
 
 		if (deep) {
@@ -281,8 +240,7 @@ export default class Node extends EventTarget implements INode {
 
 		this.childNodes.push(node);
 
-		(<Node>node.parentNode) = this;
-		node.isConnected = this.isConnected;
+		(<Node>node)._connectToNode(this);
 
 		// MutationObserver
 		if (this._observers.length > 0) {
@@ -318,8 +276,7 @@ export default class Node extends EventTarget implements INode {
 
 		this.childNodes.splice(index, 1);
 
-		(<Node>node.parentNode) = null;
-		node.isConnected = false;
+		(<Node>node)._connectToNode(null);
 
 		// MutationObserver
 		if (this._observers.length > 0) {
@@ -384,8 +341,7 @@ export default class Node extends EventTarget implements INode {
 
 		this.childNodes.splice(index, 0, newNode);
 
-		(<Node>newNode.parentNode) = this;
-		newNode.isConnected = this.isConnected;
+		(<Node>newNode)._connectToNode(this);
 
 		// MutationObserver
 		if (this._observers.length > 0) {
@@ -432,8 +388,16 @@ export default class Node extends EventTarget implements INode {
 
 		const returnValue = super.dispatchEvent(event);
 
-		if (event.bubbles && this.parentNode !== null && !event._propagationStopped) {
-			return this.parentNode.dispatchEvent(event);
+		if (event.bubbles && !event._propagationStopped) {
+			if (this.parentNode) {
+				return this.parentNode.dispatchEvent(event);
+			}
+
+			// eslint-disable-next-line
+			if(event.composed && (<any>this).host) {
+				// eslint-disable-next-line
+				return (<any>this).host.dispatchEvent(event);
+			}
 		}
 
 		return returnValue;
@@ -480,4 +444,38 @@ export default class Node extends EventTarget implements INode {
 			}
 		}
 	}
+
+	/**
+	 * Connects this element to another element.
+	 *
+	 * @param parentNode Parent node.
+	 */
+	public _connectToNode(parentNode: INode = null): void {
+		const isConnected = !!parentNode && parentNode.isConnected;
+
+		if (this.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+			(<INode>this.parentNode) = parentNode;
+			(<Node>this)._rootNode = isConnected && parentNode ? (<Node>parentNode)._rootNode : null;
+		}
+
+		if (this.isConnected !== isConnected) {
+			(<boolean>this.isConnected) = isConnected;
+
+			if (isConnected && this.connectedCallback) {
+				this.connectedCallback();
+			} else if (!isConnected && this.disconnectedCallback) {
+				this.disconnectedCallback();
+			}
+
+			for (const child of this.childNodes) {
+				(<Node>child)._connectToNode(this);
+			}
+
+			// eslint-disable-next-line
+			if ((<any>this).shadowRoot) {
+				// eslint-disable-next-line
+				(<any>this).shadowRoot._connectToNode(this);
+			}
+		}
+	}
 }

package/src/nodes/shadow-root/ShadowRoot.ts

@@ -4,6 +4,7 @@ import XMLSerializer from '../../xml-serializer/XMLSerializer';
 import IElement from '../element/IElement';
 import CSSStyleSheet from '../../css/CSSStyleSheet';
 import IShadowRoot from './IShadowRoot';
+import IHTMLElement from '../../nodes/html-element/IHTMLElement';
 
 /**
  * ShadowRoot.
@@ -42,6 +43,19 @@ export default class ShadowRoot extends DocumentFragment implements IShadowRoot
 		}
 	}
 
+	/**
+	 * Returns active element.
+	 *
+	 * @returns Active element.
+	 */
+	public get activeElement(): IHTMLElement {
+		const activeElement: IHTMLElement = this.ownerDocument['_activeElement'];
+		if (activeElement && activeElement.getRootNode() === this) {
+			return activeElement;
+		}
+		return null;
+	}
+
 	/**
 	 * Converts to string.
 	 *