happy-dom 13.6.2 → 13.7.0

package/src/nodes/html-form-element/HTMLFormElement.ts

@@ -10,6 +10,11 @@ import IHTMLInputElement from '../html-input-element/IHTMLInputElement.js';
 import IHTMLTextAreaElement from '../html-text-area-element/IHTMLTextAreaElement.js';
 import IHTMLSelectElement from '../html-select-element/IHTMLSelectElement.js';
 import IHTMLButtonElement from '../html-button-element/IHTMLButtonElement.js';
+import IBrowserFrame from '../../browser/types/IBrowserFrame.js';
+import BrowserFrameNavigator from '../../browser/utilities/BrowserFrameNavigator.js';
+import FormData from '../../form-data/FormData.js';
+import Element from '../element/Element.js';
+import Node from '../node/Node.js';
 
 /**
  * HTML Form Element.
@@ -28,6 +33,19 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 	public onreset: (event: Event) => void | null = null;
 	public onsubmit: (event: Event) => void | null = null;
 
+	// Private properties
+	#browserFrame: IBrowserFrame;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param browserFrame Browser frame.
+	 */
+	constructor(browserFrame: IBrowserFrame) {
+		super();
+		this.#browserFrame = browserFrame;
+	}
+
 	/**
 	 * Returns elements.
 	 *
@@ -106,7 +124,18 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 	 * @returns Action.
 	 */
 	public get action(): string {
-		return this.getAttribute('action') || '';
+		if (!this.hasAttribute('action')) {
+			return this[PropertySymbol.ownerDocument].location.href;
+		}
+
+		try {
+			return new URL(
+				this.getAttribute('action') || '',
+				this[PropertySymbol.ownerDocument].location.href
+			).href;
+		} catch (e) {
+			return '';
+		}
 	}
 
 	/**
@@ -214,10 +243,10 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 
 	/**
 	 * Submits form. No submit event is raised. In particular, the form's "submit" event handler is not run.
-	 *
-	 * In Happy DOM this means that nothing happens.
 	 */
-	public submit(): void {}
+	public submit(): void {
+		this.#submit();
+	}
 
 	/**
 	 * Submits form, reports validity and raises submit event.
@@ -230,6 +259,7 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 			this.dispatchEvent(
 				new SubmitEvent('submit', { bubbles: true, cancelable: true, submitter: submitter || this })
 			);
+			this.#submit(submitter);
 		}
 	}
 
@@ -375,8 +405,84 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 	 */
 	protected [PropertySymbol.isValidPropertyName](name: string): boolean {
 		return (
-			!this.constructor.prototype.hasOwnProperty(name) &&
+			!!name &&
+			!HTMLFormElement.prototype.hasOwnProperty(name) &&
+			!HTMLElement.prototype.hasOwnProperty(name) &&
+			!Element.prototype.hasOwnProperty(name) &&
+			!Node.prototype.hasOwnProperty(name) &&
 			(isNaN(Number(name)) || name.includes('.'))
 		);
 	}
