happy-dom 15.0.0 → 15.1.0

package/src/nodes/element/Element.ts

@@ -9,7 +9,6 @@ import XMLSerializer from '../../xml-serializer/XMLSerializer.js';
 import ChildNodeUtility from '../child-node/ChildNodeUtility.js';
 import ParentNodeUtility from '../parent-node/ParentNodeUtility.js';
 import NonDocumentChildNodeUtility from '../child-node/NonDocumentChildNodeUtility.js';
-import DOMException from '../../exception/DOMException.js';
 import HTMLCollection from './HTMLCollection.js';
 import Text from '../text/Text.js';
 import DOMRectList from './DOMRectList.js';
@@ -19,7 +18,7 @@ import Event from '../../event/Event.js';
 import EventPhaseEnum from '../../event/EventPhaseEnum.js';
 import DocumentFragment from '../document-fragment/DocumentFragment.js';
 import WindowErrorUtility from '../../window/WindowErrorUtility.js';
-import WindowBrowserSettingsReader from '../../window/WindowBrowserSettingsReader.js';
+import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 import BrowserErrorCaptureEnum from '../../browser/enums/BrowserErrorCaptureEnum.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
 import IHTMLElementTagNameMap from '../../config/IHTMLElementTagNameMap.js';
@@ -93,9 +92,6 @@ export default class Element
 	public [PropertySymbol.classList]: DOMTokenList | null = null;
 	public [PropertySymbol.isValue]: string | null = null;
 	public [PropertySymbol.nodeType] = NodeTypeEnum.elementNode;
-	public [PropertySymbol.tagName]: string | null = this.constructor[PropertySymbol.tagName] || null;
-	public [PropertySymbol.localName]: string | null =
-		this.constructor[PropertySymbol.localName] || null;
 	public [PropertySymbol.prefix]: string | null = null;
 	public [PropertySymbol.shadowRoot]: ShadowRoot | null = null;
 	public [PropertySymbol.scrollHeight] = 0;
@@ -104,10 +100,33 @@ export default class Element
 	public [PropertySymbol.scrollLeft] = 0;
 	public [PropertySymbol.attributes] = new NamedNodeMap(this);
 	public [PropertySymbol.attributesProxy]: NamedNodeMap | null = null;
-	public [PropertySymbol.namespaceURI]: string | null =
-		this.constructor[PropertySymbol.namespaceURI] || null;
 	public [PropertySymbol.children]: HTMLCollection<Element> | null = null;
 	public [PropertySymbol.computedStyle]: CSSStyleDeclaration | null = null;
