happy-dom 6.0.4 → 7.0.0

package/src/css/declaration/utilities/CSSStyleDeclarationCSSParser.ts

@@ -0,0 +1,35 @@
+/**
+ * CSS parser.
+ */
+export default class CSSStyleDeclarationCSSParser {
+	/**
+	 * Class construtor.
+	 *
+	 * @param cssText CSS string.
+	 * @param callback Callback.
+	 */
+	public static parse(
+		cssText: string,
+		callback: (name: string, value: string, important: boolean) => void
+	): void {
+		const parts = cssText.split(';');
+
+		for (const part of parts) {
+			if (part) {
+				const [name, value]: string[] = part.trim().split(':');
+				if (value) {
+					const trimmedName = name.trim();
+					const trimmedValue = value.trim();
+					if (trimmedName && trimmedValue) {
+						const important = trimmedValue.endsWith(' !important');
+						const valueWithoutImportant = trimmedValue.replace(' !important', '');
+
+						if (valueWithoutImportant) {
+							callback(trimmedName, valueWithoutImportant, important);
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/src/css/declaration/utilities/CSSStyleDeclarationElementDefaultCSS.ts

@@ -0,0 +1,130 @@
+export default {
+	default: 'display: inline;',
+	A: '',
+	ABBR: '',
+	ADDRESS: 'display: block;',
+	AREA: '',
+	ARTICLE: 'display: block;',
+	ASIDE: 'display: block;',
+	AUDIO: 'display: none;',
+	B: '',
+	BASE: 'display: none;',
+	BDI: '',
+	BDO: '',
+	BLOCKQUAOTE: '',
+	BODY: 'display: block;',
+	TEMPLATE: 'display: none;',
+	FORM: 'display: block;',
+	INPUT: 'display: inline-block;',
+	TEXTAREA: 'display: inline-block;',
+	SCRIPT: 'display: none;',
+	IMG: '',
+	LINK: 'display: none;',
+	STYLE: 'display: none;',
+	LABEL: '',
+	SLOT: 'display: contents;',
+	SVG: '',
+	CIRCLE: '',
+	ELLIPSE: '',
+	LINE: '',
+	PATH: '',
+	POLYGON: '',
+	POLYLINE: '',
+	RECT: '',
+	STOP: '',
+	USE: '',
+	META: 'display: none;',
+	BLOCKQUOTE: 'display: block;',
+	BR: '',
+	BUTTON: 'display: inline-block;',
+	CANVAS: '',
+	CAPTION: 'display: table-caption;',
+	CITE: '',
+	CODE: '',
+	COL: 'display: table-column;',
+	COLGROUP: 'display: table-column-group;',
+	DATA: '',
+	DATALIST: 'display: none;',
+	DD: 'display: block;',
+	DEL: '',
+	DETAILS: 'display: block;',
+	DFN: '',
+	DIALOG: 'display: none;',
+	DIV: 'display: block;',
+	DL: 'display: block;',
+	DT: 'display: block;',
+	EM: '',
+	EMBED: '',
+	FIELDSET: 'display: block;',
+	FIGCAPTION: 'display: block;',
+	FIGURE: 'display: block;',
+	FOOTER: 'display: block;',
+	H1: 'display: block;',
+	H2: 'display: block;',
+	H3: 'display: block;',
+	H4: 'display: block;',
+	H5: 'display: block;',
+	H6: 'display: block;',
+	HEAD: 'display: none;',
+	HEADER: 'display: block;',
+	HGROUP: 'display: block;',
+	HR: 'display: block;',
+	HTML: 'display: block;direction: ltr;',
+	I: '',
+	IFRAME: '',
+	INS: '',
+	KBD: '',
+	LEGEND: 'display: block;',
+	LI: 'display: list-item;',
+	MAIN: 'display: block;',
+	MAP: '',
+	MARK: '',
+	MATH: '',
+	MENU: 'display: block;',
+	MENUITEM: '',
+	METER: 'display: inline-block;',
+	NAV: 'display: block;',
+	NOSCRIPT: '',
+	OBJECT: '',
+	OL: 'display: block;',
+	OPTGROUP: 'display: block;',
+	OPTION: 'display: block;',
+	OUTPUT: 'unicode-bidi: isolate;',
+	P: 'display: block;',
+	PARAM: 'display: none;',
+	PICTURE: '',
+	PRE: 'display: block;',
+	PROGRESS: 'display: inline-block;',
+	Q: '',
+	RB: '',
+	RP: 'display: none;',
+	RT: '',
+	RTC: '',
+	RUBY: '',
+	S: '',
+	SAMP: '',
+	SECTION: 'display: block;',
+	SELECT: 'display: inline-block;',
+	SMALL: '',
+	SOURCE: '',
+	SPAN: '',
+	STRONG: '',
+	SUB: '',
+	SUMMARY: 'display: block;',
+	SUP: '',
+	TABLE: 'display: table;',
+	TBODY: 'display: table-row-group;',
+	TD: 'display: table-cell;',
+	TFOOT: 'display: table-footer-group;',
+	TH: 'display: table-cell;',
+	THEAD: 'display: table-header-group;',
+	TIME: '',
+	TITLE: 'display: none;',
+	TR: 'display: table-row;',
+	TRACK: '',
+	U: '',
+	UL: 'display: block;',
+	VAR: '',
+	VIDEO: '',
+	WBR: ''
+};

package/src/css/declaration/utilities/CSSStyleDeclarationElementInheritedProperties.ts

@@ -0,0 +1,39 @@
+export default {
+	'border-collapse': true,
+	'border-spacing': true,
+	'caption-side': true,
+	color: true,
+	cursor: true,
+	direction: true,
+	'empty-cells': true,
+	'font-family': true,
+	'font-size': true,
+	'font-style': true,
+	'font-variant': true,
+	'font-weight': true,
+	'font-size-adjust': true,
+	'font-stretch': true,
+	font: true,
+	'letter-spacing': true,
+	'line-height': true,
+	'list-style-image': true,
+	'list-style-position': true,
+	'list-style-type': true,
+	'list-style': true,
+	orphans: true,
+	quotes: true,
+	'tab-size': true,
+	'text-align': true,
+	'text-align-last': true,
+	'text-decoration-color': true,
+	'text-indent': true,
+	'text-justify': true,
+	'text-shadow': true,
+	'text-transform': true,
+	visibility: true,
+	'white-space': true,
+	widows: true,
+	'word-break': true,
+	'word-spacing': true,
+	'word-wrap': true
+};

package/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts

@@ -0,0 +1,282 @@
+import IShadowRoot from '../../../nodes/shadow-root/IShadowRoot';
+import IElement from '../../../nodes/element/IElement';
+import IDocument from '../../../nodes/document/IDocument';
+import IHTMLStyleElement from '../../../nodes/html-style-element/IHTMLStyleElement';
+import INodeList from '../../../nodes/node/INodeList';
+import CSSStyleDeclarationPropertyManager from './CSSStyleDeclarationPropertyManager';
+import NodeTypeEnum from '../../../nodes/node/NodeTypeEnum';
+import CSSRuleTypeEnum from '../../CSSRuleTypeEnum';
+import CSSMediaRule from '../../rules/CSSMediaRule';
+import CSSRule from '../../CSSRule';
+import CSSStyleRule from '../../rules/CSSStyleRule';
+import CSSStyleDeclarationElementDefaultCSS from './CSSStyleDeclarationElementDefaultCSS';
+import CSSStyleDeclarationElementInheritedProperties from './CSSStyleDeclarationElementInheritedProperties';
+import CSSStyleDeclarationCSSParser from './CSSStyleDeclarationCSSParser';
+
+const CSS_VARIABLE_REGEXP = /var\( *(--[^) ]+)\)/g;
+
+/**
+ * CSS Style Declaration utility
+ */
+export default class CSSStyleDeclarationElementStyle {
+	private cache: { [k: string]: CSSStyleDeclarationPropertyManager } = {};
+	private element: IElement;
+	private computed: boolean;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param element Element.
+	 * @param [computed] Computed.
+	 */
+	constructor(element: IElement, 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 cssText = this.element['_attributes']['style']?.value;
+
+		if (cssText) {
+			if (this.cache[cssText]) {
+				return this.cache[cssText];
+			}
+			this.cache[cssText] = new CSSStyleDeclarationPropertyManager({ cssText });
+			return this.cache[cssText];
+		}
+
+		return new CSSStyleDeclarationPropertyManager();
+	}
+
+	/**
+	 * Returns style sheets.
+	 *
+	 * @param element Element.
+	 * @returns Style sheets.
+	 */
+	private getComputedElementStyle(): CSSStyleDeclarationPropertyManager {
+		const documentElements: Array<{ element: IElement; cssText: string }> = [];
+		const parentElements: Array<{ element: IElement; cssText: string }> = [];
+		let styleAndElement = {
+			element: <IElement | IShadowRoot | IDocument>this.element,
+			cssText: ''
+		};
+		let shadowRootElements: Array<{ element: IElement; cssText: string }> = [];
+
+		if (!this.element.isConnected) {
+			return new CSSStyleDeclarationPropertyManager();
+		}
+
+		// Walks through all parent elements and stores them in an array with element and matching CSS text.
+		while (styleAndElement.element) {
+			if (styleAndElement.element.nodeType === NodeTypeEnum.elementNode) {
+				const rootNode = styleAndElement.element.getRootNode();
+				if (rootNode.nodeType === NodeTypeEnum.documentNode) {
+					documentElements.unshift(<{ element: IElement; cssText: string }>styleAndElement);
+				} else {
+					shadowRootElements.unshift(<{ element: IElement; cssText: string }>styleAndElement);
+				}
+				parentElements.unshift(<{ element: IElement; cssText: string }>styleAndElement);
+			}
+
+			if (styleAndElement.element === this.element.ownerDocument) {
+				const styleSheets = <INodeList<IHTMLStyleElement>>(
+					this.element.ownerDocument.querySelectorAll('style,link[rel="stylesheet"]')
+				);
+
+				for (const styleSheet of styleSheets) {
+					const sheet = styleSheet.sheet;
+					if (sheet) {
+						this.parseCSSRules({
+							elements: documentElements,
+							cssRules: sheet.cssRules
+						});
+					}
+				}
+
+				styleAndElement = { element: null, cssText: '' };
+			} else if ((<IShadowRoot>styleAndElement.element).host) {
+				const styleSheets = <INodeList<IHTMLStyleElement>>(
+					(<IShadowRoot>styleAndElement.element).querySelectorAll('style,link[rel="stylesheet"]')
+				);
+
+				styleAndElement = {
+					element: <IElement>(<IShadowRoot>styleAndElement.element).host,
+					cssText: ''
+				};
+
+				for (const styleSheet of styleSheets) {
+					const sheet = styleSheet.sheet;
+					if (sheet) {
+						this.parseCSSRules({
+							elements: shadowRootElements,
+							cssRules: sheet.cssRules,
+							hostElement: <{ element: IElement; cssText: string }>styleAndElement
+						});
+					}
+				}
+				shadowRootElements = [];
+			} else {
+				styleAndElement = { element: <IElement>styleAndElement.element.parentNode, cssText: '' };
+			}
+		}
+
+		// Concatenates all parent element CSS to one string.
+		const targetElement = parentElements[parentElements.length - 1];
+		let inheritedCSSText = CSSStyleDeclarationElementDefaultCSS.default;
+
+		for (const parentElement of parentElements) {
+			if (parentElement !== targetElement) {
+				inheritedCSSText +=
+					(CSSStyleDeclarationElementDefaultCSS[parentElement.element.tagName] || '') +
+					parentElement.cssText +
+					(parentElement.element['_attributes']['style']?.value || '');
+			}
+		}
+
+		const cssVariables: { [k: string]: string } = {};
+		const properties = {};
+		const targetCSSText =
+			(CSSStyleDeclarationElementDefaultCSS[targetElement.element.tagName] || '') +
+			targetElement.cssText +
+			(targetElement.element['_attributes']['style']?.value || '');
+		const combinedCSSText = inheritedCSSText + targetCSSText;
+
+		if (this.cache[combinedCSSText]) {
+			return this.cache[combinedCSSText];
+		}
+
+		// Parses the parent element CSS and stores CSS variables and inherited properties.
+		CSSStyleDeclarationCSSParser.parse(inheritedCSSText, (name, value, important) => {
+			if (name.startsWith('--')) {
+				const cssValue = this.getCSSValue(value, cssVariables);
+				if (cssValue) {
+					cssVariables[name] = cssValue;
+				}
+				return;
+			}
+
+			if (CSSStyleDeclarationElementInheritedProperties[name]) {
+				const cssValue = this.getCSSValue(value, cssVariables);
+				if (cssValue && (!properties[name]?.important || important)) {
+					properties[name] = {
+						value: cssValue,
+						important
+					};
+				}
+			}
+		});
+
+		// Parses the target element CSS.
+		CSSStyleDeclarationCSSParser.parse(targetCSSText, (name, value, important) => {
+			if (name.startsWith('--')) {
+				const cssValue = this.getCSSValue(value, cssVariables);
+				if (cssValue && (!properties[name]?.important || important)) {
+					cssVariables[name] = cssValue;
+					properties[name] = {
+						value,
+						important
+					};
+				}
+			} else {
+				const cssValue = this.getCSSValue(value, cssVariables);
+				if (cssValue && (!properties[name]?.important || important)) {
+					properties[name] = {
+						value: cssValue,
+						important
+					};
+				}
+			}
+		});
+
+		const propertyManager = new CSSStyleDeclarationPropertyManager();
+
+		for (const name of Object.keys(properties)) {
+			propertyManager.set(name, properties[name].value, properties[name].important);
+		}
+
+		this.cache[combinedCSSText] = propertyManager;
+
+		return propertyManager;
+	}
+
+	/**
+	 * Applies CSS text to elements.
+	 *
+	 * @param options Options.
+	 * @param options.elements Elements.
+	 * @param options.cssRules CSS rules.
+	 * @param [options.hostElement] Host element.
+	 * @param [options.hostElement.element] Element.
+	 * @param [options.hostElement.cssText] CSS text.
+	 */
+	private parseCSSRules(options: {
+		cssRules: CSSRule[];
+		elements: Array<{ element: IElement; cssText: string }>;
+		hostElement?: { element: IElement; cssText: string };
+	}): void {
+		if (!options.elements.length) {
+			return;
+		}
+
+		const defaultView = options.elements[0].element.ownerDocument.defaultView;
+
+		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.cssText += (<CSSStyleRule>rule)._cssText;
+						}
+					} else {
+						for (const element of options.elements) {
+							if (element.element.matches(selectorText)) {
+								element.cssText += (<CSSStyleRule>rule)._cssText;
+							}
+						}
+					}
+				}
+			} else if (
+				rule.type === CSSRuleTypeEnum.mediaRule &&
+				defaultView.matchMedia((<CSSMediaRule>rule).conditionalText).matches
+			) {
+				this.parseCSSRules({
+					elements: options.elements,
+					cssRules: (<CSSMediaRule>rule).cssRules,
+					hostElement: options.hostElement
+				});
+			}
+		}
+	}
+
+	/**
+	 * Returns CSS value.
+	 *
+	 * @param value Value.
+	 * @param cssVariables CSS variables.
+	 * @returns CSS value.
+	 */
+	private getCSSValue(value: string, cssVariables: { [k: string]: string }): string {
+		const regexp = new RegExp(CSS_VARIABLE_REGEXP);
+		let newValue = value;
+		let match;
+		while ((match = regexp.exec(value)) !== null) {
+			const cssVariableValue = cssVariables[match[1]];
+			if (!cssVariableValue) {
+				return null;
+			}
+			newValue = newValue.replace(match[0], cssVariableValue);
+		}
+		return newValue;
+	}
+}