happy-dom 2.24.3 → 2.25.1

package/src/event/EventTarget.ts

@@ -67,4 +67,16 @@ export default abstract class EventTarget implements IEventTarget {
 
 		return !(event.cancelable && event.defaultPrevented);
 	}
+
+	/**
+	 * Adds an event listener.
+	 *
+	 * This is only supported by IE8- and Opera, but for some reason React uses it and calls it, so therefore we will keep support for it until they stop using it.
+	 *
+	 * @param type Event type.
+	 * @param listener Listener.
+	 */
+	public attachEvent(type: string, listener: ((event: Event) => void) | IEventListener): void {
+		this.addEventListener(type.replace('on', ''), listener);
+	}
 }

package/src/event/NonImplementedEventTypes.ts

@@ -25,7 +25,6 @@ export default [
 	'OverconstrainedError',
 	'PageTransitionEvent',
 	'PaymentRequestUpdateEvent',
-	'PointerEvent',
 	'PopStateEvent',
 	'ProgressEvent',
 	'RelatedEvent',

package/src/event/events/IPointerEventInit.ts

@@ -0,0 +1,14 @@
+import IMouseEventInit from './IMouseEventInit';
+
+export default interface IPointerEventInit extends IMouseEventInit {
+	pointerId?: number;
+	width?: number;
+	height?: number;
+	pressure?: number;
+	tangentialPressure?: number;
+	tiltX?: number;
+	tiltY?: number;
+	twist?: number;
+	pointerType?: string;
+	isPrimary?: boolean;
+}

package/src/event/events/PointerEvent.ts

@@ -0,0 +1,42 @@
+import MouseEvent from './MouseEvent';
+import IPointerEventInit from './IPointerEventInit';
+
+/**
+ *
+ */
+export default class PointerEvent extends MouseEvent {
+	public readonly pointerId: number = 0;
+	public readonly width: number = 0;
+	public readonly height: number = 0;
+	public readonly pressure: number = 0;
+	public readonly tangentialPressure: number = 0;
+	public readonly tiltX: number = 0;
+	public readonly tiltY: number = 0;
+	public readonly twist: number = 0;
+	public readonly pointerType: string = '';
+	public readonly isPrimary: boolean = false;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param type Event type.
+	 * @param [eventInit] Event init.
+	 */
+	constructor(type: string, eventInit: IPointerEventInit = null) {
+		super(type, eventInit);
+
+		if (eventInit) {
+			this.pointerId = eventInit.pointerId !== undefined ? eventInit.pointerId : 0;
+			this.width = eventInit.width !== undefined ? eventInit.width : 0;
+			this.height = eventInit.height !== undefined ? eventInit.height : 0;
+			this.pressure = eventInit.pressure !== undefined ? eventInit.pressure : 0;
+			this.tangentialPressure =
+				eventInit.tangentialPressure !== undefined ? eventInit.tangentialPressure : 0;
+			this.tiltX = eventInit.tiltX !== undefined ? eventInit.tiltX : 0;
+			this.tiltY = eventInit.tiltY !== undefined ? eventInit.tiltY : 0;
+			this.twist = eventInit.twist !== undefined ? eventInit.twist : 0;
+			this.pointerType = eventInit.pointerType !== undefined ? eventInit.pointerType : '';
+			this.isPrimary = eventInit.isPrimary || eventInit.isPrimary;
+		}
+	}
+}

package/src/exception/DOMExceptionNameEnum.ts

@@ -1,4 +1,7 @@
 enum DOMExceptionNameEnum {
-	invalidStateError = 'InvalidStateError'
+	invalidStateError = 'InvalidStateError',
+	indexSizeError = 'IndexSizeError',
+	syntaxError = 'SyntaxError',
+	hierarchyRequestError = 'HierarchyRequestError'
 }
 export default DOMExceptionNameEnum;

package/src/nodes/document/Document.ts

@@ -44,8 +44,9 @@ export default class Document extends Node implements IDocument {
 	public implementation: DOMImplementation;
 	public readonly children: IHTMLCollection<IElement> = HTMLCollectionFactory.create();
 	public readonly readyState = DocumentReadyStateEnum.interactive;
+	public readonly isConnected: boolean = true;
 	public _readyStateManager: DocumentReadyStateManager = null;
-	protected _isConnected = true;
+	public _activeElement: IHTMLElement = null;
 	protected _isFirstWrite = true;
 	protected _isFirstWriteAfterOpen = false;
 	private _defaultView: Window = null;
@@ -209,6 +210,15 @@ export default class Document extends Node implements IDocument {
 		return styleSheets;
 	}
 
+	/**
+	 * Returns active element.
+	 *
+	 * @returns Active element.
+	 */
+	public get activeElement(): IHTMLElement {
+		return this._activeElement || this.body || this.documentElement || null;
+	}
+
 	/**
 	 * Inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.
 	 *

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

@@ -94,7 +94,7 @@ export default class Element extends Node implements IElement {
 	 * @returns Local name.
 	 */
 	public get localName(): string {
-		return this.tagName.toLowerCase();
+		return this.tagName ? this.tagName.toLowerCase() : 'unknown';
 	}
 
 	/**
@@ -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;