happy-dom 2.31.1 → 2.34.0

package/src/config/ElementClass.ts

@@ -1,27 +1,11 @@
-import HTMLTemplateElement from '../nodes/html-template-element/HTMLTemplateElement';
-import HTMLFormElement from '../nodes/html-form-element/HTMLFormElement';
 import HTMLElement from '../nodes/html-element/HTMLElement';
-import HTMLInputElement from '../nodes/html-input-element/HTMLInputElement';
-import HTMLTextAreaElement from '../nodes/html-text-area-element/HTMLTextAreaElement';
-import SVGSVGElement from '../nodes/svg-element/SVGSVGElement';
-import SVGElement from '../nodes/svg-element/SVGElement';
-import HTMLScriptElement from '../nodes/html-script-element/HTMLScriptElement';
-import HTMLImageElement from '../nodes/html-image-element/HTMLImageElement';
-import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement';
-import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement';
 
 export default {
-	HTMLTemplateElement: HTMLTemplateElement,
-	HTMLFormElement: HTMLFormElement,
-	HTMLInputElement: HTMLInputElement,
-	HTMLTextAreaElement: HTMLTextAreaElement,
 	HTMLElement: HTMLElement,
 	HTMLHeadElement: HTMLElement,
 	HTMLTitleElement: HTMLElement,
 	HTMLBaseElement: HTMLElement,
-	HTMLLinkElement: HTMLLinkElement,
 	HTMLMetaElement: HTMLElement,
-	HTMLStyleElement: HTMLStyleElement,
 	HTMLBodyElement: HTMLElement,
 	HTMLHeadingElement: HTMLElement,
 	HTMLParagraphElement: HTMLElement,
@@ -46,8 +30,6 @@ export default {
 	HTMLFieldSetElement: HTMLElement,
 	HTMLFontElement: HTMLElement,
 	HTMLHtmlElement: HTMLElement,
-	HTMLImageElement: HTMLImageElement,
-	HTMLLabelElement: HTMLElement,
 	HTMLLegendElement: HTMLElement,
 	HTMLMapElement: HTMLElement,
 	HTMLMarqueeElement: HTMLElement,
@@ -60,9 +42,7 @@ export default {
 	HTMLPictureElement: HTMLElement,
 	HTMLProgressElement: HTMLElement,
 	HTMLQuoteElement: HTMLElement,
-	HTMLScriptElement: HTMLScriptElement,
 	HTMLSelectElement: HTMLElement,
-	HTMLSlotElement: HTMLElement,
 	HTMLSourceElement: HTMLElement,
 	HTMLSpanElement: HTMLElement,
 	HTMLTableCaptionElement: HTMLElement,
@@ -81,7 +61,5 @@ export default {
 	HTMLParamElement: HTMLElement,
 	HTMLVideoElement: HTMLElement,
 	HTMLAudioElement: HTMLElement,
-	HTMLTrackElement: HTMLElement,
-	SVGSVGElement: SVGSVGElement,
-	SVGElement: SVGElement
+	HTMLTrackElement: HTMLElement
 };

package/src/config/ElementTag.ts

@@ -8,6 +8,7 @@ import HTMLScriptElement from '../nodes/html-script-element/HTMLScriptElement';
 import HTMLImageElement from '../nodes/html-image-element/HTMLImageElement';
 import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement';
 import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement';
+import HTMLLabelElement from '../nodes/html-label-element/HTMLLabelElement';
 import HTMLSlotElement from '../nodes/html-slot-element/HTMLSlotElement';
 
 export default {
@@ -19,6 +20,7 @@ export default {
 	img: HTMLImageElement,
 	link: HTMLLinkElement,
 	style: HTMLStyleElement,
+	label: HTMLLabelElement,
 	slot: HTMLSlotElement,
 	svg: SVGSVGElement,
 	circle: SVGElement,

package/src/event/EventTarget.ts

@@ -52,6 +52,12 @@ export default abstract class EventTarget implements IEventTarget {
 
 		event.currentTarget = this;
 
+		const onEventName = 'on' + event.type.toLowerCase();
+
+		if (typeof this[onEventName] === 'function') {
+			this[onEventName].call(this, event);
+		}
+
 		if (this._listeners[event.type]) {
 			for (const listener of this._listeners[event.type]) {
 				if ((<IEventListener>listener).handleEvent) {

package/src/index.ts

@@ -64,11 +64,16 @@ import HTMLTextAreaElement from './nodes/html-text-area-element/HTMLTextAreaElem
 import IHTMLTextAreaElement from './nodes/html-text-area-element/IHTMLTextAreaElement';
 import HTMLImageElement from './nodes/html-image-element/HTMLImageElement';
 import IHTMLImageElement from './nodes/html-image-element/IHTMLImageElement';
+import Image from './nodes/html-image-element/Image';
 import HTMLScriptElement from './nodes/html-script-element/HTMLScriptElement';
 import HTMLLinkElement from './nodes/html-link-element/HTMLLinkElement';
 import IHTMLLinkElement from './nodes/html-link-element/IHTMLLinkElement';
 import HTMLStyleElement from './nodes/html-style-element/HTMLStyleElement';
 import IHTMLStyleElement from './nodes/html-style-element/IHTMLStyleElement';
+import HTMLSlotElement from './nodes/html-slot-element/HTMLSlotElement';
+import IHTMLSlotElement from './nodes/html-slot-element/IHTMLSlotElement';
+import HTMLLabelElement from './nodes/html-label-element/HTMLLabelElement';
+import IHTMLLabelElement from './nodes/html-label-element/IHTMLLabelElement';
 import SVGElement from './nodes/svg-element/SVGElement';
 import ISVGElement from './nodes/svg-element/ISVGElement';
 import SVGGraphicsElement from './nodes/svg-element/SVGGraphicsElement';
@@ -166,11 +171,16 @@ export {
 	IHTMLTextAreaElement,
 	HTMLImageElement,
 	IHTMLImageElement,
+	Image,
 	HTMLScriptElement,
 	HTMLLinkElement,
 	IHTMLLinkElement,
 	HTMLStyleElement,
 	IHTMLStyleElement,
+	HTMLSlotElement,
+	IHTMLSlotElement,
+	HTMLLabelElement,
+	IHTMLLabelElement,
 	SVGElement,
 	ISVGElement,
 	SVGGraphicsElement,

package/src/match-media/MediaQueryList.ts

@@ -0,0 +1,52 @@
+import EventTarget from '../event/EventTarget';
+import Event from '../event/Event';
+
+/**
+ * Media Query List.
+ *
+ * Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList.
+ */
+export default class MediaQueryList extends EventTarget {
+	public _matches = false;
+	public _media = '';
+	public onchange: (event: Event) => void = null;
+
+	/**
+	 * Returns "true" if the document matches.
+	 *
+	 * @returns Matches.
+	 */
+	public get matches(): boolean {
+		return this._matches;
+	}
+
+	/**
+	 * Returns the serialized media query.
+	 *
+	 * @returns Serialized media query.
+	 */
+	public get media(): string {
+		return this._media;
+	}
+
+	/**
+	 * Adds a listener.
+	 *
+	 * @deprecated
+	 * @param callback Callback.
+	 */
+	public addListener(callback: (event: Event) => void): void {
+		this.addEventListener('change', callback);
+	}
+
+	/**
+	 * Removes listener.
+	 *
+	 * @deprecated
+	 * @param callback Callback.
+	 */
+	public removeListener(callback: (event: Event) => void): void {
+		this.removeEventListener('change', callback);
+	}
+}

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

@@ -8,6 +8,7 @@ import IHTMLImageElement from './IHTMLImageElement';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement.
  */
 export default class HTMLImageElement extends HTMLElement implements IHTMLImageElement {
+	public readonly tagName: string = 'IMG';
 	public readonly complete = false;
 	public readonly naturalHeight = 0;
 	public readonly naturalWidth = 0;
@@ -49,8 +50,9 @@ export default class HTMLImageElement extends HTMLElement implements IHTMLImageE
 	 *
 	 * @returns Height.
 	 */
-	public get height(): string {
-		return this.getAttributeNS(null, 'height') || '';
+	public get height(): number {
+		const height = this.getAttributeNS(null, 'height');
+		return height !== null ? Number(height) : 0;
 	}
 
 	/**
@@ -58,8 +60,8 @@ export default class HTMLImageElement extends HTMLElement implements IHTMLImageE
 	 *
 	 * @param height Height.
 	 */
-	public set height(height: string) {
-		this.setAttributeNS(null, 'height', height);
+	public set height(height: number) {
+		this.setAttributeNS(null, 'height', String(height));
 	}
 
 	/**
@@ -179,8 +181,9 @@ export default class HTMLImageElement extends HTMLElement implements IHTMLImageE
 	 *
 	 * @returns Width.
 	 */
-	public get width(): string {
-		return this.getAttributeNS(null, 'width') || '';
+	public get width(): number {
+		const width = this.getAttributeNS(null, 'width');
+		return width !== null ? Number(width) : 0;
 	}
 
 	/**
@@ -188,8 +191,8 @@ export default class HTMLImageElement extends HTMLElement implements IHTMLImageE
 	 *
 	 * @param width Width.
 	 */
-	public set width(width: string) {
-		this.setAttributeNS(null, 'width', width);
+	public set width(width: number) {
+		this.setAttributeNS(null, 'width', String(width));
 	}
 
 	/**

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

@@ -12,7 +12,7 @@ export default interface IHTMLImageElement extends IHTMLElement {
 	crossOrigin: string;
 	readonly currentSrc: string;
 	decoding: string;
-	height: string;
+	height: number;
 	isMap: boolean;
 	loading: string;
 	readonly naturalHeight: number;
@@ -22,7 +22,7 @@ export default interface IHTMLImageElement extends IHTMLElement {
 	src: string;
 	srcset: string;
 	useMap: string;
-	width: string;
+	width: number;
 	readonly x: number;
 	readonly y: number;
 

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

@@ -0,0 +1,27 @@
+import HTMLImageElement from './HTMLImageElement';
+
+/**
+ * Image as constructor.
+ *
+ * Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image.
+ */
+export default class Image extends HTMLImageElement {
+	/**
+	 * Constructor.
+	 *
+	 * @param [width] Width.
+	 * @param [height] Height.
+	 */
+	constructor(width: number = null, height: number = null) {
+		super();
+
+		if (width !== null) {
+			this.width = width;
+		}
+
+		if (height !== null) {
+			this.height = height;
+		}
+	}
+}

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

@@ -11,6 +11,7 @@ import ValidityState from './ValidityState';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.
  */
 export default interface IHTMLInputElement extends IHTMLElement {
+	readonly form: IHTMLFormElement;
 	formAction: string;
 	formMethod: string;
 	formNoValidate: boolean;
@@ -46,7 +47,6 @@ export default interface IHTMLInputElement extends IHTMLElement {
 	selectionStart: number;
 	selectionEnd: number;
 	selectionDirection: string;
-	form: IHTMLFormElement;
 	validity: ValidityState;
 	validationMessage: string;
 	willValidate: boolean;

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

@@ -0,0 +1,80 @@
+import HTMLElement from '../html-element/HTMLElement';
+import IHTMLElement from '../html-element/IHTMLElement';
+import IHTMLFormElement from '../html-form-element/IHTMLFormElement';
+import IHTMLLabelElement from './IHTMLLabelElement';
+
+/**
+ * HTML Label Element.
+ *
+ * Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement.
+ */
+export default class HTMLLabelElement extends HTMLElement implements IHTMLLabelElement {
+	public _htmlFor: string = null;
+
+	/**
+	 * Returns a string containing the ID of the labeled control. This reflects the "for" attribute.
+	 *
+	 * @returns ID of the labeled control.
+	 */
+	public get htmlFor(): string {
+		const htmlFor = this.getAttributeNS(null, 'for');
+		if (htmlFor !== null) {
+			return htmlFor;
+		}
+		return htmlFor !== null ? htmlFor : '';
+	}
+
+	/**
+	 * Sets a string containing the ID of the labeled control. This reflects the "for" attribute.
+	 *
+	 * @param htmlFor ID of the labeled control.
+	 */
+	public set htmlFor(htmlFor: string) {
+		this.setAttributeNS(null, 'for', htmlFor);
+	}
+
+	/**
+	 * Returns an HTML element representing the control with which the label is associated.
+	 *
+	 * @returns Control element.
+	 */
+	public get control(): IHTMLElement {
+		const htmlFor = this.htmlFor;
+		if (htmlFor) {
+			return <IHTMLElement>this.ownerDocument.getElementById(htmlFor);
+		}
+		for (const child of this.children) {
+			if (child.tagName === 'INPUT') {
+				return <IHTMLElement>child;
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * Returns the parent form element.
+	 *
+	 * @returns Form.
+	 */
+	public get form(): IHTMLFormElement {
+		let parent = <IHTMLElement>this.parentNode;
+		while (parent && parent.tagName !== 'FORM') {
+			parent = <IHTMLElement>parent.parentNode;
+		}
+		return <IHTMLFormElement>parent;
+	}
+
+	/**
+	 * Clones a node.
+	 *
+	 * @override
+	 * @param [deep=false] "true" to clone deep.
+	 * @returns Cloned node.
+	 */
+	public cloneNode(deep = false): IHTMLLabelElement {
+		const clone = <HTMLLabelElement>super.cloneNode(deep);
+		clone._htmlFor = this._htmlFor;
+		return clone;
+	}
+}

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

@@ -0,0 +1,14 @@
+import IHTMLElement from '../html-element/IHTMLElement';
+import IHTMLFormElement from '../html-form-element/IHTMLFormElement';
+
+/**
+ * HTML Label Element.
+ *
+ * Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement.
+ */
+export default interface IHTMLLabelElement extends IHTMLElement {
+	readonly control: IHTMLElement;
+	readonly form: IHTMLFormElement;
+	htmlFor: string;
+}

package/src/nodes/html-text-area-element/HTMLTextAreaElement.ts

@@ -361,7 +361,7 @@ export default class HTMLTextAreaElement extends HTMLElement implements IHTMLTex
 	public get form(): IHTMLFormElement {
 		let parent = <IHTMLElement>this.parentNode;
 		while (parent && parent.tagName !== 'FORM') {
-			parent = <IHTMLElement>this.parentNode;
+			parent = <IHTMLElement>parent.parentNode;
 		}
 		return <IHTMLFormElement>parent;
 	}

package/src/nodes/html-text-area-element/IHTMLTextAreaElement.ts

@@ -10,6 +10,7 @@ import HTMLInputElementSelectionModeEnum from '../html-input-element/HTMLInputEl
  */
 export default interface IHTMLTextAreaElement extends IHTMLElement {
 	readonly type: string;
+	readonly form: IHTMLFormElement;
 	defaultValue: string;
 	minLength: number;
 	maxLength: number;
@@ -27,7 +28,6 @@ export default interface IHTMLTextAreaElement extends IHTMLElement {
 	selectionStart: number;
 	selectionEnd: number;
 	selectionDirection: string;
-	form: IHTMLFormElement;
 	textLength: number;
 
 	/**

package/src/nodes/node/Node.ts

@@ -387,12 +387,6 @@ export default class Node extends EventTarget implements INode {
 	 * @override
 	 */
 	public dispatchEvent(event: Event): boolean {
-		const onEventName = 'on' + event.type.toLowerCase();
-
-		if (typeof this[onEventName] === 'function') {
-			this[onEventName].call(this, event);
-		}
-
 		const returnValue = super.dispatchEvent(event);
 
 		if (event.bubbles && !event._propagationStopped) {

package/src/window/IWindow.ts

@@ -13,10 +13,15 @@ import HTMLFormElement from '../nodes/html-form-element/HTMLFormElement';
 import HTMLElement from '../nodes/html-element/HTMLElement';
 import HTMLInputElement from '../nodes/html-input-element/HTMLInputElement';
 import HTMLTextAreaElement from '../nodes/html-text-area-element/HTMLTextAreaElement';
+import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement';
+import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement';
+import HTMLSlotElement from '../nodes/html-slot-element/HTMLSlotElement';
+import HTMLLabelElement from '../nodes/html-label-element/HTMLLabelElement';
 import SVGSVGElement from '../nodes/svg-element/SVGSVGElement';
 import SVGElement from '../nodes/svg-element/SVGElement';
 import HTMLScriptElement from '../nodes/html-script-element/HTMLScriptElement';
 import HTMLImageElement from '../nodes/html-image-element/HTMLImageElement';
+import Image from '../nodes/html-image-element/Image';
 import DocumentFragment from '../nodes/document-fragment/DocumentFragment';
 import CharacterData from '../nodes/character-data/CharacterData';
 import TreeWalker from '../tree-walker/TreeWalker';
@@ -54,8 +59,6 @@ import Screen from '../screen/Screen';
 import AsyncTaskManager from './AsyncTaskManager';
 import IResponse from './IResponse';
 import Storage from '../storage/Storage';
-import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement';
-import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement';
 import IFetchOptions from './IFetchOptions';
 import NodeFilter from '../tree-walker/NodeFilter';
 import Window from './Window';
@@ -85,8 +88,11 @@ export default interface IWindow {
 	readonly HTMLScriptElement: typeof HTMLScriptElement;
 	readonly HTMLLinkElement: typeof HTMLLinkElement;
 	readonly HTMLStyleElement: typeof HTMLStyleElement;
+	readonly HTMLSlotElement: typeof HTMLSlotElement;
+	readonly HTMLLabelElement: typeof HTMLLabelElement;
 	readonly SVGSVGElement: typeof SVGSVGElement;
 	readonly SVGElement: typeof SVGElement;
+	readonly Image: typeof Image;
 	readonly Text: typeof Text;
 	readonly Comment: typeof Comment;
 	readonly ShadowRoot: typeof ShadowRoot;

package/src/window/Window.ts

@@ -14,10 +14,15 @@ import HTMLFormElement from '../nodes/html-form-element/HTMLFormElement';
 import HTMLElement from '../nodes/html-element/HTMLElement';
 import HTMLInputElement from '../nodes/html-input-element/HTMLInputElement';
 import HTMLTextAreaElement from '../nodes/html-text-area-element/HTMLTextAreaElement';
+import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement';
+import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement';
+import HTMLSlotElement from '../nodes/html-slot-element/HTMLSlotElement';
+import HTMLLabelElement from '../nodes/html-label-element/HTMLLabelElement';
 import SVGSVGElement from '../nodes/svg-element/SVGSVGElement';
 import SVGElement from '../nodes/svg-element/SVGElement';
 import HTMLScriptElement from '../nodes/html-script-element/HTMLScriptElement';
 import HTMLImageElement from '../nodes/html-image-element/HTMLImageElement';
+import Image from '../nodes/html-image-element/Image';
 import DocumentFragment from '../nodes/document-fragment/DocumentFragment';
 import CharacterData from '../nodes/character-data/CharacterData';
 import TreeWalker from '../tree-walker/TreeWalker';
@@ -59,13 +64,12 @@ import IResponse from './IResponse';
 import AsyncTaskTypeEnum from './AsyncTaskTypeEnum';
 import RelativeURL from '../location/RelativeURL';
 import Storage from '../storage/Storage';
-import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement';
-import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement';
 import IFetchOptions from './IFetchOptions';
 import IWindow from './IWindow';
 import URLSearchParams from '../url-search-params/URLSearchParams';
 import HTMLCollection from '../nodes/element/HTMLCollection';
 import NodeList from '../nodes/node/NodeList';
+import MediaQueryList from '../match-media/MediaQueryList';
 
 const FETCH_RESPONSE_TYPE_METHODS = ['blob', 'json', 'text'];
 
@@ -92,9 +96,12 @@ export default class Window extends EventTarget implements IWindow, NodeJS.Globa
 	public readonly HTMLInputElement = HTMLInputElement;
 	public readonly HTMLTextAreaElement = HTMLTextAreaElement;
 	public readonly HTMLImageElement = HTMLImageElement;
+	public readonly Image = Image;
 	public readonly HTMLScriptElement = HTMLScriptElement;
 	public readonly HTMLLinkElement = HTMLLinkElement;
 	public readonly HTMLStyleElement = HTMLStyleElement;
+	public readonly HTMLLabelElement = HTMLLabelElement;
+	public readonly HTMLSlotElement = HTMLSlotElement;
 	public readonly SVGSVGElement = SVGSVGElement;
 	public readonly SVGElement = SVGElement;
 	public readonly Text = Text;
@@ -146,6 +153,7 @@ export default class Window extends EventTarget implements IWindow, NodeJS.Globa
 	public readonly URLSearchParams = URLSearchParams;
 	public readonly HTMLCollection = HTMLCollection;
 	public readonly NodeList = NodeList;
+	public readonly MediaQueryList = MediaQueryList;
 
 	// Events
 	public onload: (event: Event) => void = null;
@@ -165,6 +173,7 @@ export default class Window extends EventTarget implements IWindow, NodeJS.Globa
 	public readonly screen = new Screen();
 	public readonly innerWidth = 1024;
 	public readonly innerHeight = 768;
+	public readonly devicePixelRatio = 1;
 	public readonly sessionStorage = new Storage();
 	public readonly localStorage = new Storage();
 
@@ -245,6 +254,7 @@ export default class Window extends EventTarget implements IWindow, NodeJS.Globa
 
 		DOMParser._ownerDocument = DOMParser._ownerDocument || this.document;
 		FileReader._ownerDocument = FileReader._ownerDocument || this.document;
+		Image.ownerDocument = Image.ownerDocument || this.document;
 
 		for (const eventType of NonImplementedEventTypes) {
 			if (!this[eventType]) {
@@ -346,6 +356,18 @@ export default class Window extends EventTarget implements IWindow, NodeJS.Globa
 		this.scroll(x, y);
 	}
 
+	/**
+	 * Returns a new MediaQueryList object that can then be used to determine if the document matches the media query string.
+	 *
+	 * @param mediaQueryString A string specifying the media query to parse into a MediaQueryList.
+	 * @returns A new MediaQueryList.
+	 */
+	public matchMedia(mediaQueryString: string): MediaQueryList {
+		const mediaQueryList = new MediaQueryList();
+		mediaQueryList._media = mediaQueryString;
+		return mediaQueryList;
+	}
+
 	/**
 	 * Sets a timer which executes a function once the timer expires.
 	 *