happy-dom 7.4.0 → 7.5.1

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

@@ -12,14 +12,29 @@ import CSSStyleRule from '../../rules/CSSStyleRule';
 import CSSStyleDeclarationElementDefaultCSS from './CSSStyleDeclarationElementDefaultCSS';
 import CSSStyleDeclarationElementInheritedProperties from './CSSStyleDeclarationElementInheritedProperties';
 import CSSStyleDeclarationCSSParser from './CSSStyleDeclarationCSSParser';
+import QuerySelector from '../../../query-selector/QuerySelector';
 
 const CSS_VARIABLE_REGEXP = /var\( *(--[^) ]+)\)/g;
 
+type IStyleAndElement = {
+	element: IElement | IShadowRoot | IDocument;
+	cssTexts: Array<{ cssText: string; priorityWeight: number }>;
+};
+
 /**
  * CSS Style Declaration utility
  */
 export default class CSSStyleDeclarationElementStyle {
-	private cache: { [k: string]: CSSStyleDeclarationPropertyManager } = {};
+	private cache: {
+		propertyManager: CSSStyleDeclarationPropertyManager;
+		cssText: string;
+		documentCacheID: number;
+	} = {
+		propertyManager: null,
+		cssText: null,
+		documentCacheID: null
+	};
+
 	private element: IElement;
 	private computed: boolean;
 
@@ -47,11 +62,12 @@ export default class CSSStyleDeclarationElementStyle {
 		const cssText = this.element['_attributes']['style']?.value;
 
 		if (cssText) {
-			if (this.cache[cssText]) {
-				return this.cache[cssText];
+			if (this.cache.propertyManager && this.cache.cssText === cssText) {
+				return this.cache.propertyManager;
 			}
-			this.cache[cssText] = new CSSStyleDeclarationPropertyManager({ cssText });
-			return this.cache[cssText];
+			this.cache.cssText = cssText;
+			this.cache.propertyManager = new CSSStyleDeclarationPropertyManager({ cssText });
+			return this.cache.propertyManager;
 		}
 
 		return new CSSStyleDeclarationPropertyManager();
@@ -64,28 +80,37 @@ export default class CSSStyleDeclarationElementStyle {
 	 * @returns Style sheets.
 	 */
 	private getComputedElementStyle(): CSSStyleDeclarationPropertyManager {
-		const documentElements: Array<{ element: IElement; cssText: string }> = [];
-		const parentElements: Array<{ element: IElement; cssText: string }> = [];
-		let styleAndElement = {
+		const documentElements: Array<IStyleAndElement> = [];
+		const parentElements: Array<IStyleAndElement> = [];
+		let styleAndElement: IStyleAndElement = {
 			element: <IElement | IShadowRoot | IDocument>this.element,
-			cssText: ''
+			cssTexts: []
 		};
-		let shadowRootElements: Array<{ element: IElement; cssText: string }> = [];
+		let shadowRootElements: Array<IStyleAndElement> = [];
 
 		if (!this.element.isConnected) {
 			return new CSSStyleDeclarationPropertyManager();
 		}
 
+		if (
+			this.cache.propertyManager &&
+			this.cache.documentCacheID === this.element.ownerDocument['_cacheID']
+		) {
+			return this.cache.propertyManager;
+		}
+
+		this.cache.documentCacheID = this.element.ownerDocument['_cacheID'];
+
 		// 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);
+					documentElements.unshift(styleAndElement);
 				} else {
-					shadowRootElements.unshift(<{ element: IElement; cssText: string }>styleAndElement);
+					shadowRootElements.unshift(styleAndElement);
 				}
-				parentElements.unshift(<{ element: IElement; cssText: string }>styleAndElement);
+				parentElements.unshift(styleAndElement);
 			}
 
 			if (styleAndElement.element === this.element.ownerDocument) {
@@ -103,7 +128,7 @@ export default class CSSStyleDeclarationElementStyle {
 					}
 				}
 
-				styleAndElement = { element: null, cssText: '' };
+				styleAndElement = { element: null, cssTexts: [] };
 			} else if ((<IShadowRoot>styleAndElement.element).host) {
 				const styleSheets = <INodeList<IHTMLStyleElement>>(
 					(<IShadowRoot>styleAndElement.element).querySelectorAll('style,link[rel="stylesheet"]')
@@ -111,7 +136,7 @@ export default class CSSStyleDeclarationElementStyle {
 
 				styleAndElement = {
 					element: <IElement>(<IShadowRoot>styleAndElement.element).host,
-					cssText: ''
+					cssTexts: []
 				};
 
 				for (const styleSheet of styleSheets) {
@@ -120,39 +145,58 @@ export default class CSSStyleDeclarationElementStyle {
 						this.parseCSSRules({
 							elements: shadowRootElements,
 							cssRules: sheet.cssRules,
-							hostElement: <{ element: IElement; cssText: string }>styleAndElement
+							hostElement: styleAndElement
 						});
 					}
 				}
 				shadowRootElements = [];
 			} else {
-				styleAndElement = { element: <IElement>styleAndElement.element.parentNode, cssText: '' };
+				styleAndElement = { element: <IElement>styleAndElement.element.parentNode, cssTexts: [] };
 			}
 		}
 
 		// Concatenates all parent element CSS to one string.
 		const targetElement = parentElements[parentElements.length - 1];
-		let inheritedCSSText = CSSStyleDeclarationElementDefaultCSS.default;
+		let inheritedCSSText = '';
 
 		for (const parentElement of parentElements) {
 			if (parentElement !== targetElement) {
-				inheritedCSSText +=
-					(CSSStyleDeclarationElementDefaultCSS[parentElement.element.tagName] || '') +
-					parentElement.cssText +
-					(parentElement.element['_attributes']['style']?.value || '');
+				parentElement.cssTexts.sort((a, b) => a.priorityWeight - b.priorityWeight);
+
+				if (CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName]) {
+					inheritedCSSText +=
+						CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName];
+				}
+
+				for (const cssText of parentElement.cssTexts) {
+					inheritedCSSText += cssText.cssText;
+				}
+
+				if (parentElement.element['_attributes']['style']?.value) {
+					inheritedCSSText += 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 || '');
+		let targetCSSText =
+			CSSStyleDeclarationElementDefaultCSS[(<IElement>targetElement.element).tagName] || '';
+
+		targetElement.cssTexts.sort((a, b) => a.priorityWeight - b.priorityWeight);
+
+		for (const cssText of targetElement.cssTexts) {
+			targetCSSText += cssText.cssText;
+		}
+
+		if (targetElement.element['_attributes']['style']?.value) {
+			targetCSSText += targetElement.element['_attributes']['style'].value;
+		}
+
 		const combinedCSSText = inheritedCSSText + targetCSSText;
 
-		if (this.cache[combinedCSSText]) {
-			return this.cache[combinedCSSText];
+		if (this.cache.propertyManager && this.cache.cssText === combinedCSSText) {
+			return this.cache.propertyManager;
 		}
 
 		// Parses the parent element CSS and stores CSS variables and inherited properties.
@@ -204,7 +248,8 @@ export default class CSSStyleDeclarationElementStyle {
 			propertyManager.set(name, properties[name].value, properties[name].important);
 		}
 
-		this.cache[combinedCSSText] = propertyManager;
+		this.cache.cssText = combinedCSSText;
+		this.cache.propertyManager = propertyManager;
 
 		return propertyManager;
 	}
@@ -216,13 +261,11 @@ export default class CSSStyleDeclarationElementStyle {
 	 * @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 };
+		elements: Array<IStyleAndElement>;
+		hostElement?: IStyleAndElement;
 	}): void {
 		if (!options.elements.length) {
 			return;
@@ -236,12 +279,19 @@ export default class CSSStyleDeclarationElementStyle {
 				if (selectorText) {
 					if (selectorText.startsWith(':host')) {
 						if (options.hostElement) {
-							options.hostElement.cssText += (<CSSStyleRule>rule)._cssText;
+							options.hostElement.cssTexts.push({
+								cssText: (<CSSStyleRule>rule)._cssText,
+								priorityWeight: 0
+							});
 						}
 					} else {
 						for (const element of options.elements) {
-							if (element.element.matches(selectorText)) {
-								element.cssText += (<CSSStyleRule>rule)._cssText;
+							const matchResult = QuerySelector.match(element.element, selectorText);
+							if (matchResult.matches) {
+								element.cssTexts.push({
+									cssText: (<CSSStyleRule>rule)._cssText,
+									priorityWeight: matchResult.priorityWeight
+								});
 							}
 						}
 					}

package/src/nodes/character-data/CharacterData.ts

@@ -56,6 +56,10 @@ export default abstract class CharacterData extends Node implements ICharacterDa
 		const oldValue = this._data;
 		this._data = data;
 
+		if (this.isConnected) {
+			this.ownerDocument['_cacheID']++;
+		}
+
 		// MutationObserver
 		if (this._observers.length > 0) {
 			for (const observer of this._observers) {

package/src/nodes/document/Document.ts

@@ -60,6 +60,10 @@ export default class Document extends Node implements IDocument {
 	public readonly defaultView: IWindow;
 	public readonly _readyStateManager: DocumentReadyStateManager;
 	public _activeElement: IHTMLElement = null;
+
+	// Used as an unique identifier which is updated whenever the DOM gets modified.
+	public _cacheID = 0;
+
 	protected _isFirstWrite = true;
 	protected _isFirstWriteAfterOpen = false;
 	private _cookie = '';

package/src/nodes/element/Element.ts

@@ -5,7 +5,6 @@ import DOMRect from './DOMRect';
 import DOMTokenList from '../../dom-token-list/DOMTokenList';
 import IDOMTokenList from '../../dom-token-list/IDOMTokenList';
 import QuerySelector from '../../query-selector/QuerySelector';
-import SelectorItem from '../../query-selector/SelectorItem';
 import MutationRecord from '../../mutation-observer/MutationRecord';
 import MutationTypeEnum from '../../mutation-observer/MutationTypeEnum';
 import NamespaceURI from '../../config/NamespaceURI';
@@ -744,12 +743,7 @@ export default class Element extends Node implements IElement {
 	 * @returns "true" if matching.
 	 */
 	public matches(selector: string): boolean {
-		for (const part of selector.split(',')) {
-			if (new SelectorItem(part.trim()).match(this)) {
-				return true;
-			}
-		}
-		return false;
+		return QuerySelector.match(this, selector).matches;
 	}
 
 	/**
@@ -852,6 +846,10 @@ export default class Element extends Node implements IElement {
 		(<IElement>attribute.ownerElement) = <IElement>this;
 		(<IDocument>attribute.ownerDocument) = this.ownerDocument;
 
+		if (this.isConnected) {
+			this.ownerDocument['_cacheID']++;
+		}
+
 		this._attributes[name] = attribute;
 
 		this._updateDomListIndices();
@@ -937,6 +935,10 @@ export default class Element extends Node implements IElement {
 	public removeAttributeNode(attribute: IAttr): void {
 		delete this._attributes[attribute.name];
 
+		if (this.isConnected) {
+			this.ownerDocument['_cacheID']++;
+		}
+
 		this._updateDomListIndices();
 
 		if (

package/src/nodes/node/Node.ts

@@ -73,6 +73,15 @@ export default class Node extends EventTarget implements INode {
 		this.ownerDocument = (<typeof Node>this.constructor)._ownerDocument;
 	}
 
+	/**
+	 * Returns `Symbol.toStringTag`.
+	 *
+	 * @returns `Symbol.toStringTag`.
+	 */
+	public get [Symbol.toStringTag](): string {
+		return this.constructor.name;
+	}
+
 	/**
 	 * Get text value of children.
 	 *
@@ -308,6 +317,10 @@ export default class Node extends EventTarget implements INode {
 			}
 		}
 
+		if (this.isConnected) {
+			(this.ownerDocument || this)['_cacheID']++;
+		}
+
 		this.childNodes.push(node);
 
 		(<Node>node)._connectToNode(this);
@@ -345,6 +358,10 @@ export default class Node extends EventTarget implements INode {
 			throw new DOMException('Failed to remove node. Node is not child of parent.');
 		}
 
+		if (this.isConnected) {
+			(this.ownerDocument || this)['_cacheID']++;
+		}
+
 		this.childNodes.splice(index, 1);
 
 		(<Node>node)._connectToNode(null);
@@ -404,6 +421,10 @@ export default class Node extends EventTarget implements INode {
 			);
 		}
 
+		if (this.isConnected) {
+			(this.ownerDocument || this)['_cacheID']++;
+		}
+
 		if (newNode.parentNode) {
 			const index = newNode.parentNode.childNodes.indexOf(newNode);
 			if (index !== -1) {

package/src/nodes/node/NodeList.ts

@@ -5,6 +5,15 @@ import INode from './INode';
  * Class list.
  */
 export default class NodeList extends Array implements INodeList<INode> {
+	/**
+	 * Returns `Symbol.toStringTag`.
+	 *
+	 * @returns `Symbol.toStringTag`.
+	 */
+	public get [Symbol.toStringTag](): string {
+		return this.constructor.name;
+	}
+
 	/**
 	 * Returns item by index.
 	 *

package/src/query-selector/QuerySelector.ts

@@ -8,9 +8,6 @@ import NodeListFactory from '../nodes/node/NodeListFactory';
 
 const SELECTOR_PART_REGEXP = /(\[[^\]]+\]|[a-zA-Z0-9-_.#"*:()\]]+)|([ ,>]+)/g;
 
-// The above one seem to work fine and is faster, but this one can be useful if more rules need to be added as it is more "correct".
-// Const SELECTOR_PART_REGEXP = /([a-zA-Z0-9-$.]+|\[[a-zA-Z0-9-]+\]|\[[a-zA-Z0-9$-~|^$*]+[ ]*=[ ]*"[^"]+"\])|([ ,]+)/g;
-
 /**
  * Utility for query selection in an HTML element.
  *
@@ -57,6 +54,70 @@ export default class QuerySelector {
 		return null;
 	}
 
+	/**
+	 * Checks if a node matches a selector and returns priority weight.
+	 *
+	 * @param node Node to search in.
+	 * @param selector Selector.
+	 * @returns Result.
+	 */
+	public static match(node: INode, selector: string): { priorityWeight: number; matches: boolean } {
+		for (const parts of this.getSelectorParts(selector)) {
+			const result = this.matchesSelector(node, node, parts.reverse());
+
+			if (result.matches) {
+				return result;
+			}
+		}
+
+		return { priorityWeight: 0, matches: false };
+	}
+
+	/**
+	 * Checks if a node matches a selector.
+	 *
+	 * @param targetNode Target node.
+	 * @param currentNode Current node.
+	 * @param selectorParts Selector parts.
+	 * @param [priorityWeight] Priority weight.
+	 * @returns Result.
+	 */
+	private static matchesSelector(
+		targetNode: INode,
+		currentNode: INode,
+		selectorParts: string[],
+		priorityWeight = 0
+	): {
+		priorityWeight: number;
+		matches: boolean;
+	} {
+		const isDirectChild = selectorParts[0] === '>';
+		if (isDirectChild) {
+			selectorParts = selectorParts.slice(1);
+			if (selectorParts.length === 0) {
+				return { priorityWeight: 0, matches: false };
+			}
+		}
+
+		if (selectorParts.length === 0) {
+			return { priorityWeight, matches: true };
+		}
+
+		const selector = new SelectorItem(selectorParts[0]);
+		const result = selector.match(<Element>currentNode);
+
+		if (targetNode === currentNode && !result.matches) {
+			return { priorityWeight: 0, matches: false };
+		}
+
+		return this.matchesSelector(
+			isDirectChild ? currentNode.parentNode : targetNode,
+			currentNode.parentNode,
+			selectorParts.slice(1),
+			priorityWeight + result.priorityWeight
+		);
+	}
+
 	/**
 	 * Finds elements based on a query selector for a part of a list of selectors separated with comma.
 	 *
@@ -81,7 +142,7 @@ export default class QuerySelector {
 
 		for (const node of nodes) {
 			if (node.nodeType === Node.ELEMENT_NODE) {
-				if (selector.match(<Element>node)) {
+				if (selector.match(<Element>node).matches) {
 					if (selectorParts.length === 1) {
 						if (rootNode !== node) {
 							matched.push(node);
@@ -125,7 +186,7 @@ export default class QuerySelector {
 		const selector = selectorItem || new SelectorItem(selectorParts[0]);
 
 		for (const node of nodes) {
-			if (node.nodeType === Node.ELEMENT_NODE && selector.match(<Element>node)) {
+			if (node.nodeType === Node.ELEMENT_NODE && selector.match(<Element>node).matches) {
 				if (selectorParts.length === 1) {
 					if (rootNode !== node) {
 						return <Element>node;