happy-dom 8.9.0 → 9.0.0

package/src/nodes/element/HTMLCollection.ts

@@ -1,16 +1,73 @@
 import IHTMLCollection from './IHTMLCollection';
-import INode from '../node/INode';
 
 /**
  * Class list.
  */
-export default class HTMLCollection extends Array implements IHTMLCollection<INode> {
+export default class HTMLCollection<T, NamedItem>
+	extends Array
+	implements IHTMLCollection<T, NamedItem>
+{
+	protected _namedItems: { [k: string]: T[] } = {};
+
 	/**
 	 * Returns item by index.
 	 *
 	 * @param index Index.
 	 */
-	public item(index: number): INode {
+	public item(index: number): T | null {
 		return index >= 0 && this[index] ? this[index] : null;
 	}
+
+	/**
+	 * Returns named item.
+	 *
+	 * @param name Name.
+	 * @returns Node.
+	 */
+	public namedItem(name: string): NamedItem | null {
+		return this[name] || null;
+	}
+
+	/**
+	 * Appends named item.
+	 *
+	 * @param node Node.
+	 * @param name Name.
+	 */
+	public _appendNamedItem(node: T, name: string): void {
+		if (name) {
+			this._namedItems[name] = this._namedItems[name] || [];
+
+			if (!this._namedItems[name].includes(node)) {
+				this._namedItems[name].push(node);
+			}
+
+			if (!this[name]) {
+				this[name] = this._namedItems[name][0];
+			}
+		}
+	}
+
+	/**
+	 * Appends named item.
+	 *
+	 * @param node Node.
+	 * @param name Name.
+	 */
+	public _removeNamedItem(node: T, name: string): void {
+		if (name && this._namedItems[name]) {
+			const index = this._namedItems[name].indexOf(node);
+
+			if (index > -1) {
+				this._namedItems[name].splice(index, 1);
+
+				if (this._namedItems[name].length === 0) {
+					delete this._namedItems[name];
+					delete this[name];
+				} else {
+					this[name] = this._namedItems[name][0];
+				}
+			}
+		}
+	}
 }

package/src/nodes/element/IHTMLCollection.ts

@@ -1,11 +1,19 @@
 /**
  * HTMLCollection.
  */
-export default interface IHTMLCollection<T> extends Array<T> {
+export default interface IHTMLCollection<T, NamedItem> extends Array<T> {
 	/**
 	 * Returns item by index.
 	 *
 	 * @param index Index.
 	 */
-	item(index: number): T;
+	item(index: number): T | null;
+
+	/**
+	 * Returns named item.
+	 *
+	 * @param name Name.
+	 * @returns Node.
+	 */
+	namedItem(name: string): NamedItem | null;
 }

package/src/nodes/html-anchor-element/HTMLAnchorElement.ts

@@ -31,7 +31,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param download Download.
 	 */
 	public set download(download: string) {
-		this.setAttributeNS(null, 'download', download);
+		this.setAttribute('download', download);
 	}
 
 	/**
@@ -51,7 +51,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public set hash(hash: string) {
 		if (this._url && !HTMLAnchorElementUtility.isBlobURL(this._url)) {
 			this._url.hash = hash;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -65,7 +65,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 			return this._url.toString();
 		}
 
-		return this.getAttributeNS(null, 'href') || '';
+		return this.getAttribute('href') || '';
 	}
 
 	/**
@@ -74,7 +74,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param href Href.
 	 */
 	public set href(href: string) {
-		this.setAttributeNS(null, 'href', href);
+		this.setAttribute('href', href);
 	}
 
 	/**
@@ -83,7 +83,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @returns Hreflang.
 	 */
 	public get hreflang(): string {
-		return this.getAttributeNS(null, 'hreflang') || '';
+		return this.getAttribute('hreflang') || '';
 	}
 
 	/**
@@ -92,7 +92,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param hreflang Hreflang.
 	 */
 	public set hreflang(hreflang: string) {
-		this.setAttributeNS(null, 'hreflang', hreflang);
+		this.setAttribute('hreflang', hreflang);
 	}
 
 	/**
@@ -110,7 +110,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @returns Ping.
 	 */
 	public get ping(): string {
-		return this.getAttributeNS(null, 'ping') || '';
+		return this.getAttribute('ping') || '';
 	}
 
 	/**
@@ -119,7 +119,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param ping Ping.
 	 */
 	public set ping(ping: string) {
-		this.setAttributeNS(null, 'ping', ping);
+		this.setAttribute('ping', ping);
 	}
 
 	/**
@@ -139,7 +139,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public set protocol(protocol: string) {
 		if (this._url && !HTMLAnchorElementUtility.isBlobURL(this._url)) {
 			this._url.protocol = protocol;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -165,7 +165,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 			this._url.protocol != 'file'
 		) {
 			this._url.username = username;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -191,7 +191,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 			this._url.protocol != 'file'
 		) {
 			this._url.password = password;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -212,7 +212,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public set pathname(pathname: string) {
 		if (this._url && !HTMLAnchorElementUtility.isBlobURL(this._url)) {
 			this._url.pathname = pathname;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -238,7 +238,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 			this._url.protocol != 'file'
 		) {
 			this._url.port = port;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -259,7 +259,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public set host(host: string) {
 		if (this._url && !HTMLAnchorElementUtility.isBlobURL(this._url)) {
 			this._url.host = host;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -280,7 +280,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public set hostname(hostname: string) {
 		if (this._url && !HTMLAnchorElementUtility.isBlobURL(this._url)) {
 			this._url.hostname = hostname;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -290,7 +290,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @returns Referrer Policy.
 	 */
 	public get referrerPolicy(): string {
-		return this.getAttributeNS(null, 'referrerPolicy') || '';
+		return this.getAttribute('referrerPolicy') || '';
 	}
 
 	/**
@@ -299,7 +299,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param referrerPolicy Referrer Policy.
 	 */
 	public set referrerPolicy(referrerPolicy: string) {
-		this.setAttributeNS(null, 'referrerPolicy', referrerPolicy);
+		this.setAttribute('referrerPolicy', referrerPolicy);
 	}
 
 	/**
@@ -308,7 +308,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @returns Rel.
 	 */
 	public get rel(): string {
-		return this.getAttributeNS(null, 'rel') || '';
+		return this.getAttribute('rel') || '';
 	}
 
 	/**
@@ -317,7 +317,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param rel Rel.
 	 */
 	public set rel(rel: string) {
-		this.setAttributeNS(null, 'rel', rel);
+		this.setAttribute('rel', rel);
 	}
 
 	/**
@@ -349,7 +349,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public set search(search: string) {
 		if (this._url && !HTMLAnchorElementUtility.isBlobURL(this._url)) {
 			this._url.search = search;
-			this.setAttributeNS(null, 'href', this._url.toString());
+			this.setAttribute('href', this._url.toString());
 		}
 	}
 
@@ -359,7 +359,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @returns target.
 	 */
 	public get target(): string {
-		return this.getAttributeNS(null, 'target') || '';
+		return this.getAttribute('target') || '';
 	}
 
 	/**
@@ -368,7 +368,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param target Target.
 	 */
 	public set target(target: string) {
-		this.setAttributeNS(null, 'target', target);
+		this.setAttribute('target', target);
 	}
 
 	/**
@@ -395,7 +395,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @returns Type.
 	 */
 	public get type(): string {
-		return this.getAttributeNS(null, 'type') || '';
+		return this.getAttribute('type') || '';
 	}
 
 	/**
@@ -404,7 +404,7 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	 * @param type Type.
 	 */
 	public set type(type: string) {
-		this.setAttributeNS(null, 'type', type);
+		this.setAttribute('type', type);
 	}
 
 	/**

package/src/nodes/html-base-element/HTMLBaseElement.ts

@@ -14,7 +14,7 @@ export default class HTMLBaseElement extends HTMLElement implements IHTMLBaseEle
 	 * @returns Href.
 	 */
 	public get href(): string {
-		const href = this.getAttributeNS(null, 'href');
+		const href = this.getAttribute('href');
 		if (href !== null) {
 			return href;
 		}
@@ -27,7 +27,7 @@ export default class HTMLBaseElement extends HTMLElement implements IHTMLBaseEle
 	 * @param href Href.
 	 */
 	public set href(href: string) {
-		this.setAttributeNS(null, 'href', href);
+		this.setAttribute('href', href);
 	}
 
 	/**
@@ -36,7 +36,7 @@ export default class HTMLBaseElement extends HTMLElement implements IHTMLBaseEle
 	 * @returns Target.
 	 */
 	public get target(): string {
-		return this.getAttributeNS(null, 'target') || '';
+		return this.getAttribute('target') || '';
 	}
 
 	/**
@@ -45,7 +45,7 @@ export default class HTMLBaseElement extends HTMLElement implements IHTMLBaseEle
 	 * @param target Target.
 	 */
 	public set target(target: string) {
-		this.setAttributeNS(null, 'target', target);
+		this.setAttribute('target', target);
 	}
 
 	/**

package/src/nodes/html-button-element/HTMLButtonElement.ts

@@ -1,24 +1,54 @@
+import Event from '../../event/Event';
+import ValidityState from '../../validity-state/ValidityState';
+import IAttr from '../attr/IAttr';
+import IDocument from '../document/IDocument';
 import HTMLElement from '../html-element/HTMLElement';
+import HTMLFormElement from '../html-form-element/HTMLFormElement';
+import IHTMLFormElement from '../html-form-element/IHTMLFormElement';
+import IHTMLLabelElement from '../html-label-element/IHTMLLabelElement';
+import INode from '../node/INode';
+import INodeList from '../node/INodeList';
+import NodeList from '../node/NodeList';
+import IShadowRoot from '../shadow-root/IShadowRoot';
 import IHTMLButtonElement from './IHTMLButtonElement';
 
 const BUTTON_TYPES = ['submit', 'reset', 'button', 'menu'];
 
 /**
- 
-We can improve performance a bit if we make the types as a constant.
  * HTML Button Element.
  *
  * Reference:
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement.
  */
 export default class HTMLButtonElement extends HTMLElement implements IHTMLButtonElement {
+	public readonly validationMessage = '';
+	public readonly validity = new ValidityState(this);
+
+	/**
+	 * Returns name.
+	 *
+	 * @returns Name.
+	 */
+	public get name(): string {
+		return this.getAttribute('name') || '';
+	}
+
+	/**
+	 * Sets name.
+	 *
+	 * @param name Name.
+	 */
+	public set name(name: string) {
+		this.setAttribute('name', name);
+	}
+
 	/**
 	 * Returns value.
 	 *
 	 * @returns Value.
 	 */
 	public get value(): string {
-		return this.getAttributeNS(null, 'value');
+		return this.getAttribute('value');
 	}
 
 	/**
@@ -27,7 +57,7 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 	 * @param value Value.
 	 */
 	public set value(value: string) {
-		this.setAttributeNS(null, 'value', value);
+		this.setAttribute('value', value);
 	}
 
 	/**
@@ -36,7 +66,7 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 	 * @returns Disabled.
 	 */
 	public get disabled(): boolean {
-		return this.getAttributeNS(null, 'disabled') !== null;
+		return this.getAttribute('disabled') !== null;
 	}
 
 	/**
@@ -46,9 +76,9 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 	 */
 	public set disabled(disabled: boolean) {
 		if (!disabled) {
-			this.removeAttributeNS(null, 'disabled');
+			this.removeAttribute('disabled');
 		} else {
-			this.setAttributeNS(null, 'disabled', '');
+			this.setAttribute('disabled', '');
 		}
 	}
 
@@ -58,7 +88,7 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 	 * @returns Type
 	 */
 	public get type(): string {
-		return this._sanitizeType(this.getAttributeNS(null, 'type'));
+		return this._sanitizeType(this.getAttribute('type'));
 	}
 
 	/**
@@ -67,12 +97,104 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 	 * @param v Type
 	 */
 	public set type(v: string) {
-		this.setAttributeNS(null, 'type', this._sanitizeType(v));
+		this.setAttribute('type', this._sanitizeType(v));
+	}
+
+	/**
+	 * Returns no validate.
+	 *
+	 * @returns No validate.
+	 */
+	public get formNoValidate(): boolean {
+		return this.getAttribute('formnovalidate') !== null;
+	}
+
+	/**
+	 * Sets no validate.
+	 *
+	 * @param formNoValidate No validate.
+	 */
+	public set formNoValidate(formNoValidate: boolean) {
+		if (!formNoValidate) {
+			this.removeAttribute('formnovalidate');
+		} else {
+			this.setAttribute('formnovalidate', '');
+		}
+	}
+
+	/**
+	 * Returns the parent form element.
+	 *
+	 * @returns Form.
+	 */
+	public get form(): IHTMLFormElement {
+		return <IHTMLFormElement>this._formNode;
+	}
+
+	/**
+	 * Returns the associated label elements.
+	 *
+	 * @returns Label elements.
+	 */
+	public get labels(): INodeList<IHTMLLabelElement> {
+		const id = this.id;
+		if (id) {
+			const rootNode = <IDocument | IShadowRoot>this.getRootNode();
+			const labels = rootNode.querySelectorAll(`label[for="${id}"]`);
+
+			let parent = this.parentNode;
+			while (parent) {
+				if (parent['tagName'] === 'LABEL') {
+					labels.push(<IHTMLLabelElement>parent);
+					break;
+				}
+				parent = parent.parentNode;
+			}
+
+			return <INodeList<IHTMLLabelElement>>labels;
+		}
+		return new NodeList<IHTMLLabelElement>();
+	}
+
+	/**
+	 * Checks validity.
+	 *
+	 * @returns "true" if the field is valid.
+	 */
+	public checkValidity(): boolean {
+		const valid =
+			this.disabled || this.type === 'reset' || this.type === 'button' || this.validity.valid;
+		if (!valid) {
+			this.dispatchEvent(new Event('invalid', { bubbles: true, cancelable: true }));
+		}
+		return valid;
+	}
+
+	/**
+	 * Reports validity.
+	 *
+	 * @returns Validity.
+	 */
+	public reportValidity(): boolean {
+		return this.checkValidity();
 	}
 
 	/**
+	 * Sets validation message.
 	 *
-	 * @param type
+	 * @param message Message.
+	 */
+	public setCustomValidity(message: string): void {
+		(<string>this.validationMessage) = String(message);
+	}
+
+	/**
+	 * Sanitizes type.
+	 *
+	 * TODO: We can improve performance a bit if we make the types as a constant.
+	 *
+	 * @param type Type.
+	 * @returns Type sanitized.
 	 */
 	protected _sanitizeType(type: string): string {
 		type = (type && type.toLowerCase()) || 'submit';
@@ -83,4 +205,56 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 
 		return type;
 	}
+
+	/**
+	 * @override
+	 */
+	public override setAttributeNode(attribute: IAttr): IAttr {
+		const replacedAttribute = super.setAttributeNode(attribute);
+		const oldValue = replacedAttribute ? replacedAttribute.value : null;
+
+		if ((attribute.name === 'id' || attribute.name === 'name') && this._formNode) {
+			if (oldValue) {
+				(<HTMLFormElement>this._formNode)._removeFormControlItem(this, oldValue);
+			}
+			if (attribute.value) {
+				(<HTMLFormElement>this._formNode)._appendFormControlItem(this, attribute.value);
+			}
+		}
+
+		return replacedAttribute;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeAttributeNode(attribute: IAttr): IAttr {
+		super.removeAttributeNode(attribute);
+
+		if ((attribute.name === 'id' || attribute.name === 'name') && this._formNode) {
+			(<HTMLFormElement>this._formNode)._removeFormControlItem(this, attribute.value);
+		}
+
+		return attribute;
+	}
+
+	/**
+	 * @override
+	 */
+	public override _connectToNode(parentNode: INode = null): void {
+		const oldFormNode = <HTMLFormElement>this._formNode;
+
+		super._connectToNode(parentNode);
+
+		if (oldFormNode !== this._formNode) {
+			if (oldFormNode) {
+				oldFormNode._removeFormControlItem(this, this.name);
+				oldFormNode._removeFormControlItem(this, this.id);
+			}
+			if (this._formNode) {
+				(<HTMLFormElement>this._formNode)._appendFormControlItem(this, this.name);
+				(<HTMLFormElement>this._formNode)._appendFormControlItem(this, this.id);
+			}
+		}
+	}
 }

package/src/nodes/html-button-element/IHTMLButtonElement.ts

@@ -1,4 +1,7 @@
 import IHTMLElement from '../html-element/IHTMLElement';
+import IHTMLFormElement from '../html-form-element/IHTMLFormElement';
+import IHTMLLabelElement from '../html-label-element/IHTMLLabelElement';
+import INodeList from '../node/INodeList';
 
 /**
  * HTML Button Element.
@@ -7,7 +10,33 @@ import IHTMLElement from '../html-element/IHTMLElement';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement.
  */
 export default interface IHTMLButtonElement extends IHTMLElement {
-	type: string;
-	disabled: boolean;
+	name: string;
 	value: string;
+	disabled: boolean;
+	type: string;
+	formNoValidate: boolean;
+	readonly form: IHTMLFormElement;
+	readonly validationMessage: string;
+	readonly labels: INodeList<IHTMLLabelElement>;
+
+	/**
+	 * Checks validity.
+	 *
+	 * @returns Validity.
+	 */
+	checkValidity(): boolean;
+
+	/**
+	 * Reports validity.
+	 *
+	 * @returns Validity.
+	 */
+	reportValidity(): boolean;
+
+	/**
+	 * Sets validation message.
+	 *
+	 * @param message Message.
+	 */
+	setCustomValidity(message: string): void;
 }

package/src/nodes/html-dialog-element/HTMLDialogElement.ts

@@ -30,7 +30,7 @@ export default class HTMLDialogElement extends HTMLElement implements IHTMLDialo
 	 * @param [returnValue] ReturnValue.
 	 */
 	public close(returnValue = ''): void {
-		this.removeAttributeNS(null, 'open');
+		this.removeAttribute('open');
 		this.returnValue = returnValue;
 		this.dispatchEvent(new Event('close'));
 	}
@@ -39,13 +39,13 @@ export default class HTMLDialogElement extends HTMLElement implements IHTMLDialo
 	 * Shows the modal.
 	 */
 	public showModal(): void {
-		this.setAttributeNS(null, 'open', '');
+		this.setAttribute('open', '');
 	}
 
 	/**
 	 * Shows the dialog.
 	 */
 	public show(): void {
-		this.setAttributeNS(null, 'open', '');
+		this.setAttribute('open', '');
 	}
 }