+
+	/**
+	 * Submits form.
+	 *
+	 * @param [submitter] Submitter.
+	 */
+	#submit(submitter?: IHTMLInputElement | IHTMLButtonElement): void {
+		const action = submitter?.hasAttribute('formaction')
+			? submitter?.formAction || this.action
+			: this.action;
+
+		if (!action) {
+			// The URL is invalid when the action is empty.
+			// This is what Chrome does when the URL is invalid.
+			this[PropertySymbol.ownerDocument].location.hash = '#blocked';
+			return;
+		}
+
+		const method = submitter?.formMethod || this.method;
+		const formData = new FormData(this);
+		let targetFrame: IBrowserFrame;
+
+		switch (submitter?.formTarget || this.target) {
+			default:
+			case '_self':
+				targetFrame = this.#browserFrame;
+				break;
+			case '_top':
+				targetFrame = this.#browserFrame.page.mainFrame;
+				break;
+			case '_parent':
+				targetFrame = this.#browserFrame.parentFrame ?? this.#browserFrame;
+				break;
+			case '_blank':
+				const newPage = this.#browserFrame.page.context.newPage();
+				targetFrame = newPage.mainFrame;
+				targetFrame[PropertySymbol.openerFrame] = this.#browserFrame;
+				break;
+		}
+
+		if (method === 'get') {
+			const url = new URL(action);
+
+			for (const [key, value] of formData) {
+				if (typeof value === 'string') {
+					url.searchParams.append(key, value);
+				}
+			}
+
+			BrowserFrameNavigator.navigate({
+				windowClass: this[PropertySymbol.ownerDocument][PropertySymbol.defaultView].constructor,
+				frame: targetFrame,
+				url: url.href,
+				goToOptions: {
+					referrer: this.#browserFrame.page.mainFrame.window.location.origin
+				}
+			});
+
+			return;
+		}
+
+		BrowserFrameNavigator.navigate({
+			windowClass: this[PropertySymbol.ownerDocument][PropertySymbol.defaultView].constructor,
+			frame: targetFrame,
+			method: method,
+			url: action,
+			formData,
+			goToOptions: {
+				referrer: this.#browserFrame.page.mainFrame.window.location.origin
+			}
+		});
+	}
 }

package/src/nodes/html-iframe-element/HTMLIFrameElement.ts

@@ -172,6 +172,22 @@ export default class HTMLIFrameElement extends HTMLElement implements IHTMLIFram
 		this.setAttribute('srcdoc', srcdoc);
 	}
 
+	/**
+	 * Returns referrer policy.
+	 */
+	public get referrerPolicy(): string {
+		return this.getAttribute('referrerpolicy') || '';
+	}
+
+	/**
+	 * Sets referrer policy.
+	 *
+	 * @param referrerPolicy Referrer policy.
+	 */
+	public set referrerPolicy(referrerPolicy: string) {
+		this.setAttribute('referrerpolicy', referrerPolicy);
+	}
+
 	/**
 	 * Returns content document.
 	 *

package/src/nodes/html-iframe-element/HTMLIFrameElementPageLoader.ts

@@ -10,6 +10,7 @@ import DOMException from '../../exception/DOMException.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import BrowserFrameURL from '../../browser/utilities/BrowserFrameURL.js';
 import BrowserFrameFactory from '../../browser/utilities/BrowserFrameFactory.js';
+import IRequestReferrerPolicy from '../../fetch/types/IRequestReferrerPolicy.js';
 
 /**
  * HTML Iframe page loader.
@@ -84,7 +85,10 @@ export default class HTMLIFrameElementPageLoader {
 			parentWindow;
 
 		this.#browserIFrame
-			.goto(targetURL.href)
+			.goto(targetURL.href, {
+				referrer: originURL.origin,
+				referrerPolicy: <IRequestReferrerPolicy>this.#element.referrerPolicy
+			})
 			.then(() => this.#element.dispatchEvent(new Event('load')))
 			.catch((error) => WindowErrorUtility.dispatchError(this.#element, error));
 

package/src/nodes/html-iframe-element/IHTMLIFrameElement.ts

@@ -18,6 +18,7 @@ export default interface IHTMLIFrameElement extends IHTMLElement {
 	name: string | null;
 	sandbox: string | null;
 	srcdoc: string | null;
+	referrerPolicy: string | null;
 	readonly contentDocument: IDocument | null;
 	readonly contentWindow: IBrowserWindow | ICrossOriginBrowserWindow | null;
 

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

@@ -23,6 +23,7 @@ import HTMLInputElementDateUtility from './HTMLInputElementDateUtility.js';
 import HTMLLabelElementUtility from '../html-label-element/HTMLLabelElementUtility.js';
 import INamedNodeMap from '../../named-node-map/INamedNodeMap.js';
 import HTMLInputElementNamedNodeMap from './HTMLInputElementNamedNodeMap.js';
+import PointerEvent from '../../event/events/PointerEvent.js';
 import { URL } from 'url';
 
 /**
@@ -98,48 +99,124 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 	/**
 	 * Returns form action.
 	 *
-	 * @returns URL.
+	 * @returns Form action.
 	 */
 	public get formAction(): string {
-		return (
-			this.getAttribute('formaction') ||
-			(<IHTMLFormElement>this[PropertySymbol.formNode])?.action ||
-			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location.href
-		);
+		if (!this.hasAttribute('formaction')) {
+			return this[PropertySymbol.ownerDocument].location.href;
+		}
+
+		try {
+			return new URL(
+				this.getAttribute('formaction') || '',
+				this[PropertySymbol.ownerDocument].location.href
+			).href;
+		} catch (e) {
+			return '';
+		}
 	}
 
 	/**
 	 * Sets form action.
 	 *
-	 * @param url URL.
+	 * @param formAction Form action.
 	 */
