happy-dom 13.0.7 → 13.1.1

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

@@ -18,23 +18,6 @@ import HTMLElementNamedNodeMap from './HTMLElementNamedNodeMap.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.
  */
 export default class HTMLElement extends Element implements IHTMLElement {
-	public override readonly attributes: INamedNodeMap = new HTMLElementNamedNodeMap(this);
-	public readonly accessKey = '';
-	public readonly accessKeyLabel = '';
-	public readonly contentEditable = 'inherit';
-	public readonly isContentEditable = false;
-	public readonly offsetHeight = 0;
-	public readonly offsetWidth = 0;
-	public readonly offsetLeft = 0;
-	public readonly offsetTop = 0;
-	public readonly clientHeight = 0;
-	public readonly clientWidth = 0;
-	public readonly clientLeft = 0;
-	public readonly clientTop = 0;
-
-	public [PropertySymbol.style]: CSSStyleDeclaration = null;
-	#dataset: Dataset = null;
-
 	// Events
 	public oncopy: (event: Event) => void | null = null;
 	public oncut: (event: Event) => void | null = null;
@@ -62,6 +45,141 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	public ontransitionrun: (event: Event) => void | null = null;
 	public ontransitionstart: (event: Event) => void | null = null;
 
+	// Internal properties
+	public override [PropertySymbol.attributes]: INamedNodeMap = new HTMLElementNamedNodeMap(this);
+	public [PropertySymbol.accessKey] = '';
+	public [PropertySymbol.contentEditable] = 'inherit';
+	public [PropertySymbol.isContentEditable] = false;
+	public [PropertySymbol.offsetHeight] = 0;
+	public [PropertySymbol.offsetWidth] = 0;
+	public [PropertySymbol.offsetLeft] = 0;
+	public [PropertySymbol.offsetTop] = 0;
+	public [PropertySymbol.clientHeight] = 0;
+	public [PropertySymbol.clientWidth] = 0;
+	public [PropertySymbol.clientLeft] = 0;
+	public [PropertySymbol.clientTop] = 0;
+	public [PropertySymbol.style]: CSSStyleDeclaration = null;
+
+	// Private properties
+	#dataset: Dataset = null;
+
+	/**
+	 * Returns access key.
+	 *
+	 * @returns Access key.
+	 */
+	public get accessKey(): string {
+		return this[PropertySymbol.accessKey];
+	}
+
+	/**
+	 * Sets access key.
+	 *
+	 * @param accessKey Access key.
+	 */
+	public set accessKey(accessKey: string) {
+		this[PropertySymbol.accessKey] = accessKey;
+	}
+
+	/**
+	 * Returns content editable.
+	 *
+	 * @returns Content editable.
+	 */
+	public get contentEditable(): string {
+		return this[PropertySymbol.contentEditable];
+	}
+
+	/**
+	 * Sets content editable.
+	 *
+	 * @param contentEditable Content editable.
+	 */
+	public set contentEditable(contentEditable: string) {
+		this[PropertySymbol.contentEditable] = contentEditable;
+	}
+
+	/**
+	 * Returns is content editable.
+	 *
+	 * @returns Is content editable.
+	 */
+	public get isContentEditable(): boolean {
+		return this[PropertySymbol.isContentEditable];
+	}
+
+	/**
+	 * Returns offset height.
+	 *
+	 * @returns Offset height.
+	 */
+	public get offsetHeight(): number {
+		return this[PropertySymbol.offsetHeight];
+	}
+
+	/**
+	 * Returns offset width.
+	 *
+	 * @returns Offset width.
+	 */
+	public get offsetWidth(): number {
+		return this[PropertySymbol.offsetWidth];
+	}
+
+	/**
+	 * Returns offset left.
+	 *
+	 * @returns Offset left.
+	 */
+	public get offsetLeft(): number {
+		return this[PropertySymbol.offsetLeft];
+	}
+
+	/**
+	 * Returns offset top.
+	 *
+	 * @returns Offset top.
+	 */
+	public get offsetTop(): number {
+		return this[PropertySymbol.offsetTop];
+	}
+
+	/**
+	 * Returns client height.
+	 *
+	 * @returns Client height.
+	 */
+	public get clientHeight(): number {
+		return this[PropertySymbol.clientHeight];
+	}
+
+	/**
+	 * Returns client width.
+	 *
+	 * @returns Client width.
+	 */
+	public get clientWidth(): number {
+		return this[PropertySymbol.clientWidth];
+	}
+
+	/**
+	 * Returns client left.
+	 *
+	 * @returns Client left.
+	 */
+	public get clientLeft(): number {
+		return this[PropertySymbol.clientLeft];
+	}
+
+	/**
+	 * Returns client top.
+	 *
+	 * @returns Client top.
+	 */
+	public get clientTop(): number {
+		return this[PropertySymbol.clientTop];
+	}
+
 	/**
 	 * Returns tab index.
 	 *
@@ -92,19 +210,24 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	 * @returns Inner text.
 	 */
 	public get innerText(): string {
-		if (!this.isConnected) {
+		if (!this[PropertySymbol.isConnected]) {
 			return this.textContent;
 		}
 
 		let result = '';
 
 		for (const childNode of this[PropertySymbol.childNodes]) {
-			if (childNode.nodeType === NodeTypeEnum.elementNode) {
+			if (childNode[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
 				const childElement = <IHTMLElement>childNode;
 				const computedStyle =
-					this.ownerDocument[PropertySymbol.defaultView].getComputedStyle(childElement);
-
-				if (childElement.tagName !== 'SCRIPT' && childElement.tagName !== 'STYLE') {
+					this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].getComputedStyle(
+						childElement
+					);
+
+				if (
+					childElement[PropertySymbol.tagName] !== 'SCRIPT' &&
+					childElement[PropertySymbol.tagName] !== 'STYLE'
+				) {
 					const display = computedStyle.display;
 					if (display !== 'none') {
 						const textTransform = computedStyle.textTransform;
@@ -130,7 +253,7 @@ export default class HTMLElement extends Element implements IHTMLElement {
 						result += text;
 					}
 				}
-			} else if (childNode.nodeType === NodeTypeEnum.textNode) {
+			} else if (childNode[PropertySymbol.nodeType] === NodeTypeEnum.textNode) {
 				result += childNode.textContent.replace(/[\n\r]/, '');
 			}
 		}
@@ -153,9 +276,9 @@ export default class HTMLElement extends Element implements IHTMLElement {
 
 		for (let i = 0, max = texts.length; i < max; i++) {
 			if (i !== 0) {
-				this.appendChild(this.ownerDocument.createElement('br'));
+				this.appendChild(this[PropertySymbol.ownerDocument].createElement('br'));
 			}
-			this.appendChild(this.ownerDocument.createTextNode(texts[i]));
+			this.appendChild(this[PropertySymbol.ownerDocument].createTextNode(texts[i]));
 		}
 	}
 
@@ -176,7 +299,7 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	 * @param text Text.
 	 */
 	public set outerText(text: string) {
-		if (!this.parentNode) {
+		if (!this[PropertySymbol.parentNode]) {
 			throw new DOMException(
 				"Failed to set the 'outerHTML' property on 'Element': This element has no parent node."
 			);
@@ -186,12 +309,18 @@ export default class HTMLElement extends Element implements IHTMLElement {
 
 		for (let i = 0, max = texts.length; i < max; i++) {
 			if (i !== 0) {
-				this.parentNode.insertBefore(this.ownerDocument.createElement('br'), this);
+				this[PropertySymbol.parentNode].insertBefore(
+					this[PropertySymbol.ownerDocument].createElement('br'),
+					this
+				);
 			}
-			this.parentNode.insertBefore(this.ownerDocument.createTextNode(texts[i]), this);
+			this[PropertySymbol.parentNode].insertBefore(
+				this[PropertySymbol.ownerDocument].createTextNode(texts[i]),
+				this
+			);
 		}
 
-		this.parentNode.removeChild(this);
+		this[PropertySymbol.parentNode].removeChild(this);
 	}
 
 	/**
@@ -334,10 +463,9 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	public cloneNode(deep = false): IHTMLElement {
 		const clone = <HTMLElement>super.cloneNode(deep);
 
-		(<string>clone.accessKey) = this.accessKey;
-		(<string>clone.accessKeyLabel) = this.accessKeyLabel;
-		(<string>clone.contentEditable) = this.contentEditable;
-		(<boolean>clone.isContentEditable) = this.isContentEditable;
+		clone[PropertySymbol.accessKey] = this[PropertySymbol.accessKey];
+		clone[PropertySymbol.contentEditable] = this[PropertySymbol.contentEditable];
+		clone[PropertySymbol.isContentEditable] = this[PropertySymbol.isContentEditable];
 
 		if (this[PropertySymbol.style]) {
 			clone.style.cssText = this[PropertySymbol.style].cssText;

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

@@ -17,8 +17,11 @@ export default class HTMLElementNamedNodeMap extends ElementNamedNodeMap {
 	public override setNamedItem(item: IAttr): IAttr | null {
 		const replacedItem = super.setNamedItem(item);
 
-		if (item.name === 'style' && this[PropertySymbol.ownerElement][PropertySymbol.style]) {
-			this[PropertySymbol.ownerElement][PropertySymbol.style].cssText = item.value;
+		if (
+			item[PropertySymbol.name] === 'style' &&
+			this[PropertySymbol.ownerElement][PropertySymbol.style]
+		) {
+			this[PropertySymbol.ownerElement][PropertySymbol.style].cssText = item[PropertySymbol.value];
 		}
 
 		return replacedItem || null;
@@ -32,7 +35,7 @@ export default class HTMLElementNamedNodeMap extends ElementNamedNodeMap {
 
 		if (
 			removedItem &&
-			removedItem.name === 'style' &&
+			removedItem[PropertySymbol.name] === 'style' &&
 			this[PropertySymbol.ownerElement][PropertySymbol.style]
 		) {
 			this[PropertySymbol.ownerElement][PropertySymbol.style].cssText = '';

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

@@ -13,13 +13,17 @@ export default class HTMLElementUtility {
 	 * @param element Element.
 	 */
 	public static blur(element: IHTMLElement | ISVGElement): void {
-		if (element.ownerDocument[PropertySymbol.activeElement] !== element || !element.isConnected) {
+		if (
+			element[PropertySymbol.ownerDocument][PropertySymbol.activeElement] !== element ||
+			!element[PropertySymbol.isConnected]
+		) {
 			return;
 		}
 
-		const relatedTarget = element.ownerDocument[PropertySymbol.nextActiveElement] ?? null;
+		const relatedTarget =
+			element[PropertySymbol.ownerDocument][PropertySymbol.nextActiveElement] ?? null;
 
-		element.ownerDocument[PropertySymbol.activeElement] = null;
+		element[PropertySymbol.ownerDocument][PropertySymbol.activeElement] = null;
 
 		element.dispatchEvent(
 			new FocusEvent('blur', {
@@ -43,23 +47,26 @@ export default class HTMLElementUtility {
 	 * @param element Element.
 	 */
 	public static focus(element: IHTMLElement | ISVGElement): void {
-		if (element.ownerDocument[PropertySymbol.activeElement] === element || !element.isConnected) {
+		if (
+			element[PropertySymbol.ownerDocument][PropertySymbol.activeElement] === element ||
+			!element[PropertySymbol.isConnected]
+		) {
 			return;
 		}
 
 		// Set the next active element so `blur` can use it for `relatedTarget`.
-		element.ownerDocument[PropertySymbol.nextActiveElement] = element;
+		element[PropertySymbol.ownerDocument][PropertySymbol.nextActiveElement] = element;
 
-		const relatedTarget = element.ownerDocument[PropertySymbol.activeElement];
+		const relatedTarget = element[PropertySymbol.ownerDocument][PropertySymbol.activeElement];
 
-		if (element.ownerDocument[PropertySymbol.activeElement] !== null) {
-			element.ownerDocument[PropertySymbol.activeElement].blur();
+		if (element[PropertySymbol.ownerDocument][PropertySymbol.activeElement] !== null) {
+			element[PropertySymbol.ownerDocument][PropertySymbol.activeElement].blur();
 		}
 
 		// Clean up after blur, so it does not affect next blur call.
-		element.ownerDocument[PropertySymbol.nextActiveElement] = null;
+		element[PropertySymbol.ownerDocument][PropertySymbol.nextActiveElement] = null;
 
-		element.ownerDocument[PropertySymbol.activeElement] = element;
+		element[PropertySymbol.ownerDocument][PropertySymbol.activeElement] = element;
 
 		element.dispatchEvent(
 			new FocusEvent('focus', {

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

@@ -9,6 +9,9 @@ import IElement from '../element/IElement.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.
  */
 export default interface IHTMLElement extends IElement {
+	accessKey: string;
+	contentEditable: string;
+	isContentEditable: boolean;
 	dataset: { [key: string]: string };
 	tabIndex: number;
 	offsetHeight: number;

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

@@ -18,17 +18,33 @@ import IHTMLButtonElement from '../html-button-element/IHTMLButtonElement.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.
  */
 export default class HTMLFormElement extends HTMLElement implements IHTMLFormElement {
-	// Public properties.
-	public readonly elements: IHTMLFormControlsCollection = new HTMLFormControlsCollection();
-	public readonly length = 0;
+	// Internal properties.
+	public [PropertySymbol.elements]: IHTMLFormControlsCollection = new HTMLFormControlsCollection();
+	public [PropertySymbol.length] = 0;
+	public [PropertySymbol.formNode]: INode = this;
 
 	// Events
 	public onformdata: (event: Event) => void | null = null;
 	public onreset: (event: Event) => void | null = null;
 	public onsubmit: (event: Event) => void | null = null;
 
-	// Private properties
-	public [PropertySymbol.formNode]: INode = this;
+	/**
+	 * Returns elements.
+	 *
+	 * @returns Elements.
+	 */
+	public get elements(): IHTMLFormControlsCollection {
+		return this[PropertySymbol.elements];
+	}
+
+	/**
+	 * Returns length.
+	 *
+	 * @returns Length.
+	 */
+	public get length(): number {
+		return this[PropertySymbol.length];
+	}
 
 	/**
 	 * Returns name.
@@ -221,13 +237,16 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 	 * Resets form.
 	 */
 	public reset(): void {
-		for (const element of this.elements) {
-			if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+		for (const element of this[PropertySymbol.elements]) {
+			if (
+				element[PropertySymbol.tagName] === 'INPUT' ||
+				element[PropertySymbol.tagName] === 'TEXTAREA'
+			) {
 				element[PropertySymbol.value] = null;
 				element[PropertySymbol.checked] = null;
-			} else if (element.tagName === 'TEXTAREA') {
+			} else if (element[PropertySymbol.tagName] === 'TEXTAREA') {
 				element[PropertySymbol.value] = null;
-			} else if (element.tagName === 'SELECT') {
+			} else if (element[PropertySymbol.tagName] === 'SELECT') {
 				let hasSelectedAttribute = false;
 				for (const option of (<IHTMLSelectElement>element).options) {
 					if (option.hasAttribute('selected')) {
@@ -254,8 +273,8 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 		const radioValidationState: { [k: string]: boolean } = {};
 		let isFormValid = true;
 
-		for (const element of this.elements) {
-			if (element.tagName === 'INPUT' && element.type === 'radio' && element.name) {
+		for (const element of this[PropertySymbol.elements]) {
+			if (element[PropertySymbol.tagName] === 'INPUT' && element.type === 'radio' && element.name) {
 				if (!radioValidationState[element.name]) {
 					radioValidationState[element.name] = true;
 					if (!element.checkValidity()) {
@@ -300,14 +319,19 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 		node: IHTMLInputElement | IHTMLTextAreaElement | IHTMLSelectElement | IHTMLButtonElement,
 		name: string
 	): void {
-		if (!this.elements.includes(node)) {
-			this[this.elements.length] = node;
-			this.elements.push(node);
-			(<number>this.length) = this.elements.length;
+		const elements = this[PropertySymbol.elements];
+
+		if (!elements.includes(node)) {
+			this[elements.length] = node;
+			elements.push(node);
+			this[PropertySymbol.length] = elements.length;
 		}
 
-		(<HTMLFormControlsCollection>this.elements)[PropertySymbol.appendNamedItem](node, name);
-		this[name] = this.elements[name];
+		(<HTMLFormControlsCollection>elements)[PropertySymbol.appendNamedItem](node, name);
+
+		if (this[PropertySymbol.isValidPropertyName](name)) {
+			this[name] = elements[name];
+		}
 	}
 
 	/**
@@ -320,23 +344,39 @@ export default class HTMLFormElement extends HTMLElement implements IHTMLFormEle
 		node: IHTMLInputElement | IHTMLTextAreaElement | IHTMLSelectElement | IHTMLButtonElement,
 		name: string
 	): void {
-		const index = this.elements.indexOf(node);
+		const elements = this[PropertySymbol.elements];
+		const index = elements.indexOf(node);
 
 		if (index !== -1) {
-			this.elements.splice(index, 1);
-			for (let i = index; i < this.length; i++) {
+			elements.splice(index, 1);
+			for (let i = index; i < this[PropertySymbol.length]; i++) {
 				this[i] = this[i + 1];
 			}
-			delete this[this.length - 1];
-			(<number>this.length)--;
+			delete this[this[PropertySymbol.length] - 1];
+			this[PropertySymbol.length]--;
 		}
 
-		(<HTMLFormControlsCollection>this.elements)[PropertySymbol.removeNamedItem](node, name);
+		(<HTMLFormControlsCollection>elements)[PropertySymbol.removeNamedItem](node, name);
 
-		if (this.elements[name]) {
-			this[name] = this.elements[name];
-		} else {
-			delete this[name];
+		if (this[PropertySymbol.isValidPropertyName](name)) {
+			if (elements[name]) {
+				this[name] = elements[name];
+			} else {
+				delete this[name];
+			}
 		}
 	}
+
+	/**
+	 * Returns "true" if the property name is valid.
+	 *
+	 * @param name Name.
+	 * @returns True if the property name is valid.
+	 */
+	protected [PropertySymbol.isValidPropertyName](name: string): boolean {
+		return (
+			!this.constructor.prototype.hasOwnProperty(name) &&
+			(isNaN(Number(name)) || name.includes('.'))
+		);
+	}
 }

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

@@ -18,13 +18,14 @@ import HTMLIFrameElementPageLoader from './HTMLIFrameElementPageLoader.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement.
  */
 export default class HTMLIFrameElement extends HTMLElement implements IHTMLIFrameElement {
-	public override readonly attributes: INamedNodeMap;
-
 	// Events
 	public onload: (event: Event) => void | null = null;
 	public onerror: (event: Event) => void | null = null;
 
 	// Internal properties
+	public override [PropertySymbol.attributes]: INamedNodeMap;
+
+	// Private properties
 	#contentWindowContainer: { window: IBrowserWindow | ICrossOriginBrowserWindow | null } = {
 		window: null
 	};
@@ -42,7 +43,7 @@ export default class HTMLIFrameElement extends HTMLElement implements IHTMLIFram
 			contentWindowContainer: this.#contentWindowContainer,
 			browserParentFrame: browserFrame
 		});
-		this.attributes = new HTMLIFrameElementNamedNodeMap(this, this.#pageLoader);
+		this[PropertySymbol.attributes] = new HTMLIFrameElementNamedNodeMap(this, this.#pageLoader);
 	}
 
 	/**
@@ -193,8 +194,8 @@ export default class HTMLIFrameElement extends HTMLElement implements IHTMLIFram
 	 * @override
 	 */
 	public override [PropertySymbol.connectToNode](parentNode: INode = null): void {
-		const isConnected = this.isConnected;
-		const isParentConnected = parentNode ? parentNode.isConnected : false;
+		const isConnected = this[PropertySymbol.isConnected];
+		const isParentConnected = parentNode ? parentNode[PropertySymbol.isConnected] : false;
 
 		super[PropertySymbol.connectToNode](parentNode);
 

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

@@ -2,6 +2,7 @@ import IAttr from '../attr/IAttr.js';
 import Element from '../element/Element.js';
 import HTMLElementNamedNodeMap from '../html-element/HTMLElementNamedNodeMap.js';
 import HTMLIFrameElementPageLoader from './HTMLIFrameElementPageLoader.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
 
 /**
  * Named Node Map.
@@ -28,7 +29,11 @@ export default class HTMLIFrameElementNamedNodeMap extends HTMLElementNamedNodeM
 	public override setNamedItem(item: IAttr): IAttr | null {
 		const replacedAttribute = super.setNamedItem(item);
 
-		if (item.name === 'src' && item.value && item.value !== replacedAttribute?.value) {
+		if (
+			item[PropertySymbol.name] === 'src' &&
+			item[PropertySymbol.value] &&
+			item[PropertySymbol.value] !== replacedAttribute?.[PropertySymbol.value]
+		) {
 			this.#pageLoader.loadPage();
 		}
 

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

@@ -43,7 +43,7 @@ export default class HTMLIFrameElementPageLoader {
 	 * Loads an iframe page.
 	 */
 	public loadPage(): void {
-		if (!this.#element.isConnected) {
+		if (!this.#element[PropertySymbol.isConnected]) {
 			if (this.#browserIFrame) {
 				BrowserFrameFactory.destroyFrame(this.#browserIFrame);
 				this.#browserIFrame = null;
@@ -52,7 +52,7 @@ export default class HTMLIFrameElementPageLoader {
 			return;
 		}
 
-		const window = this.#element.ownerDocument[PropertySymbol.defaultView];
+		const window = this.#element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
 		const originURL = this.#browserParentFrame.window.location;
 		const targetURL = BrowserFrameURL.getRelativeURL(this.#browserParentFrame, this.#element.src);