happy-dom 16.8.1 → 20.0.2

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

@@ -15,6 +15,8 @@ import ClassMethodBinder from '../../utilities/ClassMethodBinder.js';
 import Node from '../node/Node.js';
 import Element from '../element/Element.js';
 import EventTarget from '../../event/EventTarget.js';
+import ElementEventAttributeUtility from '../element/ElementEventAttributeUtility.js';
+import BrowserWindow from '../../window/BrowserWindow.js';
 
 /**
  * HTML Select Element.
@@ -23,6 +25,12 @@ import EventTarget from '../../event/EventTarget.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement.
  */
 export default class HTMLSelectElement extends HTMLElement {
+	// Index signature
+	[index: number]: HTMLOptionElement | undefined;
+
+	// Injected by WindowContextClassExtender
+	protected declare [PropertySymbol.window]: BrowserWindow;
+
 	// Internal properties.
 	public [PropertySymbol.validationMessage] = '';
 	public [PropertySymbol.validity] = new ValidityState(this);
@@ -31,10 +39,6 @@ export default class HTMLSelectElement extends HTMLElement {
 	public [PropertySymbol.selectedIndex]: number = -1;
 	public [PropertySymbol.proxy]: HTMLSelectElement;
 
-	// Events
-	public onchange: ((event: Event) => void) | null = null;
-	public oninput: ((event: Event) => void) | null = null;
-
 	/**
 	 * Constructor.
 	 */
@@ -53,7 +57,7 @@ export default class HTMLSelectElement extends HTMLElement {
 			get: (target, property) => {
 				if (property in target || typeof property === 'symbol') {
 					methodBinder.bind(property);
-					return target[property];
+					return (<any>target)[property];
 				}
 				const index = Number(property);
 				if (!isNaN(index)) {
@@ -64,19 +68,19 @@ export default class HTMLSelectElement extends HTMLElement {
 				methodBinder.bind(property);
 
 				if (typeof property === 'symbol') {
-					target[property] = newValue;
+					(<any>target)[property] = newValue;
 					return true;
 				}
 
 				const index = Number(property);
 
 				if (isNaN(index)) {
-					target[property] = newValue;
+					(<any>target)[property] = newValue;
 					return true;
 				}
 
 				if (!newValue || !(newValue instanceof HTMLOptionElement)) {
-					throw new this[PropertySymbol.window].Error(
+					throw new target[PropertySymbol.window].Error(
 						`TypeError: Failed to set an indexed property [${index}] on 'HTMLSelectElement': parameter 2 is not of type 'HTMLOptionElement'.`
 					);
 				}
@@ -104,12 +108,12 @@ export default class HTMLSelectElement extends HTMLElement {
 			},
 			deleteProperty(target, property): boolean {
 				if (typeof property === 'symbol') {
-					delete target[property];
+					delete (<any>target)[property];
 					return true;
 				}
 				const index = Number(property);
 				if (isNaN(index)) {
-					delete target[property];
+					delete (<any>target)[property];
 				}
 				return true;
 			},
@@ -144,7 +148,7 @@ export default class HTMLSelectElement extends HTMLElement {
 				}
 
 				if (!descriptor.value || !(descriptor.value instanceof HTMLOptionElement)) {
-					throw new this[PropertySymbol.window].Error(
+					throw new target[PropertySymbol.window].Error(
 						`TypeError: Failed to set an indexed property [${index}] on 'HTMLSelectElement': parameter 2 is not of type 'HTMLOptionElement'.`
 					);
 				}
@@ -170,7 +174,7 @@ export default class HTMLSelectElement extends HTMLElement {
 
 				return true;
 			},
-			getOwnPropertyDescriptor(target, property): PropertyDescriptor {
+			getOwnPropertyDescriptor(target, property): PropertyDescriptor | undefined {
 				if (property in target) {
 					return Object.getOwnPropertyDescriptor(target, property);
 				}
@@ -202,6 +206,28 @@ export default class HTMLSelectElement extends HTMLElement {
 		return proxy;
 	}
 
+	// Events
+
+	/* eslint-disable jsdoc/require-jsdoc */
+
+	public get onchange(): ((event: Event) => void) | null {
+		return ElementEventAttributeUtility.getEventListener(this, 'onchange');
+	}
+
+	public set onchange(value: ((event: Event) => void) | null) {
+		this[PropertySymbol.propertyEventListeners].set('onchange', value);
+	}
+
+	public get oninput(): ((event: Event) => void) | null {
+		return ElementEventAttributeUtility.getEventListener(this, 'oninput');
+	}
+
+	public set oninput(value: ((event: Event) => void) | null) {
+		this[PropertySymbol.propertyEventListeners].set('oninput', value);
+	}
+
+	/* eslint-enable jsdoc/require-jsdoc */
+
 	/**
 	 * Returns length.
 	 *
@@ -452,8 +478,8 @@ export default class HTMLSelectElement extends HTMLElement {
 					const options = QuerySelector.querySelectorAll(this, 'option')[PropertySymbol.items];
 
 					// If we hit the cache, we should recieve the same Array instance as before, which will then contain the selected options.
-					if (options[PropertySymbol.selectedOptions]) {
-						return options[PropertySymbol.selectedOptions];
+					if ((<any>options)[PropertySymbol.selectedOptions]) {
+						return (<any>options)[PropertySymbol.selectedOptions];
 					}
 
 					const selectedOptions = [];
@@ -465,7 +491,7 @@ export default class HTMLSelectElement extends HTMLElement {
 						}
 					}
 
-					options[PropertySymbol.selectedOptions] = selectedOptions;
+					(<any>options)[PropertySymbol.selectedOptions] = selectedOptions;
 
 					return selectedOptions;
 				}
@@ -489,7 +515,7 @@ export default class HTMLSelectElement extends HTMLElement {
 	 *
 	 * @returns Form.
 	 */
-	public get form(): HTMLFormElement {
+	public get form(): HTMLFormElement | null {
 		if (this[PropertySymbol.formNode]) {
 			return this[PropertySymbol.formNode];
 		}
@@ -507,21 +533,36 @@ export default class HTMLSelectElement extends HTMLElement {
 	 */
 	public get willValidate(): boolean {
 		return (
-			this.type !== 'hidden' &&
-			this.type !== 'reset' &&
-			this.type !== 'button' &&
-			!this.disabled &&
-			!this['readOnly']
+			this.type !== 'hidden' && this.type !== 'reset' && this.type !== 'button' && !this.disabled
 		);
 	}
 
+	/**
+	 * @override
+	 */
+	public override get tabIndex(): number {
+		const tabIndex = this.getAttribute('tabindex');
+		if (tabIndex !== null) {
+			const parsed = Number(tabIndex);
+			return isNaN(parsed) ? 0 : parsed;
+		}
+		return 0;
+	}
+
+	/**
+	 * @override
+	 */
+	public override set tabIndex(tabIndex: number) {
+		super.tabIndex = tabIndex;
+	}
+
 	/**
 	 * Returns item from options collection by index.
 	 *
 	 * @param index Index.
 	 */
-	public item(index: number): HTMLOptionElement {
-		return this[PropertySymbol.options].item(index);
+	public item(index: number): HTMLOptionElement | null {
+		return this.options.item(index);
 	}
 
 	/**
@@ -652,7 +693,7 @@ export default class HTMLSelectElement extends HTMLElement {
 	 * @see https://html.spec.whatwg.org/multipage/form-elements.html#selectedness-setting-algorithm
 	 * @param [selectedOption] Selected option.
 	 */
-	public [PropertySymbol.updateSelectedness](selectedOption?: HTMLOptionElement): void {
+	public [PropertySymbol.updateSelectedness](selectedOption?: HTMLOptionElement | null): void {
 		const isMultiple = this.hasAttribute('multiple');
 		const options = QuerySelector.querySelectorAll(this, 'option')[PropertySymbol.items];
 		const selected: HTMLOptionElement[] = [];
@@ -723,7 +764,7 @@ export default class HTMLSelectElement extends HTMLElement {
 	 */
 	#getDisplaySize(): number {
 		if (this.hasAttributeNS(null, 'size')) {
-			const size = parseInt(this.getAttribute('size'));
+			const size = parseInt(this.getAttribute('size')!);
 			if (!isNaN(size) && size >= 0) {
 				return size;
 			}

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

@@ -7,6 +7,7 @@ import Node from '../node/Node.js';
 import Event from '../../event/Event.js';
 import Attr from '../attr/Attr.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
+import ElementEventAttributeUtility from '../element/ElementEventAttributeUtility.js';
 
 /**
  * HTML Slot Element.
@@ -22,7 +23,18 @@ export default class HTMLSlotElement extends HTMLElement {
 	public [PropertySymbol.assignedNodes]: Node[] = [];
 
 	// Events
-	public onslotchange: ((event: Event) => void) | null = null;
+
+	/* eslint-disable jsdoc/require-jsdoc */
+
+	public get onslotchange(): ((event: Event) => void) | null {
+		return ElementEventAttributeUtility.getEventListener(this, 'onslotchange');
+	}
+
+	public set onslotchange(value: ((event: Event) => void) | null) {
+		this[PropertySymbol.propertyEventListeners].set('onslotchange', value);
+	}
+
+	/* eslint-enable jsdoc/require-jsdoc */
 
 	/**
 	 * Returns name.
@@ -56,6 +68,10 @@ export default class HTMLSlotElement extends HTMLElement {
 
 		const host = shadowRoot.host;
 
+		if (!host) {
+			return;
+		}
+
 		for (const node of nodes) {
 			if (node instanceof Node) {
 				if (
@@ -155,7 +171,7 @@ export default class HTMLSlotElement extends HTMLElement {
 	 * @param [options.flatten] A boolean value indicating whether to return the assigned nodes of any available child <slot> elements (true) or not (false). Defaults to false.
 	 * @returns Nodes.
 	 */
-	#assignedNodes(name?: string, options?: { flatten?: boolean }): Node[] {
+	#assignedNodes(name?: string | null, options?: { flatten?: boolean }): Node[] {
 		const shadowRoot = <ShadowRoot>this.getRootNode();
 
 		if (!shadowRoot?.host) {
@@ -171,7 +187,7 @@ export default class HTMLSlotElement extends HTMLElement {
 		const assigned = [];
 
 		for (const slotNode of (<HTMLElement>host)[PropertySymbol.nodeArray]) {
-			const slotName = slotNode['slot'];
+			const slotName = (<HTMLElement>slotNode).slot;
 			if ((name && slotName && slotName === name) || (!name && !slotName)) {
 				if (flatten && slotNode instanceof HTMLSlotElement) {
 					for (const slotChild of slotNode.assignedNodes(options)) {

package/src/nodes/html-source-element/HTMLSourceElement.ts

@@ -94,10 +94,10 @@ export default class HTMLSourceElement extends HTMLElement {
 		}
 
 		try {
-			return new URL(this.getAttribute('src'), this[PropertySymbol.ownerDocument].location.href)
+			return new URL(this.getAttribute('src')!, this[PropertySymbol.ownerDocument].location.href)
 				.href;
 		} catch (e) {
-			return this.getAttribute('src');
+			return this.getAttribute('src') || '';
 		}
 	}
 

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

@@ -74,12 +74,14 @@ export default class HTMLStyleElement extends HTMLElement {
 	 *
 	 * @returns CSS style sheet.
 	 */
-	public get sheet(): CSSStyleSheet {
+	public get sheet(): CSSStyleSheet | null {
 		if (!this[PropertySymbol.isConnected]) {
 			return null;
 		}
 		if (!this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet] = new CSSStyleSheet();
+			this[PropertySymbol.sheet] = new this[PropertySymbol.ownerDocument][
+				PropertySymbol.window
+			].CSSStyleSheet();
 			this[PropertySymbol.sheet].replaceSync(this.textContent);
 		}
 		return this[PropertySymbol.sheet];

package/src/nodes/html-table-cell-element/HTMLTableCellElement.ts

@@ -1,7 +1,7 @@
 import QuerySelector from '../../query-selector/QuerySelector.js';
 import HTMLElement from '../html-element/HTMLElement.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
-import DOMTokenList from '../../dom/DOMTokenList.js';
+import Element from '../element/Element.js';
 
 /**
  * HTMLTableCellElement
@@ -9,8 +9,6 @@ import DOMTokenList from '../../dom/DOMTokenList.js';
  * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement
  */
 export default class HTMLTableCellElement extends HTMLElement {
-	public [PropertySymbol.headers]: DOMTokenList | null = null;
-
 	/**
 	 * Returns abbr.
 	 *
@@ -37,7 +35,7 @@ export default class HTMLTableCellElement extends HTMLElement {
 	public get cellIndex(): number {
 		let parent = this.parentNode;
 		while (parent) {
-			if (parent[PropertySymbol.tagName] === 'TR') {
+			if ((<Element>parent)[PropertySymbol.tagName] === 'TR') {
 				const cells = QuerySelector.querySelectorAll(<HTMLElement>parent, 'td,th')[
 					PropertySymbol.items
 				];

package/src/nodes/html-table-element/HTMLTableElement.ts

@@ -227,7 +227,7 @@ export default class HTMLTableElement extends HTMLElement {
 
 		if (tBodies.length > 0) {
 			const lastTBody = tBodies[tBodies.length - 1];
-			lastTBody.parentNode.insertBefore(tBody, lastTBody.nextSibling);
+			lastTBody.parentNode?.insertBefore(tBody, lastTBody.nextSibling);
 			return tBody;
 		}
 
@@ -297,7 +297,7 @@ export default class HTMLTableElement extends HTMLElement {
 			return row;
 		}
 
-		rows[index].parentNode.insertBefore(row, rows[index]);
+		rows[index].parentNode?.insertBefore(row, rows[index]);
 
 		return row;
 	}

package/src/nodes/html-table-row-element/HTMLTableRowElement.ts

@@ -5,6 +5,7 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 import QuerySelector from '../../query-selector/QuerySelector.js';
 import HTMLTableSectionElement from '../html-table-section-element/HTMLTableSectionElement.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
+import Element from '../element/Element.js';
 
 /**
  * HTMLTableRowElement
@@ -40,7 +41,7 @@ export default class HTMLTableRowElement extends HTMLElement {
 	public get rowIndex(): number {
 		let parent = this.parentNode;
 		while (parent) {
-			if (parent[PropertySymbol.tagName] === 'TABLE') {
+			if ((<Element>parent)[PropertySymbol.tagName] === 'TABLE') {
 				const rows = QuerySelector.querySelectorAll(<HTMLElement>parent, 'tr')[
 					PropertySymbol.items
 				];
@@ -102,7 +103,7 @@ export default class HTMLTableRowElement extends HTMLElement {
 			return cell;
 		}
 
-		cells[index].parentNode.insertBefore(cell, cells[index]);
+		cells[index].parentNode?.insertBefore(cell, cells[index]);
 
 		return cell;
 	}

package/src/nodes/html-template-element/HTMLTemplateElement.ts

@@ -53,14 +53,14 @@ export default class HTMLTemplateElement extends HTMLElement {
 	/**
 	 * @override
 	 */
-	public override get firstChild(): Node {
+	public override get firstChild(): Node | null {
 		return this[PropertySymbol.content].firstChild;
 	}
 
 	/**
 	 * @override
 	 */
-	public override get lastChild(): Node {
+	public override get lastChild(): Node | null {
 		return this[PropertySymbol.content].lastChild;
 	}
 

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

@@ -9,6 +9,7 @@ import ValidityState from '../../validity-state/ValidityState.js';
 import HTMLLabelElement from '../html-label-element/HTMLLabelElement.js';
 import HTMLLabelElementUtility from '../html-label-element/HTMLLabelElementUtility.js';
 import NodeList from '../node/NodeList.js';
+import ElementEventAttributeUtility from '../element/ElementEventAttributeUtility.js';
 
 /**
  * HTML Text Area Element.
@@ -21,22 +22,40 @@ export default class HTMLTextAreaElement extends HTMLElement {
 	public declare cloneNode: (deep?: boolean) => HTMLTextAreaElement;
 	public readonly type = 'textarea';
 
-	// Events
-	public oninput: ((event: Event) => void) | null = null;
-	public onselectionchange: ((event: Event) => void) | null = null;
-
 	// Internal properties
 	public [PropertySymbol.validationMessage] = '';
 	public [PropertySymbol.validity] = new ValidityState(this);
-	public [PropertySymbol.value] = null;
+	public [PropertySymbol.value]: string | null = null;
 	public [PropertySymbol.textAreaNode] = this;
 	public [PropertySymbol.formNode]: HTMLFormElement | null = null;
 
 	// Private properties
-	#selectionStart = null;
-	#selectionEnd = null;
+	#selectionStart: number | null = null;
+	#selectionEnd: number | null = null;
 	#selectionDirection = HTMLInputElementSelectionDirectionEnum.none;
 
+	// Events
+
+	/* eslint-disable jsdoc/require-jsdoc */
+
+	public get oninput(): ((event: Event) => void) | null {
+		return ElementEventAttributeUtility.getEventListener(this, 'oninput');
+	}
+
+	public set oninput(value: ((event: Event) => void) | null) {
+		this[PropertySymbol.propertyEventListeners].set('oninput', value);
+	}
+
+	public get onselectionchange(): ((event: Event) => void) | null {
+		return ElementEventAttributeUtility.getEventListener(this, 'onselectionchange');
+	}
+
+	public set onselectionchange(value: ((event: Event) => void) | null) {
+		this[PropertySymbol.propertyEventListeners].set('onselectionchange', value);
+	}
+
+	/* eslint-enable jsdoc/require-jsdoc */
+
 	/**
 	 * Returns validation message.
 	 *
@@ -409,7 +428,7 @@ export default class HTMLTextAreaElement extends HTMLElement {
 	 *
 	 * @returns Form.
 	 */
-	public get form(): HTMLFormElement {
+	public get form(): HTMLFormElement | null {
 		if (this[PropertySymbol.formNode]) {
 			return this[PropertySymbol.formNode];
 		}
@@ -438,6 +457,25 @@ export default class HTMLTextAreaElement extends HTMLElement {
 		return HTMLLabelElementUtility.getAssociatedLabelElements(this);
 	}
 
+	/**
+	 * @override
+	 */
+	public override get tabIndex(): number {
+		const tabIndex = this.getAttribute('tabindex');
+		if (tabIndex !== null) {
+			const parsed = Number(tabIndex);
+			return isNaN(parsed) ? 0 : parsed;
+		}
+		return 0;
+	}
+
+	/**
+	 * @override
+	 */
+	public override set tabIndex(tabIndex: number) {
+		super.tabIndex = tabIndex;
+	}
+
 	/**
 	 * Selects the text.
 	 */
@@ -478,15 +516,15 @@ export default class HTMLTextAreaElement extends HTMLElement {
 	 */
 	public setRangeText(
 		replacement: string,
-		start: number = null,
-		end: number = null,
+		start: number | null = null,
+		end: number | null = null,
 		selectionMode = HTMLInputElementSelectionModeEnum.preserve
 	): void {
 		if (start === null) {
-			start = this.#selectionStart;
+			start = this.#selectionStart !== null ? this.#selectionStart : 0;
 		}
 		if (end === null) {
-			end = this.#selectionEnd;
+			end = this.#selectionEnd !== null ? this.#selectionEnd : this.value.length;
 		}
 
 		if (start > end) {
@@ -500,8 +538,8 @@ export default class HTMLTextAreaElement extends HTMLElement {
 		end = Math.min(end, this.value.length);
 
 		const val = this.value;
-		let selectionStart = this.#selectionStart;
-		let selectionEnd = this.#selectionEnd;
+		let selectionStart = this.#selectionStart !== null ? this.#selectionStart : 0;
+		let selectionEnd = this.#selectionEnd !== null ? this.#selectionEnd : this.value.length;
 
 		this.value = val.slice(0, start) + replacement + val.slice(end);
 

package/src/nodes/html-track-element/HTMLTrackElement.ts

@@ -2,6 +2,8 @@ import HTMLElement from '../html-element/HTMLElement.js';
 import TextTrack from '../html-media-element/TextTrack.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import TextTrackKindEnum from '../html-media-element/TextTrackKindEnum.js';
+import ElementEventAttributeUtility from '../element/ElementEventAttributeUtility.js';
+import Event from '../../event/Event.js';
 
 /**
  * HTMLTrackElement
@@ -10,7 +12,18 @@ import TextTrackKindEnum from '../html-media-element/TextTrackKindEnum.js';
  */
 export default class HTMLTrackElement extends HTMLElement {
 	// Events
-	public oncuechange: (event: Event) => void = null;
+
+	/* eslint-disable jsdoc/require-jsdoc */
+
+	public get oncuechange(): ((event: Event) => void) | null {
+		return ElementEventAttributeUtility.getEventListener(this, 'oncuechange');
+	}
+
+	public set oncuechange(value: ((event: Event) => void) | null) {
+		this[PropertySymbol.propertyEventListeners].set('oncuechange', value);
+	}
+
+	/* eslint-enable jsdoc/require-jsdoc */
 
 	/**
 	 * Returns kind.
@@ -22,7 +35,7 @@ export default class HTMLTrackElement extends HTMLElement {
 		if (kind === null) {
 			return TextTrackKindEnum.subtitles;
 		}
-		if (!TextTrackKindEnum[kind]) {
+		if (!TextTrackKindEnum[<'subtitles'>kind]) {
 			return TextTrackKindEnum.metadata;
 		}
 		return kind;
@@ -34,7 +47,7 @@ export default class HTMLTrackElement extends HTMLElement {
 	 * @param value Value.
 	 */
 	public set kind(value: string) {
-		if (!TextTrackKindEnum[value]) {
+		if (!TextTrackKindEnum[<'subtitles'>value]) {
 			value = TextTrackKindEnum.metadata;
 		}
 		this.setAttribute('kind', value);
@@ -51,10 +64,10 @@ export default class HTMLTrackElement extends HTMLElement {
 		}
 
 		try {
-			return new URL(this.getAttribute('src'), this[PropertySymbol.ownerDocument].location.href)
+			return new URL(this.getAttribute('src')!, this[PropertySymbol.ownerDocument].location.href)
 				.href;
 		} catch (e) {
-			return this.getAttribute('src');
+			return this.getAttribute('src') || '';
 		}
 	}
 

package/src/nodes/node/ICachedComputedStyleResult.ts

@@ -2,5 +2,5 @@ import CSSStyleDeclarationPropertyManager from '../../css/declaration/property-m
 import ICachedResult from './ICachedResult.js';
 
 export default interface ICachedComputedStyleResult extends ICachedResult {
-	result: WeakRef<CSSStyleDeclarationPropertyManager | null> | null;
+	result: WeakRef<CSSStyleDeclarationPropertyManager> | null;
 }

package/src/nodes/node/ICachedQuerySelectorResult.ts

@@ -2,5 +2,5 @@ import Element from '../element/Element.js';
 import ICachedResult from './ICachedResult.js';
 
 export default interface ICachedQuerySelectorResult extends ICachedResult {
-	result: WeakRef<Element | null> | null;
+	result: WeakRef<Element> | null;
 }

package/src/nodes/node/ICachedStyleResult.ts

@@ -2,5 +2,5 @@ import CSSStyleDeclarationPropertyManager from '../../css/declaration/property-m
 import ICachedResult from './ICachedResult.js';
 
 export default interface ICachedStyleResult extends ICachedResult {
-	result: WeakRef<CSSStyleDeclarationPropertyManager | null> | null;
+	result: WeakRef<CSSStyleDeclarationPropertyManager> | null;
 }