happy-dom 15.7.4 → 15.8.0

package/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts

@@ -1,456 +0,0 @@
-import ShadowRoot from '../../../nodes/shadow-root/ShadowRoot.js';
-import * as PropertySymbol from '../../../PropertySymbol.js';
-import Element from '../../../nodes/element/Element.js';
-import Document from '../../../nodes/document/Document.js';
-import HTMLStyleElement from '../../../nodes/html-style-element/HTMLStyleElement.js';
-import NodeList from '../../../nodes/node/NodeList.js';
-import CSSStyleDeclarationPropertyManager from '../property-manager/CSSStyleDeclarationPropertyManager.js';
-import NodeTypeEnum from '../../../nodes/node/NodeTypeEnum.js';
-import CSSRuleTypeEnum from '../../CSSRuleTypeEnum.js';
-import CSSMediaRule from '../../rules/CSSMediaRule.js';
-import CSSRule from '../../CSSRule.js';
-import CSSStyleRule from '../../rules/CSSStyleRule.js';
-import CSSStyleDeclarationElementDefaultCSS from './config/CSSStyleDeclarationElementDefaultCSS.js';
-import CSSStyleDeclarationElementInheritedProperties from './config/CSSStyleDeclarationElementInheritedProperties.js';
-import CSSStyleDeclarationElementMeasurementProperties from './config/CSSStyleDeclarationElementMeasurementProperties.js';
-import CSSStyleDeclarationCSSParser from '../css-parser/CSSStyleDeclarationCSSParser.js';
-import QuerySelector from '../../../query-selector/QuerySelector.js';
-import CSSMeasurementConverter from '../measurement-converter/CSSMeasurementConverter.js';
-import MediaQueryList from '../../../match-media/MediaQueryList.js';
-import WindowBrowserContext from '../../../window/WindowBrowserContext.js';
-
-const CSS_MEASUREMENT_REGEXP = /[0-9.]+(px|rem|em|vw|vh|%|vmin|vmax|cm|mm|in|pt|pc|Q)/g;
-const CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+)\)|var\( *(--[^), ]+), *(.+)\)/;
-
-type IStyleAndElement = {
-	element: Element | ShadowRoot | Document;
-	cssTexts: Array<{ cssText: string; priorityWeight: number }>;
-};
-
-/**
- * CSS Style Declaration utility
- */
-export default class CSSStyleDeclarationElementStyle {
-	private element: Element;
-	private computed: boolean;
-
-	/**
-	 * Constructor.
-	 *
-	 * @param element Element.
-	 * @param [computed] Computed.
-	 */
-	constructor(element: Element, computed = false) {
-		this.element = element;
-		this.computed = computed;
-	}
-
-	/**
-	 * Returns element style properties.
-	 *
-	 * @returns Element style properties.
-	 */
-	public getElementStyle(): CSSStyleDeclarationPropertyManager {
-		if (this.computed) {
-			return this.getComputedElementStyle();
-		}
-
-		const cachedResult = this.element[PropertySymbol.cache].style;
-
-		if (cachedResult?.result) {
-			const result = cachedResult.result.deref();
-			if (result) {
-				return result;
-			}
-		}
-
-		const cssText =
-			this.element[PropertySymbol.attributes][PropertySymbol.namedItems].get('style')?.[
-				PropertySymbol.value
-			];
-
-		if (cssText) {
-			const propertyManager = new CSSStyleDeclarationPropertyManager({ cssText });
-			this.element[PropertySymbol.cache].style = {
-				result: new WeakRef(propertyManager)
-			};
-			return propertyManager;
-		}
-
-		return new CSSStyleDeclarationPropertyManager();
-	}
-
-	/**
-	 * Returns style sheets.
-	 *
-	 * @param element Element.
-	 * @returns Style sheets.
-	 */
-	private getComputedElementStyle(): CSSStyleDeclarationPropertyManager {
-		const documentElements: Array<IStyleAndElement> = [];
-		const parentElements: Array<IStyleAndElement> = [];
-		let styleAndElement: IStyleAndElement = {
-			element: <Element | ShadowRoot | Document>this.element,
-			cssTexts: []
-		};
-		let shadowRootElements: Array<IStyleAndElement> = [];
-
-		if (!this.element[PropertySymbol.isConnected]) {
-			return new CSSStyleDeclarationPropertyManager();
-		}
-
-		const cacheResult = this.element[PropertySymbol.cache].computedStyle;
-
-		if (cacheResult?.result) {
-			const result = cacheResult.result.deref();
-			if (result) {
-				return result;
-			}
-		}
-
-		// Walks through all parent elements and stores them in an array with element and matching CSS text.
-		while (styleAndElement.element) {
-			if (styleAndElement.element[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
-				const rootNode = styleAndElement.element.getRootNode();
-				if (rootNode[PropertySymbol.nodeType] === NodeTypeEnum.documentNode) {
-					documentElements.unshift(styleAndElement);
-				} else {
-					shadowRootElements.unshift(styleAndElement);
-				}
-				parentElements.unshift(styleAndElement);
-			}
-
-			if (styleAndElement.element === this.element[PropertySymbol.ownerDocument]) {
-				const styleSheets = <NodeList<HTMLStyleElement>>(
-					this.element[PropertySymbol.ownerDocument].querySelectorAll(
-						'style,link[rel="stylesheet"]'
-					)
-				);
-
-				for (const styleSheet of styleSheets) {
-					const sheet = styleSheet.sheet;
-					if (sheet) {
-						this.parseCSSRules({
-							elements: documentElements,
-							rootElement:
-								documentElements[0].element[PropertySymbol.tagName] === 'HTML'
-									? documentElements[0]
-									: null,
-							cssRules: sheet.cssRules
-						});
-					}
-				}
-
-				for (const sheet of this.element[PropertySymbol.ownerDocument].adoptedStyleSheets) {
-					this.parseCSSRules({
-						elements: documentElements,
-						rootElement:
-							documentElements[0].element[PropertySymbol.tagName] === 'HTML'
-								? documentElements[0]
-								: null,
-						cssRules: sheet.cssRules
-					});
-				}
-
-				styleAndElement = { element: null, cssTexts: [] };
-			} else if (
-				styleAndElement.element[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode &&
-				(<ShadowRoot>styleAndElement.element).host
-			) {
-				const shadowRoot = <ShadowRoot>styleAndElement.element;
-				const styleSheets = <NodeList<HTMLStyleElement>>(
-					shadowRoot.querySelectorAll('style,link[rel="stylesheet"]')
-				);
-
-				styleAndElement = {
-					element: <Element>shadowRoot.host,
-					cssTexts: []
-				};
-
-				for (const styleSheet of styleSheets) {
-					const sheet = styleSheet.sheet;
-					if (sheet) {
-						this.parseCSSRules({
-							elements: shadowRootElements,
-							cssRules: sheet.cssRules,
-							hostElement: styleAndElement
-						});
-					}
-				}
-
-				for (const sheet of shadowRoot.adoptedStyleSheets) {
-					this.parseCSSRules({
-						elements: shadowRootElements,
-						cssRules: sheet.cssRules,
-						hostElement: styleAndElement
-					});
-				}
-
-				shadowRootElements = [];
-			} else {
-				styleAndElement = {
-					element: <Element>styleAndElement.element[PropertySymbol.parentNode],
-					cssTexts: []
-				};
-			}
-		}
-
-		// Concatenates all parent element CSS to one string.
-		const targetElement = parentElements[parentElements.length - 1];
-		const propertyManager = new CSSStyleDeclarationPropertyManager();
-		const cssProperties: { [k: string]: string } = {};
-		let rootFontSize: string | number = 16;
-		let parentFontSize: string | number = 16;
-
-		for (const parentElement of parentElements) {
-			parentElement.cssTexts.sort((a, b) => a.priorityWeight - b.priorityWeight);
-
-			let elementCSSText = '';
-			if (
-				CSSStyleDeclarationElementDefaultCSS[
-					(<Element>parentElement.element)[PropertySymbol.tagName]
-				]
-			) {
-				if (
-					typeof CSSStyleDeclarationElementDefaultCSS[
-						(<Element>parentElement.element)[PropertySymbol.tagName]
-					] === 'string'
-				) {
-					elementCSSText +=
-						CSSStyleDeclarationElementDefaultCSS[
-							(<Element>parentElement.element)[PropertySymbol.tagName]
-						];
-				} else {
-					for (const key of Object.keys(
-						CSSStyleDeclarationElementDefaultCSS[
-							(<Element>parentElement.element)[PropertySymbol.tagName]
-						]
-					)) {
-						if (key === 'default' || !!parentElement.element[key]) {
-							elementCSSText +=
-								CSSStyleDeclarationElementDefaultCSS[
-									(<Element>parentElement.element)[PropertySymbol.tagName]
-								][key];
-						}
-					}
-				}
-				elementCSSText +=
-					CSSStyleDeclarationElementDefaultCSS[
-						(<Element>parentElement.element)[PropertySymbol.tagName]
-					];
-			}
-
-			for (const cssText of parentElement.cssTexts) {
-				elementCSSText += cssText.cssText;
-			}
-
-			const elementStyleAttribute = (<Element>parentElement.element)[PropertySymbol.attributes][
-				PropertySymbol.namedItems
-			].get('style');
-
-			if (elementStyleAttribute) {
-				elementCSSText += elementStyleAttribute[PropertySymbol.value];
-			}
-
-			const rulesAndProperties = CSSStyleDeclarationCSSParser.parse(elementCSSText);
-			const rules = rulesAndProperties.rules;
-
-			Object.assign(cssProperties, rulesAndProperties.properties);
-
-			for (const { name, value, important } of rules) {
-				if (
-					CSSStyleDeclarationElementInheritedProperties[name] ||
-					parentElement === targetElement
-				) {
-					const parsedValue = this.parseCSSVariablesInValue(value.trim(), cssProperties);
-
-					if (parsedValue && (!propertyManager.get(name)?.important || important)) {
-						propertyManager.set(name, parsedValue, important);
-
-						if (name === 'font' || name === 'font-size') {
-							const fontSize = propertyManager.properties['font-size'];
-							if (fontSize !== null) {
-								const parsedValue = this.parseMeasurementsInValue({
-									value: fontSize.value,
-									rootFontSize,
-									parentFontSize,
-									parentSize: parentFontSize
-								});
-								if ((<Element>parentElement.element)[PropertySymbol.tagName] === 'HTML') {
-									rootFontSize = parsedValue;
-								} else if (parentElement !== targetElement) {
-									parentFontSize = parsedValue;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-
-		for (const name of CSSStyleDeclarationElementMeasurementProperties) {
-			const property = propertyManager.properties[name];
-			if (property) {
-				property.value = this.parseMeasurementsInValue({
-					value: property.value,
-					rootFontSize,
-					parentFontSize,
-
-					// TODO: Only "font-size" is supported when using percentage values. Add support for other properties.
-					parentSize: name === 'font-size' ? parentFontSize : null
-				});
-			}
-		}
-
-		const cachedResult = {
-			result: new WeakRef(propertyManager)
-		};
-
-		this.element[PropertySymbol.cache].computedStyle = cachedResult;
-		this.element[PropertySymbol.ownerDocument][PropertySymbol.affectsComputedStyleCache].push(
-			cachedResult
-		);
-
-		return propertyManager;
-	}
-
-	/**
-	 * Applies CSS text to elements.
-	 *
-	 * @param options Options.
-	 * @param options.elements Elements.
-	 * @param options.cssRules CSS rules.
-	 * @param options.rootElement Root element.
-	 * @param [options.hostElement] Host element.
-	 */
-	private parseCSSRules(options: {
-		cssRules: CSSRule[];
-		elements: IStyleAndElement[];
-		rootElement?: IStyleAndElement;
-		hostElement?: IStyleAndElement;
-	}): void {
-		if (!options.elements.length) {
-			return;
-		}
-
-		const window = this.element[PropertySymbol.window];
-
-		for (const rule of options.cssRules) {
-			if (rule.type === CSSRuleTypeEnum.styleRule) {
-				const selectorText: string = (<CSSStyleRule>rule).selectorText;
-				if (selectorText) {
-					if (selectorText.startsWith(':host')) {
-						if (options.hostElement) {
-							options.hostElement.cssTexts.push({
-								cssText: (<CSSStyleRule>rule)[PropertySymbol.cssText],
-								priorityWeight: 0
-							});
-						}
-					} else if (selectorText.startsWith(':root')) {
-						if (options.rootElement) {
-							options.rootElement.cssTexts.push({
-								cssText: (<CSSStyleRule>rule)[PropertySymbol.cssText],
-								priorityWeight: 0
-							});
-						}
-					} else {
-						for (const element of options.elements) {
-							const match = QuerySelector.matches(<Element>element.element, selectorText, {
-								ignoreErrors: true
-							});
-							if (match) {
-								element.cssTexts.push({
-									cssText: (<CSSStyleRule>rule)[PropertySymbol.cssText],
-									priorityWeight: match.priorityWeight
-								});
-							}
-						}
-					}
-				}
-			} else if (
-				rule.type === CSSRuleTypeEnum.mediaRule &&
-				// TODO: We need to send in a predfined root font size as it will otherwise be calculated using Window.getComputedStyle(), which will cause a never ending loop. Is there another solution?
-				new MediaQueryList({
-					window,
-					media: (<CSSMediaRule>rule).conditionText,
-					rootFontSize: this.element[PropertySymbol.tagName] === 'HTML' ? 16 : null
-				}).matches
-			) {
-				this.parseCSSRules({
-					elements: options.elements,
-					cssRules: (<CSSMediaRule>rule).cssRules,
-					hostElement: options.hostElement
-				});
-			}
-		}
-	}
-
-	/**
-	 * Parses CSS variables in a value.
-	 *
-	 * @param value Value.
-	 * @param cssVariables CSS variables.
-	 * @returns CSS value.
-	 */
-	private parseCSSVariablesInValue(value: string, cssVariables: { [k: string]: string }): string {
-		let newValue = value;
-		let match: RegExpMatchArray | null;
-
-		while ((match = newValue.match(CSS_VARIABLE_REGEXP)) !== null) {
-			// Fallback value - E.g. var(--my-var, #FFFFFF)
-			if (match[2] !== undefined) {
-				newValue = newValue.replace(match[0], cssVariables[match[2]] || match[3]);
-			} else {
-				newValue = newValue.replace(match[0], cssVariables[match[1]] || '');
-			}
-		}
-
-		return newValue;
-	}
-
-	/**
-	 * Parses measurements in a value.
-	 *
-	 * @param options Options.
-	 * @param options.value Value.
-	 * @param options.rootFontSize Root font size.
-	 * @param options.parentFontSize Parent font size.
-	 * @param [options.parentSize] Parent width.
-	 * @returns CSS value.
-	 */
-	private parseMeasurementsInValue(options: {
-		value: string;
-		rootFontSize: string | number;
-		parentFontSize: string | number;
-		parentSize: string | number | null;
-	}): string {
-		if (
-			new WindowBrowserContext(this.element[PropertySymbol.window]).getSettings()
-				?.disableComputedStyleRendering
-		) {
-			return options.value;
-		}
-
-		const regexp = new RegExp(CSS_MEASUREMENT_REGEXP);
-		let newValue = options.value;
-		let match;
-
-		while ((match = regexp.exec(options.value)) !== null) {
-			if (match[1] !== 'px') {
-				const valueInPixels = CSSMeasurementConverter.toPixels({
-					window: this.element[PropertySymbol.window],
-					value: match[0],
-					rootFontSize: options.rootFontSize,
-					parentFontSize: options.parentFontSize,
-					parentSize: options.parentSize
-				});
-
-				if (valueInPixels !== null) {
-					newValue = newValue.replace(match[0], valueInPixels + 'px');
-				}
-			}
-		}
-
-		return newValue;
-	}
-}

package/src/nodes/element/DOMRect.ts

@@ -1,48 +0,0 @@
-import DOMRectReadOnly from './DOMRectReadOnly.js';
-import * as PropertySymbol from '../../PropertySymbol.js';
-import IDOMRectInit from './IDOMRectInit.js';
-
-/* eslint-disable jsdoc/require-jsdoc */
-
-/**
- * Bounding rect object.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
- */
-export default class DOMRect extends DOMRectReadOnly {
-	public set x(value: number) {
-		this[PropertySymbol.x] = value;
-	}
-
-	public get x(): number {
-		return this[PropertySymbol.x];
-	}
-
-	public set y(value: number) {
-		this[PropertySymbol.y] = value;
-	}
-
-	public get y(): number {
-		return this[PropertySymbol.y];
-	}
-
-	public set width(value: number) {
-		this[PropertySymbol.width] = value;
-	}
-
-	public get width(): number {
-		return this[PropertySymbol.width];
-	}
-
-	public set height(value: number) {
-		this[PropertySymbol.height] = value;
-	}
-
-	public get height(): number {
-		return this[PropertySymbol.height];
-	}
-
-	public static fromRect(other: IDOMRectInit): DOMRect {
-		return new DOMRect(other.x, other.y, other.width, other.height);
-	}
-}

package/src/nodes/element/DOMRectList.ts

@@ -1,15 +0,0 @@
-import DOMRect from './DOMRect.js';
-
-/**
- * DOMRectList.
- */
-export default class DOMRectList extends Array<DOMRect> {
-	/**
-	 * Returns item by index.
-	 *
-	 * @param index Index.
-	 */
-	public item(index: number): DOMRect {
-		return this[index] ?? null;
-	}
-}

package/src/nodes/element/DOMRectReadOnly.ts

@@ -1,80 +0,0 @@
-import * as PropertySymbol from '../../PropertySymbol.js';
-import IDOMRectInit from './IDOMRectInit.js';
-
-/* eslint-disable jsdoc/require-jsdoc */
-
-/**
- * Bounding rect readonly object.
- *
- * @see https://drafts.fxtf.org/geometry/#DOMRect
- */
-export default class DOMRectReadOnly implements IDOMRectInit {
-	protected [PropertySymbol.x]: number = 0;
-	protected [PropertySymbol.y]: number = 0;
-	protected [PropertySymbol.width]: number = 0;
-	protected [PropertySymbol.height]: number = 0;
-
-	/**
-	 * Constructor.
-	 *
-	 * @param [x] X position.
-	 * @param [y] Y position.
-	 * @param [width] Width.
-	 * @param [height] Height.
-	 */
-	constructor(x?: number | null, y?: number | null, width?: number | null, height?: number | null) {
-		this[PropertySymbol.x] = x !== undefined && x !== null ? Number(x) : 0;
-		this[PropertySymbol.y] = y !== undefined && y !== null ? Number(y) : 0;
-		this[PropertySymbol.width] = width !== undefined && width !== null ? Number(width) : 0;
-		this[PropertySymbol.height] = height !== undefined && height !== null ? Number(height) : 0;
-	}
-
-	public get x(): number {
-		return this[PropertySymbol.x];
-	}
-
-	public get y(): number {
-		return this[PropertySymbol.y];
-	}
-
-	public get width(): number {
-		return this[PropertySymbol.width];
-	}
-
-	public get height(): number {
-		return this[PropertySymbol.height];
-	}
-
-	public get top(): number {
-		return Math.min(this[PropertySymbol.y], this[PropertySymbol.y] + this[PropertySymbol.height]);
-	}
-
-	public get right(): number {
-		return Math.max(this[PropertySymbol.x], this[PropertySymbol.x] + this[PropertySymbol.width]);
-	}
-
-	public get bottom(): number {
-		return Math.max(this[PropertySymbol.y], this[PropertySymbol.y] + this[PropertySymbol.height]);
-	}
-
-	public get left(): number {
-		return Math.min(this[PropertySymbol.x], this[PropertySymbol.x] + this[PropertySymbol.width]);
-	}
-
-	public toJSON(): object {
-		return {
-			x: this.x,
-			y: this.y,
-			width: this.width,
-			height: this.height,
-			top: this.top,
-			right: this.right,
-			bottom: this.bottom,
-			left: this.left
-		};
-	}
-
-	public static fromRect(other: IDOMRectInit): DOMRectReadOnly {
-		return new DOMRectReadOnly(other.x, other.y, other.width, other.height);
-	}
-}

package/src/nodes/element/DOMStringMap.ts

@@ -1,86 +0,0 @@
-import Element from './Element.js';
-import * as PropertySymbol from '../../PropertySymbol.js';
-import DOMStringMapUtility from './DOMStringMapUtility.js';
-
-/**
- * Dataset factory.
- *
- * Reference:
- * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
- */
-export default class DOMStringMap {
-	[key: string]: string;
-
-	/**
-	 * Constructor.
-	 *
-	 * @param element Element.
-	 */
-	constructor(element: Element) {
-		// Documentation for Proxy:
-		// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
-		return new Proxy(this, {
-			get(_target, property: string): string {
-				const attribute = element[PropertySymbol.attributes][PropertySymbol.namedItems].get(
-					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
-				);
-				if (attribute) {
-					return attribute[PropertySymbol.value];
-				}
-			},
-			set(_target, property: string, value: string): boolean {
-				element.setAttribute('data-' + DOMStringMapUtility.camelCaseToKebab(property), value);
-				return true;
-			},
-			deleteProperty(_target, property: string): boolean {
-				element.removeAttribute('data-' + DOMStringMapUtility.camelCaseToKebab(property));
-				return true;
-			},
-			ownKeys(_target): string[] {
-				// According to Mozilla we have to update the dataset object (target) to contain the same keys as what we return:
-				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
-				// "The result List must contain the keys of all non-configurable own properties of the target object."
-				const keys = [];
-				for (const item of element[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
-					if (item[PropertySymbol.name].startsWith('data-')) {
-						keys.push(
-							DOMStringMapUtility.kebabToCamelCase(item[PropertySymbol.name].replace('data-', ''))
-						);
-					}
-				}
-				return keys;
-			},
-			has(_target, property: string): boolean {
-				return element[PropertySymbol.attributes][PropertySymbol.namedItems].has(
-					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
-				);
-			},
-			defineProperty(_target, property: string, descriptor): boolean {
-				if (descriptor.value === undefined) {
-					return false;
-				}
-
-				element.setAttribute(
-					'data-' + DOMStringMapUtility.camelCaseToKebab(property),
-					descriptor.value
-				);
-
-				return true;
-			},
-			getOwnPropertyDescriptor(_target, property: string): PropertyDescriptor {
-				const attribute = element[PropertySymbol.attributes][PropertySymbol.namedItems].get(
-					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
-				);
-				if (!attribute) {
-					return;
-				}
-				return {
-					value: attribute[PropertySymbol.value],
-					writable: true,
-					enumerable: true,
-					configurable: true
-				};
-			}
-		});
-	}
-}