+	public declare [PropertySymbol.tagName]: string | null;
+	public declare [PropertySymbol.localName]: string | null;
+	public declare [PropertySymbol.namespaceURI]: string | null;
+
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+
+		// CustomElementRegistry will populate the properties upon calling "CustomElementRegistry.define()".
+		// Elements that can be constructed with the "new" keyword (without using "Document.createElement()") will also populate the properties.
+
+		if (!this[PropertySymbol.tagName]) {
+			this[PropertySymbol.tagName] = null;
+		}
+
+		if (!this[PropertySymbol.localName]) {
+			this[PropertySymbol.localName] = null;
+		}
+
+		if (!this[PropertySymbol.namespaceURI]) {
+			this[PropertySymbol.namespaceURI] = null;
+		}
+	}
 
 	/**
 	 * Returns tag name.
@@ -825,33 +844,35 @@ export default class Element
 		serializable?: boolean;
 		slotAssignment?: 'named' | 'manual';
 	}): ShadowRoot {
+		const window = this[PropertySymbol.window];
+
 		if (!init) {
-			throw new TypeError(
+			throw new window.TypeError(
 				"Failed to execute 'attachShadow' on 'Element': 1 argument required, but only 0 present."
 			);
 		}
 
 		if (!init.mode) {
-			throw new TypeError(
+			throw new window.TypeError(
 				"Failed to execute 'attachShadow' on 'Element': Failed to read the 'mode' property from 'ShadowRootInit': Required member is undefined."
 			);
 		}
 
 		if (init.mode !== 'open' && init.mode !== 'closed') {
-			throw new TypeError(
+			throw new window.TypeError(
 				`Failed to execute 'attachShadow' on 'Element': Failed to read the 'mode' property from 'ShadowRootInit': The provided value '${init.mode}' is not a valid enum value of type ShadowRootMode.`
 			);
 		}
 
 		if (this[PropertySymbol.shadowRoot]) {
-			throw new DOMException(
+			throw new window.DOMException(
 				"Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree."
 			);
 		}
 
-		const shadowRoot = NodeFactory.createNode<ShadowRoot>(
+		const shadowRoot = NodeFactory.createNode(
 			this[PropertySymbol.ownerDocument],
-			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].ShadowRoot
+			this[PropertySymbol.window].ShadowRoot
 		);
 
 		this[PropertySymbol.shadowRoot] = shadowRoot;
@@ -1148,7 +1169,7 @@ export default class Element
 	 */
 	public removeAttributeNode(attribute: Attr): Attr | null {
 		if (attribute[PropertySymbol.ownerElement] !== this) {
-			throw new DOMException(
+			throw new this[PropertySymbol.window].DOMException(
 				"Failed to execute 'removeAttributeNode' on 'Element': The node provided is owned by another element."
 			);
 		}
@@ -1165,7 +1186,7 @@ export default class Element
 	public scroll(x: { top?: number; left?: number; behavior?: string } | number, y?: number): void {
 		if (typeof x === 'object') {
 			if (x.behavior === 'smooth') {
-				this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].setTimeout(() => {
+				this[PropertySymbol.window].setTimeout(() => {
 					if (x.top !== undefined) {
 						(<number>this.scrollTop) = x.top;
 					}
@@ -1222,33 +1243,27 @@ export default class Element
 	 */
 	public override dispatchEvent(event: Event): boolean {
 		const returnValue = super.dispatchEvent(event);
-		const browserSettings = WindowBrowserSettingsReader.getSettings(
-			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow]
-		);
+		const browserSettings = new WindowBrowserContext(this[PropertySymbol.window]).getSettings();
 
 		if (
 			browserSettings &&
 			!browserSettings.disableJavaScriptEvaluation &&
-			(event.eventPhase === EventPhaseEnum.atTarget ||
-				event.eventPhase === EventPhaseEnum.bubbling) &&
+			event.eventPhase === EventPhaseEnum.none &&
 			!event[PropertySymbol.immediatePropagationStopped]
 		) {
 			const attribute = this.getAttribute('on' + event.type);
 
 			if (attribute && !event[PropertySymbol.immediatePropagationStopped]) {
-				const code = `//# sourceURL=${
-					this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location.href
-				}\n${attribute}`;
+				const code = `//# sourceURL=${this[PropertySymbol.window].location.href}\n${attribute}`;
 
 				if (
 					browserSettings.disableErrorCapturing ||
 					browserSettings.errorCapture !== BrowserErrorCaptureEnum.tryAndCatch
 				) {
-					this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].eval(code);
+					this[PropertySymbol.window].eval(code);
 				} else {
-					WindowErrorUtility.captureError(
-						this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow],
-						() => this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].eval(code)
+					WindowErrorUtility.captureError(this[PropertySymbol.window], () =>
+						this[PropertySymbol.window].eval(code)
 					);
 				}
 			}
@@ -1460,7 +1475,7 @@ export default class Element
 		}
 
 		const document = this[PropertySymbol.ownerDocument];
-		const window = document[PropertySymbol.ownerWindow];
+		const window = this[PropertySymbol.window];
 
 		// We should not add the identifier when inside a shadow root
 		if (this[PropertySymbol.rootNode] && this[PropertySymbol.rootNode] !== document) {
@@ -1506,7 +1521,7 @@ export default class Element
 		}
 
 		const document = this[PropertySymbol.ownerDocument];
-		const window = document[PropertySymbol.ownerWindow];
+		const window = this[PropertySymbol.window];
 
 		// We should not add the identifier when inside a shadow root
 		if (this[PropertySymbol.rootNode] && this[PropertySymbol.rootNode] !== document) {

package/src/nodes/element/HTMLCollection.ts

@@ -31,10 +31,7 @@ export default class HTMLCollection<T extends Element, NamedItem = T> {
 		ClassMethodBinder.bindMethods(
 			this,
 			this.constructor !== HTMLCollection ? [HTMLCollection, this.constructor] : [HTMLCollection],
-			{
-				bindSymbols: true,
-				forwardToPrototype: true
-			}
+			{ bindSymbols: true }
 		);
 
 		return new Proxy(this, {

package/src/nodes/element/NamedNodeMap.ts

@@ -4,6 +4,7 @@ import DOMException from '../../exception/DOMException.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import Element from './Element.js';
 import NamespaceURI from '../../config/NamespaceURI.js';
+import ClassMethodBinder from '../../ClassMethodBinder.js';
 
 /**
  * Named Node Map.
@@ -28,6 +29,9 @@ export default class NamedNodeMap {
 	 */
 	constructor(ownerElement: Element) {
 		this[PropertySymbol.ownerElement] = ownerElement;
+		ClassMethodBinder.bindMethods(this, [NamedNodeMap], {
+			bindSymbols: true
+		});
 	}
 
 	/**

package/src/nodes/element/NamedNodeMapProxyFactory.ts

@@ -1,6 +1,5 @@
 /* eslint-disable filenames/match-exported */
 
-import ClassMethodBinder from '../../ClassMethodBinder.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import NamedNodeMap from './NamedNodeMap.js';
 
@@ -19,11 +18,6 @@ export default class NamedNodeMapProxyFactory {
 		const namedItems = namedNodeMap[PropertySymbol.namedItems];
 		const namespaceItems = namedNodeMap[PropertySymbol.namespaceItems];
 
-		ClassMethodBinder.bindMethods(namedNodeMap, [NamedNodeMap], {
-			bindSymbols: true,
-			forwardToPrototype: true
-		});
-
 		return new Proxy<NamedNodeMap>(namedNodeMap, {
 			get: (target, property) => {
 				if (property === 'length') {

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

@@ -376,10 +376,10 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLHyper
 		const returnValue = super.dispatchEvent(event);
 
 		if (
+			!event[PropertySymbol.defaultPrevented] &&
 			event.type === 'click' &&
 			event instanceof MouseEvent &&
-			event.eventPhase === EventPhaseEnum.none &&
-			!event.defaultPrevented
+			event.eventPhase === EventPhaseEnum.none
 		) {
 			const href = this.href;
 
@@ -394,13 +394,9 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLHyper
 					features.push('noopener');
 				}
 
-				this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].open(
-					href,
-					this.target || '_self',
-					features.join(',')
-				);
+				this[PropertySymbol.window].open(href, this.target || '_self', features.join(','));
 
-				if (this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].closed) {
+				if (this[PropertySymbol.window].closed) {
 					event.stopImmediatePropagation();
 				}
 			}

package/src/nodes/html-area-element/HTMLAreaElement.ts

@@ -3,9 +3,9 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 import DOMTokenList from '../element/DOMTokenList.js';
 import HTMLHyperlinkElementUtility from '../html-hyperlink-element/HTMLHyperlinkElementUtility.js';
 import IHTMLHyperlinkElement from '../html-hyperlink-element/IHTMLHyperlinkElement.js';
-import PointerEvent from '../../event/events/PointerEvent.js';
 import Event from '../../event/Event.js';
 import EventPhaseEnum from '../../event/EventPhaseEnum.js';
+import MouseEvent from '../../event/events/MouseEvent.js';
 
 /**
  * HTMLAreaElement
@@ -375,19 +375,15 @@ export default class HTMLAreaElement extends HTMLElement implements IHTMLHyperli
 		const returnValue = super.dispatchEvent(event);
 
 		if (
-			event.type === 'click' &&
-			event instanceof PointerEvent &&
-			(event.eventPhase === EventPhaseEnum.atTarget ||
-				event.eventPhase === EventPhaseEnum.bubbling) &&
-			!event.defaultPrevented
+			!event[PropertySymbol.defaultPrevented] &&
+			event[PropertySymbol.type] === 'click' &&
+			event[PropertySymbol.eventPhase] === EventPhaseEnum.none &&
+			event instanceof MouseEvent
 		) {
 			const href = this.href;
 			if (href) {
-				this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].open(
-					href,
-					this.target || '_self'
-				);
-				if (this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].closed) {
+				this[PropertySymbol.window].open(href, this.target || '_self');
+				if (this[PropertySymbol.window].closed) {
 					event.stopImmediatePropagation();
 				}
 			}

package/src/nodes/html-audio-element/Audio.ts

@@ -1,4 +1,6 @@
+import NamespaceURI from '../../config/NamespaceURI.js';
 import HTMLAudioElement from './HTMLAudioElement.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
 
 /**
  * Image as constructor.
@@ -7,6 +9,10 @@ import HTMLAudioElement from './HTMLAudioElement.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio.
  */
 export default class Audio extends HTMLAudioElement {
+	public [PropertySymbol.tagName] = 'AUDIO';
+	public [PropertySymbol.localName] = 'audio';
+	public [PropertySymbol.namespaceURI] = NamespaceURI.html;
+
 	/**
 	 * Constructor.
 	 *

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

@@ -22,6 +22,7 @@ export default class HTMLButtonElement extends HTMLElement {
 	public [PropertySymbol.validationMessage] = '';
 	public [PropertySymbol.validity] = new ValidityState(this);
 	public [PropertySymbol.formNode]: HTMLFormElement | null = null;
+	public [PropertySymbol.popoverTargetElement]: HTMLElement | null = null;
 
 	/**
 	 * Returns validation message.
@@ -105,16 +106,20 @@ export default class HTMLButtonElement extends HTMLElement {
 	 * @returns Type
 	 */
 	public get type(): string {
-		return this.#sanitizeType(this.getAttribute('type'));
+		const type = this.getAttribute('type');
+		if (type === null || !BUTTON_TYPES.includes(type)) {
+			return 'submit';
+		}
+		return type;
 	}
 
 	/**
 	 * Sets type
 	 *
-	 * @param v Type
+	 * @param value Type
 	 */
-	public set type(v: string) {
-		this.setAttribute('type', this.#sanitizeType(v));
+	public set type(value: string) {
+		this.setAttribute('type', value);
 	}
 
 	/**
@@ -250,6 +255,51 @@ export default class HTMLButtonElement extends HTMLElement {
 		return HTMLLabelElementUtility.getAssociatedLabelElements(this);
 	}
 
+	/**
+	 * Returns popover target element.
+	 *
+	 * @returns Popover target element.
+	 */
+	public get popoverTargetElement(): HTMLElement | null {
+		return this[PropertySymbol.popoverTargetElement];
+	}
+
+	/**
+	 * Sets popover target element.
+	 *
+	 * @param popoverTargetElement Popover target element.
+	 */
+	public set popoverTargetElement(popoverTargetElement: HTMLElement | null) {
+		if (popoverTargetElement !== null && !(popoverTargetElement instanceof HTMLElement)) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to set the 'popoverTargetElement' property on 'HTMLInputElement': Failed to convert value to 'Element'.`
+			);
+		}
+		this[PropertySymbol.popoverTargetElement] = popoverTargetElement;
+	}
+
+	/**
+	 * Returns popover target action.
+	 *
+	 * @returns Popover target action.
+	 */
+	public get popoverTargetAction(): string {
+		const value = this.getAttribute('popovertargetaction');
+		if (value === null || (value !== 'hide' && value !== 'show' && value !== 'toggle')) {
+			return 'toggle';
+		}
+		return value;
+	}
+
+	/**
+	 * Sets popover target action.
+	 *
+	 * @param value Popover target action.
+	 */
+	public set popoverTargetAction(value: string) {
+		this.setAttribute('popovertargetaction', value);
+	}
+
 	/**
 	 * Checks validity.
 	 *
@@ -301,44 +351,24 @@ export default class HTMLButtonElement extends HTMLElement {
 		const returnValue = super.dispatchEvent(event);
 
 		if (
+			!event[PropertySymbol.defaultPrevented] &&
 			event.type === 'click' &&
-			event instanceof MouseEvent &&
-			(event.eventPhase === EventPhaseEnum.atTarget ||
-				event.eventPhase === EventPhaseEnum.bubbling) &&
-			this[PropertySymbol.isConnected]
+			event.eventPhase === EventPhaseEnum.none &&
+			event instanceof MouseEvent
 		) {
-			const form = this.form;
-			if (!form) {
-				return returnValue;
-			}
-			switch (this.type) {
-				case 'submit':
-					form.requestSubmit(this);
-					break;
-				case 'reset':
-					form.reset();
-					break;
+			const type = this.type;
+			if (type === 'submit' || type === 'reset') {
+				const form = this.form;
+				if (form) {
+					if (type === 'submit' && this[PropertySymbol.isConnected]) {
+						form.requestSubmit(this);
+					} else if (type === 'reset') {
+						form.reset();
+					}
+				}
 			}
 		}
 
 		return returnValue;
 	}
-
-	/**
-	 * Sanitizes type.
-	 *
-	 * TODO: We can improve performance a bit if we make the types as a constant.
-	 *
-	 * @param type Type.
-	 * @returns Type sanitized.
-	 */
-	#sanitizeType(type: string): string {
-		type = (type && type.toLowerCase()) || 'submit';
-
-		if (!BUTTON_TYPES.includes(type)) {
-			type = 'submit';
-		}
-
-		return type;
-	}
 }

package/src/nodes/html-canvas-element/HTMLCanvasElement.ts

@@ -1,5 +1,4 @@
 import HTMLElement from '../html-element/HTMLElement.js';
-import CanvasCaptureMediaStreamTrack from './CanvasCaptureMediaStreamTrack.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import Blob from '../../file/Blob.js';
 import OffscreenCanvas from './OffscreenCanvas.js';
@@ -66,8 +65,11 @@ export default class HTMLCanvasElement extends HTMLElement {
 	 * @returns Capture stream.
 	 */
 	public captureStream(frameRate?: number): MediaStream {
-		const stream = new MediaStream();
-		const track = new CanvasCaptureMediaStreamTrack(PropertySymbol.illegalConstructor, this);
+		const stream = new this[PropertySymbol.window].MediaStream();
+		const track = new this[PropertySymbol.window].CanvasCaptureMediaStreamTrack(
+			PropertySymbol.illegalConstructor,
+			this
+		);
 
 		track[PropertySymbol.kind] = 'video';
 		track[PropertySymbol.capabilities].deviceId = DEVICE_ID;

package/src/nodes/html-document/HTMLDocument.ts

@@ -1,5 +1,3 @@
-import IBrowserFrame from '../../browser/types/IBrowserFrame.js';
-import BrowserWindow from '../../window/BrowserWindow.js';
 import Document from '../document/Document.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 
@@ -9,13 +7,9 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 export default class HTMLDocument extends Document {
 	/**
 	 * Constructor.
-	 *
-	 * @param injected Injected properties.
-	 * @param injected.browserFrame Browser frame.
-	 * @param injected.window Window.
 	 */
-	constructor(injected: { browserFrame: IBrowserFrame; window: BrowserWindow }) {
-		super(injected);
+	constructor() {
+		super();
 
 		// Default document elements
 		const doctype = this[PropertySymbol.implementation].createDocumentType('html', '', '');