happy-dom 15.0.0 → 15.1.0

package/src/nodes/html-element/HTMLElement.ts

@@ -3,10 +3,10 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../../css/declaration/CSSStyleDeclaration.js';
 import PointerEvent from '../../event/events/PointerEvent.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
-import DOMException from '../../exception/DOMException.js';
 import Event from '../../event/Event.js';
 import HTMLElementUtility from './HTMLElementUtility.js';
 import DOMStringMap from '../element/DOMStringMap.js';
+import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 
 /**
  * HTML Element.
@@ -58,8 +58,10 @@ export default class HTMLElement extends Element {
 	public [PropertySymbol.clientLeft] = 0;
 	public [PropertySymbol.clientTop] = 0;
 	public [PropertySymbol.style]: CSSStyleDeclaration = null;
-	private [PropertySymbol.dataset]: DOMStringMap | null = null;
-	private [PropertySymbol.customElementDefineCallback]: () => void = null;
+	public [PropertySymbol.dataset]: DOMStringMap | null = null;
+
+	// Private properties
+	#customElementDefineCallback: () => void = null;
 
 	/**
 	 * Returns access key.
@@ -217,10 +219,7 @@ export default class HTMLElement extends Element {
 		for (const childNode of this[PropertySymbol.nodeArray]) {
 			if (childNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
 				const childElement = <HTMLElement>childNode;
-				const computedStyle =
-					this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].getComputedStyle(
-						childElement
-					);
+				const computedStyle = this[PropertySymbol.window].getComputedStyle(childElement);
 
 				if (
 					childElement[PropertySymbol.tagName] !== 'SCRIPT' &&
@@ -301,7 +300,7 @@ export default class HTMLElement extends Element {
 	 */
 	public set outerText(text: string) {
 		if (!this[PropertySymbol.parentNode]) {
-			throw new DOMException(
+			throw new this[PropertySymbol.window].DOMException(
 				"Failed to set the 'outerHTML' property on 'Element': This element has no parent node."
 			);
 		}
@@ -453,18 +452,50 @@ export default class HTMLElement extends Element {
 		this.setAttribute('title', title);
 	}
 
+	/**
+	 * Returns popover.
+	 *
+	 * @returns Popover.
+	 */
+	public get popover(): string | null {
+		const value = this.getAttribute('popover');
+		switch (value) {
+			case null:
+				return null;
+			case '':
+			case 'auto':
+				return 'auto';
+			case 'manual':
+				return 'manual';
+			default:
+				return 'manual';
+		}
+	}
+
+	/**
+	 * Sets popover.
+	 *
+	 * @param value Value.
+	 */
+	public set popover(value: string | null) {
+		if (value === null) {
+			this.removeAttribute('popover');
+			return;
+		}
+		this.setAttribute('popover', value);
+	}
+
 	/**
 	 * Triggers a click event.
 	 */
 	public click(): void {
-		const event = new PointerEvent('click', {
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		});
-		event[PropertySymbol.target] = this;
-		event[PropertySymbol.currentTarget] = this;
-		this.dispatchEvent(event);
+		this.dispatchEvent(
+			new PointerEvent('click', {
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			})
+		);
 	}
 
 	/**
@@ -499,103 +530,22 @@ export default class HTMLElement extends Element {
 	 * @see https://html.spec.whatwg.org/multipage/dom.html#htmlelement
 	 */
 	public override [PropertySymbol.connectedToNode](): void {
+		const window = this[PropertySymbol.window];
 		const localName = this[PropertySymbol.localName];
+		const allCallbacks = window.customElements[PropertySymbol.callbacks];
 
 		// This element can potentially be a custom element that has not been defined yet
 		// Therefore we need to register a callback for when it is defined in CustomElementRegistry and replace it with the registered element (see #404)
-		if (
-			this.constructor === HTMLElement &&
-			localName.includes('-') &&
-			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].customElements[
-				PropertySymbol.callbacks
-			]
-		) {
-			const callbacks =
-				this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].customElements[
-					PropertySymbol.callbacks
-				];
-
-			if (!this[PropertySymbol.customElementDefineCallback]) {
-				const callback = (): void => {
-					if (this[PropertySymbol.parentNode]) {
-						const newElement = <HTMLElement>(
-							this[PropertySymbol.ownerDocument].createElement(localName)
-						);
-						const newCache = newElement[PropertySymbol.cache];
-						newElement[PropertySymbol.nodeArray] = this[PropertySymbol.nodeArray];
-						newElement[PropertySymbol.elementArray] = this[PropertySymbol.elementArray];
-						newElement[PropertySymbol.childNodes] = null;
-						newElement[PropertySymbol.children] = null;
-						newElement[PropertySymbol.isConnected] = this[PropertySymbol.isConnected];
-
-						newElement[PropertySymbol.rootNode] = this[PropertySymbol.rootNode];
-						newElement[PropertySymbol.formNode] = this[PropertySymbol.formNode];
-						newElement[PropertySymbol.parentNode] = this[PropertySymbol.parentNode];
-						newElement[PropertySymbol.selectNode] = this[PropertySymbol.selectNode];
-						newElement[PropertySymbol.textAreaNode] = this[PropertySymbol.textAreaNode];
-						newElement[PropertySymbol.mutationListeners] = this[PropertySymbol.mutationListeners];
-						newElement[PropertySymbol.isValue] = this[PropertySymbol.isValue];
-						newElement[PropertySymbol.cache] = this[PropertySymbol.cache];
-						newElement[PropertySymbol.affectsCache] = this[PropertySymbol.affectsCache];
-						newElement[PropertySymbol.attributes][PropertySymbol.namedItems] =
-							this[PropertySymbol.attributes][PropertySymbol.namedItems];
-						newElement[PropertySymbol.attributes][PropertySymbol.namespaceItems] =
-							this[PropertySymbol.attributes][PropertySymbol.namespaceItems];
-
-						for (const attr of newElement[PropertySymbol.attributes][
-							PropertySymbol.namedItems
-						].values()) {
-							attr[PropertySymbol.ownerElement] = newElement;
-						}
-
-						this[PropertySymbol.nodeArray] = [];
-						this[PropertySymbol.elementArray] = [];
-						this[PropertySymbol.childNodes] = null;
-						this[PropertySymbol.children] = null;
-
-						this[PropertySymbol.rootNode] = null;
-						this[PropertySymbol.formNode] = null;
-						this[PropertySymbol.selectNode] = null;
-						this[PropertySymbol.textAreaNode] = null;
-						this[PropertySymbol.mutationListeners] = [];
-						this[PropertySymbol.isValue] = null;
-						this[PropertySymbol.cache] = newCache;
-						this[PropertySymbol.affectsCache] = [];
-						this[PropertySymbol.attributes][PropertySymbol.namedItems] = new Map();
-						this[PropertySymbol.attributes][PropertySymbol.namespaceItems] = new Map();
-
-						const parentChildNodes = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
-						const parentChildElements =
-							this[PropertySymbol.parentNode][PropertySymbol.elementArray];
-						parentChildNodes[parentChildNodes.indexOf(this)] = newElement;
-						parentChildElements[parentChildElements.indexOf(this)] = newElement;
-
-						if (newElement[PropertySymbol.isConnected] && newElement.connectedCallback) {
-							const result = <void | Promise<void>>newElement.connectedCallback();
-							/**
-							 * It is common to import dependencies in the connectedCallback() method of web components.
-							 * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
-							 *
-							 * @see https://github.com/capricorn86/happy-dom/issues/1442
-							 */
-							if (result instanceof Promise) {
-								const asyncTaskManager =
-									this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow][
-										PropertySymbol.asyncTaskManager
-									];
-								const taskID = asyncTaskManager.startTask();
-								result
-									.then(() => asyncTaskManager.endTask(taskID))
-									.catch(() => asyncTaskManager.endTask(taskID));
-							}
-						}
-
-						this[PropertySymbol.disconnectedFromDocument]();
-					}
-				};
-				callbacks[localName] = callbacks[localName] || [];
-				callbacks[localName].push(callback);
-				this[PropertySymbol.customElementDefineCallback] = callback;
+		if (this.constructor === window.HTMLElement && localName.includes('-') && allCallbacks) {
+			if (!this.#customElementDefineCallback) {
+				const callback = this.#onCustomElementConnected.bind(this);
+				const callbacks = allCallbacks.get(localName);
+				if (callbacks) {
+					callbacks.push(callback);
+				} else {
+					allCallbacks.set(localName, [callback]);
+				}
+				this.#customElementDefineCallback = callback;
 			}
 		}
 
@@ -606,36 +556,108 @@ export default class HTMLElement extends Element {
 	 * @override
 	 */
 	public override [PropertySymbol.disconnectedFromNode](): void {
+		const window = this[PropertySymbol.window];
 		const localName = this[PropertySymbol.localName];
+		const allCallbacks = window.customElements[PropertySymbol.callbacks];
 
 		// This element can potentially be a custom element that has not been defined yet
 		// Therefore we need to register a callback for when it is defined in CustomElementRegistry and replace it with the registered element (see #404)
-		if (
-			this.constructor === HTMLElement &&
-			localName.includes('-') &&
-			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].customElements[
-				PropertySymbol.callbacks
-			]
-		) {
-			const callbacks =
-				this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].customElements[
-					PropertySymbol.callbacks
-				];
-
-			if (callbacks[localName] && this[PropertySymbol.customElementDefineCallback]) {
-				const index = callbacks[localName].indexOf(
-					this[PropertySymbol.customElementDefineCallback]
-				);
+		if (this.constructor === window.HTMLElement && localName.includes('-') && allCallbacks) {
+			const callbacks = allCallbacks.get(localName);
+
+			if (callbacks && this.#customElementDefineCallback) {
+				const index = callbacks.indexOf(this.#customElementDefineCallback);
 				if (index !== -1) {
-					callbacks[localName].splice(index, 1);
+					callbacks.splice(index, 1);
 				}
-				if (!callbacks[localName].length) {
-					delete callbacks[localName];
+				if (!callbacks.length) {
+					allCallbacks.delete(localName);
 				}
-				this[PropertySymbol.customElementDefineCallback] = null;
+				this.#customElementDefineCallback = null;
 			}
 		}
 
 		super[PropertySymbol.disconnectedFromNode]();
 	}
+
+	/**
+	 * Triggered when a custom element is connected to the DOM.
+	 */
+	#onCustomElementConnected(): void {
+		if (!this[PropertySymbol.parentNode]) {
+			return;
+		}
+
+		const localName = this[PropertySymbol.localName];
+		const newElement = <HTMLElement>this[PropertySymbol.ownerDocument].createElement(localName);
+		const newCache = newElement[PropertySymbol.cache];
+
+		newElement[PropertySymbol.nodeArray] = this[PropertySymbol.nodeArray];
+		newElement[PropertySymbol.elementArray] = this[PropertySymbol.elementArray];
+		newElement[PropertySymbol.childNodes] = null;
+		newElement[PropertySymbol.children] = null;
+		newElement[PropertySymbol.isConnected] = this[PropertySymbol.isConnected];
+
+		newElement[PropertySymbol.rootNode] = this[PropertySymbol.rootNode];
+		newElement[PropertySymbol.formNode] = this[PropertySymbol.formNode];
+		newElement[PropertySymbol.parentNode] = this[PropertySymbol.parentNode];
+		newElement[PropertySymbol.selectNode] = this[PropertySymbol.selectNode];
+		newElement[PropertySymbol.textAreaNode] = this[PropertySymbol.textAreaNode];
+		newElement[PropertySymbol.mutationListeners] = this[PropertySymbol.mutationListeners];
+		newElement[PropertySymbol.isValue] = this[PropertySymbol.isValue];
+		newElement[PropertySymbol.cache] = this[PropertySymbol.cache];
+		newElement[PropertySymbol.affectsCache] = this[PropertySymbol.affectsCache];
+		newElement[PropertySymbol.attributes][PropertySymbol.namedItems] =
+			this[PropertySymbol.attributes][PropertySymbol.namedItems];
+		newElement[PropertySymbol.attributes][PropertySymbol.namespaceItems] =
+			this[PropertySymbol.attributes][PropertySymbol.namespaceItems];
+
+		for (const attr of newElement[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
+			attr[PropertySymbol.ownerElement] = newElement;
+		}
+
+		this[PropertySymbol.nodeArray] = [];
+		this[PropertySymbol.elementArray] = [];
+		this[PropertySymbol.childNodes] = null;
+		this[PropertySymbol.children] = null;
+
+		this[PropertySymbol.rootNode] = null;
+		this[PropertySymbol.formNode] = null;
+		this[PropertySymbol.selectNode] = null;
+		this[PropertySymbol.textAreaNode] = null;
+		this[PropertySymbol.mutationListeners] = [];
+		this[PropertySymbol.isValue] = null;
+		this[PropertySymbol.cache] = newCache;
+		this[PropertySymbol.affectsCache] = [];
+		this[PropertySymbol.attributes][PropertySymbol.namedItems] = new Map();
+		this[PropertySymbol.attributes][PropertySymbol.namespaceItems] = new Map();
+
+		const parentChildNodes = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
+		const parentChildElements = this[PropertySymbol.parentNode][PropertySymbol.elementArray];
+		parentChildNodes[parentChildNodes.indexOf(this)] = newElement;
+		parentChildElements[parentChildElements.indexOf(this)] = newElement;
+
+		if (newElement[PropertySymbol.isConnected] && newElement.connectedCallback) {
+			const result = <void | Promise<void>>newElement.connectedCallback();
+			/**
+			 * It is common to import dependencies in the connectedCallback() method of web components.
+			 * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
+			 *
+			 * @see https://github.com/capricorn86/happy-dom/issues/1442
+			 */
+			if (result instanceof Promise) {
+				const asyncTaskManager = new WindowBrowserContext(
+					this[PropertySymbol.window]
+				).getAsyncTaskManager();
+				if (asyncTaskManager) {
+					const taskID = asyncTaskManager.startTask();
+					result
+						.then(() => asyncTaskManager.endTask(taskID))
+						.catch(() => asyncTaskManager.endTask(taskID));
+				}
+			}
+		}
+
+		this[PropertySymbol.disconnectedFromDocument]();
+	}
 }

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

@@ -17,6 +17,7 @@ import Element from '../element/Element.js';
 import EventTarget from '../../event/EventTarget.js';
 import Node from '../node/Node.js';
 import ClassMethodBinder from '../../ClassMethodBinder.js';
+import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 
 /**
  * HTML Form Element.
@@ -37,19 +38,12 @@ export default class HTMLFormElement extends HTMLElement {
 	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) {
+	constructor() {
 		super();
 
-		this.#browserFrame = browserFrame;
-
 		ClassMethodBinder.bindMethods(
 			this,
 			[EventTarget, Node, Element, HTMLElement, HTMLFormElement],
@@ -576,7 +570,11 @@ export default class HTMLFormElement extends HTMLElement {
 		const action = submitter?.hasAttribute('formaction')
 			? submitter?.formAction || this.action
 			: this.action;
-		const browserFrame = this.#browserFrame;
+		const browserFrame = new WindowBrowserContext(this[PropertySymbol.window]).getBrowserFrame();
+
+		if (!browserFrame) {
+			return;
+		}
 
 		if (!action) {
 			// The URL is invalid when the action is empty.

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

@@ -10,9 +10,9 @@ import Attr from '../attr/Attr.js';
 import BrowserFrameFactory from '../../browser/utilities/BrowserFrameFactory.js';
 import BrowserFrameURL from '../../browser/utilities/BrowserFrameURL.js';
 import WindowErrorUtility from '../../window/WindowErrorUtility.js';
-import DOMException from '../../exception/DOMException.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import IRequestReferrerPolicy from '../../fetch/types/IRequestReferrerPolicy.js';
+import WindowBrowserContext from '../../window/WindowBrowserContext.js';
 
 const SANDBOX_FLAGS = [
 	'allow-downloads',
@@ -51,21 +51,9 @@ export default class HTMLIFrameElement extends HTMLElement {
 	#contentWindowContainer: { window: BrowserWindow | CrossOriginBrowserWindow | null } = {
 		window: null
 	};
-	#browserFrame: IBrowserFrame;
-	#browserChildFrame: IBrowserFrame;
+	#iframe: IBrowserFrame;
 	#loadedSrcdoc: string | null = null;
 
-	/**
-	 * Constructor.
-	 *
-	 * @param browserFrame Browser frame.
-	 */
-	constructor(browserFrame) {
-		super();
-
-		this.#browserFrame = browserFrame;
-	}
-
 	/**
 	 * Returns source.
 	 *
@@ -306,7 +294,7 @@ export default class HTMLIFrameElement extends HTMLElement {
 	 * @param vconsole
 	 */
 	#validateSandboxFlags(): void {
-		const window = this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
+		const window = this[PropertySymbol.window];
 		const invalidFlags: string[] = [];
 
 		for (const token of this.sandbox) {
@@ -338,7 +326,12 @@ export default class HTMLIFrameElement extends HTMLElement {
 		}
 
 		const srcdoc = this.getAttribute('srcdoc');
-		const window = this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
+		const window = this[PropertySymbol.window];
+		const browserFrame = new WindowBrowserContext(window).getBrowserFrame();
+
+		if (!browserFrame) {
+			return;
+		}
 
 		if (srcdoc !== null) {
 			if (this.#loadedSrcdoc === srcdoc) {
@@ -347,20 +340,20 @@ export default class HTMLIFrameElement extends HTMLElement {
 
 			this.#unloadPage();
 
-			this.#browserChildFrame = BrowserFrameFactory.createChildFrame(this.#browserFrame);
-			this.#browserChildFrame.url = 'about:srcdoc';
+			this.#iframe = BrowserFrameFactory.createChildFrame(browserFrame);
+			this.#iframe.url = 'about:srcdoc';
 
-			this.#contentWindowContainer.window = this.#browserChildFrame.window;
+			this.#contentWindowContainer.window = this.#iframe.window;
 
-			this.#browserChildFrame.window[PropertySymbol.top] = this.#browserFrame.window.top;
-			this.#browserChildFrame.window[PropertySymbol.parent] = this.#browserFrame.window;
+			this.#iframe.window[PropertySymbol.top] = browserFrame.window.top;
+			this.#iframe.window[PropertySymbol.parent] = browserFrame.window;
 
-			this.#browserChildFrame.window.document.open();
-			this.#browserChildFrame.window.document.write(srcdoc);
+			this.#iframe.window.document.open();
+			this.#iframe.window.document.write(srcdoc);
 
 			this.#loadedSrcdoc = srcdoc;
 
-			this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].requestAnimationFrame(() =>
+			this[PropertySymbol.window].requestAnimationFrame(() =>
 				this.dispatchEvent(new Event('load'))
 			);
 			return;
@@ -370,20 +363,17 @@ export default class HTMLIFrameElement extends HTMLElement {
 			this.#unloadPage();
 		}
 
-		const originURL = this.#browserFrame.window.location;
-		const targetURL = BrowserFrameURL.getRelativeURL(this.#browserFrame, this.src);
+		const originURL = browserFrame.window.location;
+		const targetURL = BrowserFrameURL.getRelativeURL(browserFrame, this.src);
 
-		if (
-			this.#browserChildFrame &&
-			this.#browserChildFrame.window.location.href === targetURL.href
-		) {
+		if (this.#iframe && this.#iframe.window.location.href === targetURL.href) {
 			return;
 		}
 
-		if (this.#browserFrame.page.context.browser.settings.disableIframePageLoading) {
+		if (browserFrame.page.context.browser.settings.disableIframePageLoading) {
 			WindowErrorUtility.dispatchError(
 				this,
-				new DOMException(
+				new window.DOMException(
 					`Failed to load iframe page "${targetURL.href}". Iframe page loading is disabled.`,
 					DOMExceptionNameEnum.notSupportedError
 				)
@@ -395,13 +385,12 @@ export default class HTMLIFrameElement extends HTMLElement {
 		const isSameOrigin = originURL.origin === targetURL.origin || targetURL.origin === 'null';
 		const parentWindow = isSameOrigin ? window : new CrossOriginBrowserWindow(window);
 
-		this.#browserChildFrame =
-			this.#browserChildFrame ?? BrowserFrameFactory.createChildFrame(this.#browserFrame);
+		this.#iframe = this.#iframe ?? BrowserFrameFactory.createChildFrame(browserFrame);
 
-		this.#browserChildFrame.window[PropertySymbol.top] = <BrowserWindow>parentWindow;
-		this.#browserChildFrame.window[PropertySymbol.parent] = <BrowserWindow>parentWindow;
+		this.#iframe.window[PropertySymbol.top] = <BrowserWindow>parentWindow;
+		this.#iframe.window[PropertySymbol.parent] = <BrowserWindow>parentWindow;
 
-		this.#browserChildFrame
+		this.#iframe
 			.goto(targetURL.href, {
 				referrer: originURL.origin,
 				referrerPolicy: <IRequestReferrerPolicy>this.referrerPolicy
@@ -410,17 +399,17 @@ export default class HTMLIFrameElement extends HTMLElement {
 			.catch((error) => WindowErrorUtility.dispatchError(this, error));
 
 		this.#contentWindowContainer.window = isSameOrigin
-			? this.#browserChildFrame.window
-			: new CrossOriginBrowserWindow(this.#browserChildFrame.window, window);
+			? this.#iframe.window
+			: new CrossOriginBrowserWindow(this.#iframe.window, window);
 	}
 
 	/**
 	 * Unloads an iframe page.
 	 */
 	#unloadPage(): void {
-		if (this.#browserChildFrame) {
-			BrowserFrameFactory.destroyFrame(this.#browserChildFrame);
-			this.#browserChildFrame = null;
+		if (this.#iframe) {
+			BrowserFrameFactory.destroyFrame(this.#iframe);
+			this.#iframe = null;
 		}
 		this.#contentWindowContainer.window = null;
 		this.#loadedSrcdoc = null;

package/src/nodes/html-image-element/Image.ts

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