happy-dom 7.3.0 → 7.5.0

package/src/nodes/html-select-element/HTMLSelectElement.ts

@@ -12,6 +12,7 @@ import IHTMLOptionsCollection from '../html-option-element/IHTMLOptionsCollectio
 import INodeList from '../node/INodeList';
 import HTMLSelectElementValueSanitizer from './HTMLSelectElementValueSanitizer';
 import IHTMLSelectElement from './IHTMLSelectElement';
+import Event from '../../event/Event';
 
 /**
  * HTML Select Element.
@@ -23,6 +24,10 @@ export default class HTMLSelectElement extends HTMLElement implements IHTMLSelec
 	public type: string;
 	public labels: INodeList<IHTMLLabelElement>;
 
+	// Events
+	public onchange: (event: Event) => void | null = null;
+	public oninput: (event: Event) => void | null = null;
+
 	public _value = null;
 	public _selectedIndex = -1;
 	public _options: IHTMLOptionsCollection = null;

package/src/nodes/html-select-element/IHTMLSelectElement.ts

@@ -4,6 +4,7 @@ import IHTMLLabelElement from '../html-label-element/IHTMLLabelElement';
 import INodeList from '../node/INodeList';
 import IHTMLOptionsCollection from '../html-option-element/IHTMLOptionsCollection';
 import ValidityState from '../validity-state/ValidityState';
+import Event from '../../event/Event';
 
 /**
  * HTML Select Element.
@@ -24,4 +25,8 @@ export default interface IHTMLSelectElement extends IHTMLElement {
 	willValidate: boolean;
 	name: string;
 	multiple: boolean;
+
+	// Events
+	onchange: (event: Event) => void | null;
+	oninput: (event: Event) => void | null;
 }

package/src/nodes/html-slot-element/HTMLSlotElement.ts

@@ -4,6 +4,7 @@ import IHTMLSlotElement from './IHTMLSlotElement';
 import IText from '../text/IText';
 import IElement from '../element/IElement';
 import INode from '../node/INode';
+import Event from '../../event/Event';
 
 /**
  * HTML Slot Element.
@@ -12,6 +13,9 @@ import INode from '../node/INode';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement.
  */
 export default class HTMLSlotElement extends HTMLElement implements IHTMLSlotElement {
+	// Events
+	public onslotchange: (event: Event) => void | null = null;
+
 	/**
 	 * Returns name.
 	 *

package/src/nodes/html-slot-element/IHTMLSlotElement.ts

@@ -2,6 +2,7 @@ import IHTMLElement from '../html-element/IHTMLElement';
 import IText from '../text/IText';
 import IElement from '../element/IElement';
 import INode from '../node/INode';
+import Event from '../../event/Event';
 
 /**
  * HTML Slot Element.
@@ -10,6 +11,9 @@ import INode from '../node/INode';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement.
  */
 export default interface IHTMLSlotElement extends IHTMLElement {
+	// Events
+	onslotchange: (event: Event) => void | null;
+
 	name: string;
 
 	/**

package/src/nodes/html-text-area-element/HTMLTextAreaElement.ts

@@ -16,11 +16,16 @@ import IHTMLTextAreaElement from './IHTMLTextAreaElement';
  */
 export default class HTMLTextAreaElement extends HTMLElement implements IHTMLTextAreaElement {
 	public readonly type = 'textarea';
+	public defaultValue = '';
+
+	// Events
+	public oninput: (event: Event) => void | null = null;
+	public onselectionchange: (event: Event) => void | null = null;
+
 	public _value = null;
 	public _selectionStart = null;
 	public _selectionEnd = null;
 	public _selectionDirection = HTMLInputElementSelectionDirectionEnum.none;
-	public defaultValue = '';
 
 	/**
 	 * Returns minlength.

package/src/nodes/html-text-area-element/IHTMLTextAreaElement.ts

@@ -1,3 +1,4 @@
+import Event from '../../event/Event';
 import IHTMLElement from '../html-element/IHTMLElement';
 import IHTMLFormElement from '../html-form-element/IHTMLFormElement';
 import HTMLInputElementSelectionModeEnum from '../html-input-element/HTMLInputElementSelectionModeEnum';
@@ -30,6 +31,10 @@ export default interface IHTMLTextAreaElement extends IHTMLElement {
 	selectionDirection: string;
 	textLength: number;
 
+	// Events
+	oninput: (event: Event) => void | null;
+	onselectionchange: (event: Event) => void | null;
+
 	/**
 	 * Set selection range.
 	 *

package/src/nodes/node/Node.ts

@@ -308,6 +308,10 @@ export default class Node extends EventTarget implements INode {
 			}
 		}
 
+		if (this.isConnected) {
+			(this.ownerDocument || this)['_cacheID']++;
+		}
+
 		this.childNodes.push(node);
 
 		(<Node>node)._connectToNode(this);
@@ -345,6 +349,10 @@ export default class Node extends EventTarget implements INode {
 			throw new DOMException('Failed to remove node. Node is not child of parent.');
 		}
 
+		if (this.isConnected) {
+			(this.ownerDocument || this)['_cacheID']++;
+		}
+
 		this.childNodes.splice(index, 1);
 
 		(<Node>node)._connectToNode(null);
@@ -404,6 +412,10 @@ export default class Node extends EventTarget implements INode {
 			);
 		}
 
+		if (this.isConnected) {
+			(this.ownerDocument || this)['_cacheID']++;
+		}
+
 		if (newNode.parentNode) {
 			const index = newNode.parentNode.childNodes.indexOf(newNode);
 			if (index !== -1) {

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

@@ -1,5 +1,6 @@
 import IDocumentFragment from '../document-fragment/IDocumentFragment';
 import IElement from '../element/IElement';
+import Event from '../../event/Event';
 
 /**
  * ShadowRoot.
@@ -9,6 +10,9 @@ export default interface IShadowRoot extends IDocumentFragment {
 	innerHTML: string;
 	host: IElement;
 
+	// Events
+	onslotchange: (event: Event) => void | null;
+
 	/**
 	 * Clones a node.
 	 *

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

@@ -5,6 +5,7 @@ import IElement from '../element/IElement';
 import CSSStyleSheet from '../../css/CSSStyleSheet';
 import IShadowRoot from './IShadowRoot';
 import IHTMLElement from '../../nodes/html-element/IHTMLElement';
+import Event from '../../event/Event';
 
 /**
  * ShadowRoot.
@@ -14,6 +15,9 @@ export default class ShadowRoot extends DocumentFragment implements IShadowRoot
 	public readonly host: IElement = null;
 	public adoptedStyleSheets: CSSStyleSheet[] = [];
 
+	// Events
+	public onslotchange: (event: Event) => void | null = null;
+
 	/**
 	 * Returns inner HTML.
 	 *

package/src/nodes/svg-element/ISVGElement.ts

@@ -1,3 +1,4 @@
+import Event from '../../event/Event';
 import CSSStyleDeclaration from '../../css/declaration/CSSStyleDeclaration';
 import IElement from '../element/IElement';
 import ISVGSVGElement from './ISVGSVGElement';
@@ -12,4 +13,12 @@ export default interface ISVGElement extends IElement {
 	readonly ownerSVGElement: ISVGSVGElement;
 	readonly dataset: { [key: string]: string };
 	readonly style: CSSStyleDeclaration;
+
+	// Events
+	onabort: (event: Event) => void | null;
+	onerror: (event: Event) => void | null;
+	onload: (event: Event) => void | null;
+	onresize: (event: Event) => void | null;
+	onscroll: (event: Event) => void | null;
+	onunload: (event: Event) => void | null;
 }

package/src/nodes/svg-element/ISVGSVGElement.ts

@@ -1,3 +1,4 @@
+import Event from '../../event/Event';
 import INode from '../node/INode';
 import ISVGGraphicsElement from './ISVGGraphicsElement';
 import SVGAngle from './SVGAngle';
@@ -25,6 +26,26 @@ export default interface ISVGSVGElement extends ISVGGraphicsElement {
 	currentTranslate: SVGPoint;
 	viewBox: SVGAnimatedRect;
 
+	// Events
+	onafterprint: (event: Event) => void | null;
+	onbeforeprint: (event: Event) => void | null;
+	onbeforeunload: (event: Event) => void | null;
+	ongamepadconnected: (event: Event) => void | null;
+	ongamepaddisconnected: (event: Event) => void | null;
+	onhashchange: (event: Event) => void | null;
+	onlanguagechange: (event: Event) => void | null;
+	onmessage: (event: Event) => void | null;
+	onmessageerror: (event: Event) => void | null;
+	onoffline: (event: Event) => void | null;
+	ononline: (event: Event) => void | null;
+	onpagehide: (event: Event) => void | null;
+	onpageshow: (event: Event) => void | null;
+	onpopstate: (event: Event) => void | null;
+	onrejectionhandled: (event: Event) => void | null;
+	onstorage: (event: Event) => void | null;
+	onunhandledrejection: (event: Event) => void | null;
+	onunload: (event: Event) => void | null;
+
 	/**
 	 * Pauses animation.
 	 */

package/src/nodes/svg-element/SVGElement.ts

@@ -3,6 +3,7 @@ import Element from '../element/Element';
 import ISVGElement from './ISVGElement';
 import ISVGSVGElement from './ISVGSVGElement';
 import IAttr from '../attr/IAttr';
+import Event from '../../event/Event';
 
 /**
  * SVG Element.
@@ -11,6 +12,14 @@ import IAttr from '../attr/IAttr';
  * https://developer.mozilla.org/en-US/docs/Web/API/SVGElement.
  */
 export default class SVGElement extends Element implements ISVGElement {
+	// Events
+	public onabort: (event: Event) => void | null = null;
+	public onerror: (event: Event) => void | null = null;
+	public onload: (event: Event) => void | null = null;
+	public onresize: (event: Event) => void | null = null;
+	public onscroll: (event: Event) => void | null = null;
+	public onunload: (event: Event) => void | null = null;
+
 	private _style: CSSStyleDeclaration = null;
 
 	/**

package/src/nodes/svg-element/SVGSVGElement.ts

@@ -8,11 +8,32 @@ import SVGTransform from './SVGTransform';
 import SVGAnimatedRect from './SVGAnimatedRect';
 import ISVGSVGElement from './ISVGSVGElement';
 import INode from '../node/INode';
+import Event from '../../event/Event';
 
 /**
  * SVGSVGElement.
  */
 export default class SVGSVGElement extends SVGGraphicsElement implements ISVGSVGElement {
+	// Events
+	public onafterprint: (event: Event) => void | null = null;
+	public onbeforeprint: (event: Event) => void | null = null;
+	public onbeforeunload: (event: Event) => void | null = null;
+	public ongamepadconnected: (event: Event) => void | null = null;
+	public ongamepaddisconnected: (event: Event) => void | null = null;
+	public onhashchange: (event: Event) => void | null = null;
+	public onlanguagechange: (event: Event) => void | null = null;
+	public onmessage: (event: Event) => void | null = null;
+	public onmessageerror: (event: Event) => void | null = null;
+	public onoffline: (event: Event) => void | null = null;
+	public ononline: (event: Event) => void | null = null;
+	public onpagehide: (event: Event) => void | null = null;
+	public onpageshow: (event: Event) => void | null = null;
+	public onpopstate: (event: Event) => void | null = null;
+	public onrejectionhandled: (event: Event) => void | null = null;
+	public onstorage: (event: Event) => void | null = null;
+	public onunhandledrejection: (event: Event) => void | null = null;
+	public onunload: (event: Event) => void | null = null;
+
 	/**
 	 * Returns preserveAspectRatio.
 	 *

package/src/query-selector/QuerySelector.ts

@@ -8,9 +8,6 @@ import NodeListFactory from '../nodes/node/NodeListFactory';
 
 const SELECTOR_PART_REGEXP = /(\[[^\]]+\]|[a-zA-Z0-9-_.#"*:()\]]+)|([ ,>]+)/g;
 
-// The above one seem to work fine and is faster, but this one can be useful if more rules need to be added as it is more "correct".
-// Const SELECTOR_PART_REGEXP = /([a-zA-Z0-9-$.]+|\[[a-zA-Z0-9-]+\]|\[[a-zA-Z0-9$-~|^$*]+[ ]*=[ ]*"[^"]+"\])|([ ,]+)/g;
-
 /**
  * Utility for query selection in an HTML element.
  *
@@ -57,6 +54,70 @@ export default class QuerySelector {
 		return null;
 	}
 
+	/**
+	 * Checks if a node matches a selector and returns priority weight.
+	 *
+	 * @param node Node to search in.
+	 * @param selector Selector.
+	 * @returns Result.
+	 */
+	public static match(node: INode, selector: string): { priorityWeight: number; matches: boolean } {
+		for (const parts of this.getSelectorParts(selector)) {
+			const result = this.matchesSelector(node, node, parts.reverse());
+
+			if (result.matches) {
+				return result;
+			}
+		}
+
+		return { priorityWeight: 0, matches: false };
+	}
+
+	/**
+	 * Checks if a node matches a selector.
+	 *
+	 * @param targetNode Target node.
+	 * @param currentNode Current node.
+	 * @param selectorParts Selector parts.
+	 * @param [priorityWeight] Priority weight.
+	 * @returns Result.
+	 */
+	private static matchesSelector(
+		targetNode: INode,
+		currentNode: INode,
+		selectorParts: string[],
+		priorityWeight = 0
+	): {
+		priorityWeight: number;
+		matches: boolean;
+	} {
+		const isDirectChild = selectorParts[0] === '>';
+		if (isDirectChild) {
+			selectorParts = selectorParts.slice(1);
+			if (selectorParts.length === 0) {
+				return { priorityWeight: 0, matches: false };
+			}
+		}
+
+		if (selectorParts.length === 0) {
+			return { priorityWeight, matches: true };
+		}
+
+		const selector = new SelectorItem(selectorParts[0]);
+		const result = selector.match(<Element>currentNode);
+
+		if (targetNode === currentNode && !result.matches) {
+			return { priorityWeight: 0, matches: false };
+		}
+
+		return this.matchesSelector(
+			isDirectChild ? currentNode.parentNode : targetNode,
+			currentNode.parentNode,
+			selectorParts.slice(1),
+			priorityWeight + result.priorityWeight
+		);
+	}
+
 	/**
 	 * Finds elements based on a query selector for a part of a list of selectors separated with comma.
 	 *
@@ -81,7 +142,7 @@ export default class QuerySelector {
 
 		for (const node of nodes) {
 			if (node.nodeType === Node.ELEMENT_NODE) {
-				if (selector.match(<Element>node)) {
+				if (selector.match(<Element>node).matches) {
 					if (selectorParts.length === 1) {
 						if (rootNode !== node) {
 							matched.push(node);
@@ -125,7 +186,7 @@ export default class QuerySelector {
 		const selector = selectorItem || new SelectorItem(selectorParts[0]);
 
 		for (const node of nodes) {
-			if (node.nodeType === Node.ELEMENT_NODE && selector.match(<Element>node)) {
+			if (node.nodeType === Node.ELEMENT_NODE && selector.match(<Element>node).matches) {
 				if (selectorParts.length === 1) {
 					if (rootNode !== node) {
 						return <Element>node;

package/src/query-selector/SelectorItem.ts

@@ -1,4 +1,5 @@
 import DOMException from '../exception/DOMException';
+import IElement from '../nodes/element/IElement';
 import Element from '../nodes/element/Element';
 
 const ATTRIBUTE_REGEXP =
@@ -13,12 +14,12 @@ const ID_REGEXP = /#[A-Za-z][-A-Za-z0-9_]*/g;
  * Selector item.
  */
 export default class SelectorItem {
-	public isAll: boolean;
-	public isID: boolean;
-	public isAttribute: boolean;
-	public isPseudo: boolean;
-	public isClass: boolean;
-	public isTagName: boolean;
+	private isAll: boolean;
+	private isID: boolean;
+	private isAttribute: boolean;
+	private isPseudo: boolean;
+	private isClass: boolean;
+	private isTagName: boolean;
 	private tagName = null;
 	private selector: string;
 	private id: string;
@@ -42,6 +43,7 @@ export default class SelectorItem {
 		this.isTagName = this.tagName !== null;
 		this.selector = selector;
 		this.id = null;
+
 		if (!this.isAll && this.isID) {
 			const idMatches = baseSelector.match(ID_REGEXP);
 			if (idMatches) {
@@ -54,46 +56,60 @@ export default class SelectorItem {
 	 * Matches a selector against an element.
 	 *
 	 * @param element HTML element.
-	 * @returns TRUE if matching.
+	 * @returns Result.
 	 */
-	public match(element: Element): boolean {
+	public match(element: IElement): { priorityWeight: number; matches: boolean } {
 		const selector = this.selector;
 
+		let priorityWeight = 0;
+
 		// Is all (*)
 		if (this.isAll) {
-			return true;
+			return { priorityWeight: 0, matches: true };
 		}
 
 		// ID Match
 		if (this.isID) {
+			priorityWeight += 100;
+
 			if (this.id !== element.id) {
-				return false;
+				return { priorityWeight: 0, matches: false };
 			}
 		}
 
 		// Tag name match
 		if (this.isTagName) {
+			priorityWeight += 1;
+
 			if (this.tagName !== element.tagName) {
-				return false;
+				return { priorityWeight: 0, matches: false };
 			}
 		}
 
 		// Class match
-		if (this.isClass && !this.matchesClass(element, selector)) {
-			return false;
+		if (this.isClass) {
+			const result = this.matchesClass(element, selector);
+			priorityWeight += result.priorityWeight;
+			if (!result.matches) {
+				return { priorityWeight: 0, matches: false };
+			}
 		}
 
 		// Pseudo match
 		if (this.isPseudo && !this.matchesPsuedo(element, selector)) {
-			return false;
+			return { priorityWeight: 0, matches: false };
 		}
 
 		// Attribute match
-		if (this.isAttribute && !this.matchesAttribute(element, selector)) {
-			return false;
+		if (this.isAttribute) {
+			const result = this.matchesAttribute(element, selector);
+			priorityWeight += result.priorityWeight;
+			if (!result.matches) {
+				return { priorityWeight: 0, matches: false };
+			}
 		}
 
-		return true;
+		return { priorityWeight, matches: true };
 	}
 
 	/**
@@ -103,7 +119,7 @@ export default class SelectorItem {
 	 * @param selector Selector.
 	 * @returns True if it is a match.
 	 */
-	private matchesPsuedo(element: Element, selector: string): boolean {
+	private matchesPsuedo(element: IElement, selector: string): boolean {
 		const regexp = new RegExp(PSUEDO_REGEXP, 'g');
 		let match: RegExpMatchArray;
 
@@ -113,8 +129,8 @@ export default class SelectorItem {
 				return false;
 			} else if (
 				match[3] &&
-				((isNotClass && this.matchesClass(element, match[3])) ||
-					(!isNotClass && this.matchesAttribute(element, match[3])))
+				((isNotClass && this.matchesClass(element, match[3]).matches) ||
+					(!isNotClass && this.matchesAttribute(element, match[3])).matches)
 			) {
 				return false;
 			} else if (match[4] && !this.matchesPsuedoExpression(element, match[4])) {
@@ -133,8 +149,8 @@ export default class SelectorItem {
 	 * @param place Place.
 	 * @returns True if it is a match.
 	 */
-	private matchesNthChild(element: Element, psuedo: string, place: string): boolean {
-		let children = element.parentNode ? (<Element>element.parentNode).children : [];
+	private matchesNthChild(element: IElement, psuedo: string, place: string): boolean {
+		let children = element.parentNode ? (<IElement>element.parentNode).children : [];
 
 		switch (psuedo.toLowerCase()) {
 			case 'nth-of-type':
@@ -188,8 +204,8 @@ export default class SelectorItem {
 	 * @param psuedo Psuedo name.
 	 * @returns True if it is a match.
 	 */
-	private matchesPsuedoExpression(element: Element, psuedo: string): boolean {
-		const parent = <Element>element.parentNode;
+	private matchesPsuedoExpression(element: IElement, psuedo: string): boolean {
+		const parent = <IElement>element.parentNode;
 
 		if (!parent) {
 			return false;
@@ -240,24 +256,31 @@ export default class SelectorItem {
 	 *
 	 * @param element Element.
 	 * @param selector Selector.
-	 * @returns True if it is a match.
+	 * @returns Result.
 	 */
-	private matchesAttribute(element: Element, selector: string): boolean {
+	private matchesAttribute(
+		element: IElement,
+		selector: string
+	): { priorityWeight: number; matches: boolean } {
 		const regexp = new RegExp(ATTRIBUTE_REGEXP, 'g');
 		let match: RegExpMatchArray;
+		let priorityWeight = 0;
 
 		while ((match = regexp.exec(selector))) {
 			const isPsuedo = match.index > 0 && selector[match.index - 1] === '(';
+
+			priorityWeight += 10;
+
 			if (
 				!isPsuedo &&
 				((match[1] && !this.matchesAttributeName(element, match[1])) ||
 					(match[2] && !this.matchesAttributeNameAndValue(element, match[2], match[4], match[3])))
 			) {
-				return false;
+				return { priorityWeight: 0, matches: false };
 			}
 		}
 
-		return true;
+		return { priorityWeight, matches: true };
 	}
 
 	/**
@@ -265,20 +288,26 @@ export default class SelectorItem {
 	 *
 	 * @param element Element.
 	 * @param selector Selector.
-	 * @returns True if it is a match.
+	 * @returns Result.
 	 */
-	private matchesClass(element: Element, selector: string): boolean {
+	private matchesClass(
+		element: IElement,
+		selector: string
+	): { priorityWeight: number; matches: boolean } {
 		const regexp = new RegExp(CLASS_REGEXP, 'g');
 		const classList = element.className.split(' ');
+		const classSelector = selector.split(':')[0];
+		let priorityWeight = 0;
 		let match: RegExpMatchArray;
 
-		while ((match = regexp.exec(selector.split(':')[0]))) {
+		while ((match = regexp.exec(classSelector))) {
+			priorityWeight += 10;
 			if (!classList.includes(match[1])) {
-				return false;
+				return { priorityWeight: 0, matches: false };
 			}
 		}
 
-		return true;
+		return { priorityWeight, matches: true };
 	}
 
 	/**
@@ -288,12 +317,12 @@ export default class SelectorItem {
 	 * @param attributeName Attribute name.
 	 * @returns True if it is a match.
 	 */
-	private matchesAttributeName(element: Element, attributeName: string): boolean {
+	private matchesAttributeName(element: IElement, attributeName: string): boolean {
 		if (ATTRIBUTE_NAME_REGEXP.test(attributeName)) {
 			throw new DOMException(`The selector "${this.selector}" is not valid.`);
 		}
 
-		return !!element._attributes[attributeName.toLowerCase()];
+		return !!(<Element>element)._attributes[attributeName.toLowerCase()];
 	}
 
 	/** .
@@ -314,12 +343,12 @@ export default class SelectorItem {
 	 * @param matchType
 	 */
 	private matchesAttributeNameAndValue(
-		element: Element,
+		element: IElement,
 		attributeName: string,
 		attributeValue: string,
 		matchType: string = null
 	): boolean {
-		const attribute = element._attributes[attributeName.toLowerCase()];
+		const attribute = (<Element>element)._attributes[attributeName.toLowerCase()];
 		const value = attributeValue;
 
 		if (ATTRIBUTE_NAME_REGEXP.test(attributeName)) {