-	public set formAction(url: string) {
-		try {
-			new URL(url);
-		} catch (error) {
-			return;
-		}
-		this.setAttribute('formaction', url);
+	public set formAction(formAction: string) {
+		this.setAttribute('formaction', formAction);
+	}
+
+	/**
+	 * Returns form enctype.
+	 *
+	 * @returns Form enctype.
+	 */
+	public get formEnctype(): string {
+		return this.getAttribute('formenctype') || '';
+	}
+
+	/**
+	 * Sets form enctype.
+	 *
+	 * @param formEnctype Form enctype.
+	 */
+	public set formEnctype(formEnctype: string) {
+		this.setAttribute('formenctype', formEnctype);
 	}
 
 	/**
 	 * Returns form method.
+	 *
+	 * @returns Form method.
 	 */
 	public get formMethod(): string {
-		return (
-			this.getAttribute('formmethod') ||
-			(<IHTMLFormElement>this[PropertySymbol.formNode])?.method ||
-			''
-		);
+		return this.getAttribute('formmethod') || '';
 	}
 
 	/**
 	 * Sets form method.
 	 *
-	 * @param method Method.
+	 * @param formMethod Form method.
+	 */
+	public set formMethod(formMethod: string) {
+		this.setAttribute('formmethod', formMethod);
+	}
+
+	/**
+	 * 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 form target.
+	 *
+	 * @returns Form target.
 	 */
-	public set formMethod(method: string) {
-		this.setAttribute('formmethod', method);
+	public get formTarget(): string {
+		return this.getAttribute('formtarget') || '';
+	}
+
+	/**
+	 * Sets form target.
+	 *
+	 * @param formTarget Form target.
+	 */
+	public set formTarget(formTarget: string) {
+		this.setAttribute('formtarget', formTarget);
+	}
+
+	/**
+	 * Returns the parent form element.
+	 *
+	 * @returns Form.
+	 */
+	public get form(): IHTMLFormElement | null {
+		if (this[PropertySymbol.formNode]) {
+			return <IHTMLFormElement>this[PropertySymbol.formNode];
+		}
+		if (!this.isConnected) {
+			return null;
+		}
+		const formID = this.getAttribute('form');
+		return formID
+			? <IHTMLFormElement>this[PropertySymbol.ownerDocument].getElementById(formID)
+			: null;
 	}
 
 	/**
@@ -834,37 +911,6 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 		this.setSelectionRange(this.#selectionStart, this.#selectionEnd, direction);
 	}
 
-	/**
-	 * 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[PropertySymbol.formNode];
-	}
-
 	/**
 	 * Returns "true" if it will validate.
 	 *
@@ -1263,7 +1309,12 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 	 */
 	public override dispatchEvent(event: Event): boolean {
 		// Do nothing if the input element is disabled and the event is a click event.
-		if (event.type === 'click' && event.eventPhase === EventPhaseEnum.none && this.disabled) {
+		if (
+			event.type === 'click' &&
+			event instanceof PointerEvent &&
+			event.eventPhase === EventPhaseEnum.none &&
+			this.disabled
+		) {
 			return false;
 		}
 
@@ -1274,7 +1325,8 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 		if (
 			(event.eventPhase === EventPhaseEnum.atTarget ||
 				event.eventPhase === EventPhaseEnum.bubbling) &&
-			event.type === 'click'
+			event.type === 'click' &&
+			event instanceof PointerEvent
 		) {
 			const inputType = this.type;
 			if (inputType === 'checkbox' || inputType === 'radio') {
@@ -1290,6 +1342,7 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 			(event.eventPhase === EventPhaseEnum.atTarget ||
 				event.eventPhase === EventPhaseEnum.bubbling) &&
 			event.type === 'click' &&
+			event instanceof PointerEvent &&
 			this[PropertySymbol.isConnected]
 		) {
 			const inputType = this.type;
@@ -1298,12 +1351,12 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 					this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
 					this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
 				} else if (inputType === 'submit') {
-					const form = <IHTMLFormElement>this[PropertySymbol.formNode];
+					const form = this.form;
 					if (form) {
 						form.requestSubmit(this);
 					}
 				} else if (inputType === 'reset' && this[PropertySymbol.isConnected]) {
-					const form = <IHTMLFormElement>this[PropertySymbol.formNode];
+					const form = this.form;
 					if (form) {
 						form.reset();
 					}
@@ -1317,6 +1370,7 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 			(event.eventPhase === EventPhaseEnum.atTarget ||
 				event.eventPhase === EventPhaseEnum.bubbling) &&
 			event.type === 'click' &&
+			event instanceof PointerEvent &&
 			previousCheckedValue !== null
 		) {
 			const inputType = this.type;

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

@@ -19,8 +19,10 @@ export default interface IHTMLInputElement extends IHTMLElement {
 	readonly labels: INodeList<IHTMLLabelElement>;
 	readonly validity: ValidityState;
 	formAction: string;
+	formEnctype: string;
 	formMethod: string;
 	formNoValidate: boolean;
+	formTarget: string;
 	defaultChecked: boolean;
 	files: IFileList<File>;
 	defaultValue: string;

package/src/nodes/html-label-element/HTMLLabelElement.ts

@@ -80,6 +80,7 @@ export default class HTMLLabelElement extends HTMLElement implements IHTMLLabelE
 
 		if (
 			event.type === 'click' &&
+			event instanceof PointerEvent &&
 			(event.eventPhase === EventPhaseEnum.atTarget || event.eventPhase === EventPhaseEnum.bubbling)
 		) {
 			const control = this.control;

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

@@ -52,7 +52,7 @@ export default class HTMLLinkElementStyleSheetLoader {
 		try {
 			absoluteURL = new URL(
 				url,
-				element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location
+				element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location.href
 			).href;
 		} catch (error) {
 			this.#loadedStyleSheetURL = null;

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

@@ -47,7 +47,7 @@ export default class HTMLScriptElementScriptLoader {
 		try {
 			absoluteURL = new URL(
 				url,
-				element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location
+				element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location.href
 			).href;
 		} catch (error) {
 			this.#loadedScriptURL = null;

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

@@ -14,7 +14,6 @@ import IHTMLOptionsCollection from './IHTMLOptionsCollection.js';
 import INode from '../node/INode.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
 import HTMLFormElement from '../html-form-element/HTMLFormElement.js';
-import IHTMLCollection from '../element/IHTMLCollection.js';
 import HTMLLabelElementUtility from '../html-label-element/HTMLLabelElementUtility.js';
 import INamedNodeMap from '../../named-node-map/INamedNodeMap.js';
 import HTMLSelectElementNamedNodeMap from './HTMLSelectElementNamedNodeMap.js';
@@ -363,7 +362,7 @@ export default class HTMLSelectElement extends HTMLElement implements IHTMLSelec
 	 * @param [selectedOption] Selected option.
 	 */
 	public [PropertySymbol.updateOptionItems](selectedOption?: IHTMLOptionElement): void {
-		const optionElements = <IHTMLCollection<IHTMLOptionElement>>this.getElementsByTagName('option');
+		const optionElements = this.getElementsByTagName('option');
 
 		if (optionElements.length < this[PropertySymbol.options].length) {
 			this[PropertySymbol.options].splice(

package/src/nodes/node/Node.ts

@@ -4,7 +4,6 @@ import MutationListener from '../../mutation-observer/MutationListener.js';
 import INode from './INode.js';
 import IDocument from '../document/IDocument.js';
 import IElement from '../element/IElement.js';
-import IHTMLBaseElement from '../html-base-element/IHTMLBaseElement.js';
 import NodeTypeEnum from './NodeTypeEnum.js';
 import NodeDocumentPositionEnum from './NodeDocumentPositionEnum.js';
 import NodeUtility from './NodeUtility.js';
@@ -266,7 +265,7 @@ export default class Node extends EventTarget implements INode {
 	 * @returns Base URI.
 	 */
 	public get baseURI(): string {
-		const base = <IHTMLBaseElement>this[PropertySymbol.ownerDocument].querySelector('base');
+		const base = this[PropertySymbol.ownerDocument].querySelector('base');
 		if (base) {
 			return base.href;
 		}

package/src/nodes/parent-node/IParentNode.ts

@@ -2,6 +2,8 @@ import IHTMLCollection from '../element/IHTMLCollection.js';
 import IElement from '../element/IElement.js';
 import INode from '../node/INode.js';
 import INodeList from '../node/INodeList.js';
+import IHTMLElementTagNameMap from '../../config/IHTMLElementTagNameMap.js';
+import ISVGElementTagNameMap from '../../config/ISVGElementTagNameMap.js';
 
 export default interface IParentNode extends INode {
 	readonly childElementCount: number;
@@ -29,8 +31,28 @@ export default interface IParentNode extends INode {
 	 * @param selector CSS selector.
 	 * @returns Matching element.
 	 */
+	querySelector<K extends keyof IHTMLElementTagNameMap>(
+		selector: K
+	): IHTMLElementTagNameMap[K] | null;
+	querySelector<K extends keyof ISVGElementTagNameMap>(
+		selector: K
+	): ISVGElementTagNameMap[K] | null;
 	querySelector(selector: string): IElement | null;
 
+	/**
+	 * Query CSS selector to find matching nodes.
+	 *
+	 * @param selector CSS selector.
+	 * @returns Matching elements.
+	 */
+	querySelectorAll<K extends keyof IHTMLElementTagNameMap>(
+		selector: K
+	): INodeList<IHTMLElementTagNameMap[K]>;
+	querySelectorAll<K extends keyof ISVGElementTagNameMap>(
+		selector: K
+	): INodeList<ISVGElementTagNameMap[K]>;
+	querySelectorAll(selector: string): INodeList<IElement>;
+
 	/**
 	 * Query CSS selector to find matching nodes.
 	 *
@@ -53,6 +75,12 @@ export default interface IParentNode extends INode {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
+	getElementsByTagName<K extends keyof IHTMLElementTagNameMap>(
+		tagName: K
+	): IHTMLCollection<IHTMLElementTagNameMap[K]>;
+	getElementsByTagName<K extends keyof ISVGElementTagNameMap>(
+		tagName: K
+	): IHTMLCollection<ISVGElementTagNameMap[K]>;
 	getElementsByTagName(tagName: string): IHTMLCollection<IElement>;
 
 	/**
@@ -62,6 +90,14 @@ export default interface IParentNode extends INode {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
+	getElementsByTagNameNS<K extends keyof IHTMLElementTagNameMap>(
+		namespaceURI: 'http://www.w3.org/1999/xhtml',
+		tagName: K
+	): IHTMLCollection<IHTMLElementTagNameMap[K]>;
+	getElementsByTagNameNS<K extends keyof ISVGElementTagNameMap>(
+		namespaceURI: 'http://www.w3.org/2000/svg',
+		tagName: K
+	): IHTMLCollection<ISVGElementTagNameMap[K]>;
 	getElementsByTagNameNS(namespaceURI: string, tagName: string): IHTMLCollection<IElement>;
 
 	/**

package/src/nodes/parent-node/ParentNodeUtility.ts

@@ -75,6 +75,7 @@ export default class ParentNodeUtility {
 
 		this.append(parentNode, ...nodes);
 	}
+
 	/**
 	 * Returns an elements by class name.
 	 *