happy-dom 9.18.3 → 9.19.0

package/src/css/declaration/{utilities → element-style}/CSSStyleDeclarationElementStyle.ts

@@ -3,18 +3,22 @@ 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 CSSStyleDeclarationPropertyManager from '../property-manager/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';
+import CSSStyleDeclarationElementDefaultCSS from './config/CSSStyleDeclarationElementDefaultCSS';
+import CSSStyleDeclarationElementInheritedProperties from './config/CSSStyleDeclarationElementInheritedProperties';
+import CSSStyleDeclarationElementMeasurementProperties from './config/CSSStyleDeclarationElementMeasurementProperties';
+import CSSStyleDeclarationCSSParser from '../css-parser/CSSStyleDeclarationCSSParser';
 import QuerySelector from '../../../query-selector/QuerySelector';
+import CSSMeasurementConverter from '../measurement-converter/CSSMeasurementConverter';
+import MediaQueryList from '../../../match-media/MediaQueryList';
 
 const CSS_VARIABLE_REGEXP = /var\( *(--[^) ]+)\)/g;
+const CSS_MEASUREMENT_REGEXP = /[0-9.]+(px|rem|em|vw|vh|%|vmin|vmax|cm|mm|in|pt|pc|Q)/g;
 
 type IStyleAndElement = {
 	element: IElement | IShadowRoot | IDocument;
@@ -160,98 +164,79 @@ export default class CSSStyleDeclarationElementStyle {
 
 		// Concatenates all parent element CSS to one string.
 		const targetElement = parentElements[parentElements.length - 1];
-		let inheritedCSSText = '';
+		const propertyManager = new CSSStyleDeclarationPropertyManager();
+		const cssVariables: { [k: string]: string } = {};
+		let rootFontSize: string | number = 16;
+		let parentFontSize: string | number = 16;
 
 		for (const parentElement of parentElements) {
-			if (parentElement !== targetElement) {
-				parentElement.cssTexts.sort((a, b) => a.priorityWeight - b.priorityWeight);
-
-				if (CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName]) {
-					inheritedCSSText +=
-						CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName];
-				}
+			parentElement.cssTexts.sort((a, b) => a.priorityWeight - b.priorityWeight);
 
-				for (const cssText of parentElement.cssTexts) {
-					inheritedCSSText += cssText.cssText;
-				}
-
-				if (parentElement.element['_attributes']['style']?.value) {
-					inheritedCSSText += parentElement.element['_attributes']['style'].value;
-				}
+			let elementCSSText = '';
+			if (CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName]) {
+				elementCSSText +=
+					CSSStyleDeclarationElementDefaultCSS[(<IElement>parentElement.element).tagName];
 			}
-		}
-
-		const cssVariables: { [k: string]: string } = {};
-		const properties = {};
-		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.propertyManager && this.cache.cssText === combinedCSSText) {
-			return this.cache.propertyManager;
-		}
-
-		// 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;
+			for (const cssText of parentElement.cssTexts) {
+				elementCSSText += cssText.cssText;
 			}
 
-			if (CSSStyleDeclarationElementInheritedProperties[name]) {
-				const cssValue = this.getCSSValue(value, cssVariables);
-				if (cssValue && (!properties[name]?.important || important)) {
-					properties[name] = {
-						value: cssValue,
-						important
-					};
-				}
+			if (parentElement.element['_attributes']['style']?.value) {
+				elementCSSText += parentElement.element['_attributes']['style'].value;
 			}
-		});
-
-		// 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
-					};
+
+			CSSStyleDeclarationCSSParser.parse(elementCSSText, (name, value, important) => {
+				if (name.startsWith('--')) {
+					const cssValue = this.parseCSSVariablesInValue(value, cssVariables);
+					if (cssValue) {
+						cssVariables[name] = cssValue;
+					}
+					return;
 				}
-			} else {
-				const cssValue = this.getCSSValue(value, cssVariables);
-				if (cssValue && (!properties[name]?.important || important)) {
-					properties[name] = {
-						value: cssValue,
-						important
-					};
+
+				if (
+					CSSStyleDeclarationElementInheritedProperties[name] ||
+					parentElement === targetElement
+				) {
+					const cssValue = this.parseCSSVariablesInValue(value, cssVariables);
+					if (cssValue && (!propertyManager.get(name)?.important || important)) {
+						propertyManager.set(name, cssValue, 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 ((<IElement>parentElement.element).tagName === 'HTML') {
+									rootFontSize = parsedValue;
+								} else if (parentElement !== targetElement) {
+									parentFontSize = parsedValue;
+								}
+							}
+						}
+					}
 				}
-			}
-		});
+			});
+		}
 
-		const propertyManager = new CSSStyleDeclarationPropertyManager();
+		for (const name of CSSStyleDeclarationElementMeasurementProperties) {
+			const property = propertyManager.properties[name];
+			if (property) {
+				property.value = this.parseMeasurementsInValue({
+					value: property.value,
+					rootFontSize,
+					parentFontSize,
 
-		for (const name of Object.keys(properties)) {
-			propertyManager.set(name, properties[name].value, properties[name].important);
+					// TODO: Only "font-size" is supported when using percentage values. Add support for other properties.
+					parentSize: name === 'font-size' ? parentFontSize : 0
+				});
+			}
 		}
 
-		this.cache.cssText = combinedCSSText;
 		this.cache.propertyManager = propertyManager;
 
 		return propertyManager;
@@ -274,7 +259,7 @@ export default class CSSStyleDeclarationElementStyle {
 			return;
 		}
 
-		const defaultView = options.elements[0].element.ownerDocument.defaultView;
+		const ownerWindow = this.element.ownerDocument.defaultView;
 
 		for (const rule of options.cssRules) {
 			if (rule.type === CSSRuleTypeEnum.styleRule) {
@@ -289,10 +274,6 @@ export default class CSSStyleDeclarationElementStyle {
 						}
 					} else {
 						for (const element of options.elements) {
-							// Skip @-rules.
-							if (selectorText.startsWith('@')) {
-								continue;
-							}
 							const matchResult = QuerySelector.match(<IElement>element.element, selectorText);
 							if (matchResult) {
 								element.cssTexts.push({
@@ -305,7 +286,12 @@ export default class CSSStyleDeclarationElementStyle {
 				}
 			} else if (
 				rule.type === CSSRuleTypeEnum.mediaRule &&
-				defaultView.matchMedia((<CSSMediaRule>rule).conditionText).matches
+				// 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({
+					ownerWindow,
+					media: (<CSSMediaRule>rule).conditionText,
+					rootFontSize: this.element.tagName === 'HTML' ? 16 : null
+				}).matches
 			) {
 				this.parseCSSRules({
 					elements: options.elements,
@@ -317,23 +303,60 @@ export default class CSSStyleDeclarationElementStyle {
 	}
 
 	/**
-	 * Returns CSS value.
+	 * Parses CSS variables in a value.
 	 *
 	 * @param value Value.
 	 * @param cssVariables CSS variables.
 	 * @returns CSS value.
 	 */
-	private getCSSValue(value: string, cssVariables: { [k: string]: string }): string {
+	private parseCSSVariablesInValue(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], 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;
+	}): string {
+		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({
+					ownerWindow: this.element.ownerDocument.defaultView,
+					value: match[0],
+					rootFontSize: options.rootFontSize,
+					parentFontSize: options.parentFontSize,
+					parentSize: options.parentSize
+				});
+
+				if (valueInPixels !== null) {
+					newValue = newValue.replace(match[0], valueInPixels + 'px');
+				}
 			}
-			newValue = newValue.replace(match[0], cssVariableValue);
 		}
+
 		return newValue;
 	}
 }

package/src/css/declaration/{utilities → element-style/config}/CSSStyleDeclarationElementDefaultCSS.ts

@@ -69,7 +69,7 @@ export default {
 	HEADER: 'display: block;',
 	HGROUP: 'display: block;',
 	HR: 'display: block;',
-	HTML: 'display: block;direction: ltr;',
+	HTML: 'display: block;direction: ltr;font: 16px "Times New Roman";',
 	I: '',
 	IFRAME: '',
 	INS: '',

package/src/css/declaration/element-style/config/CSSStyleDeclarationElementMeasurementProperties.ts

@@ -0,0 +1,41 @@
+export default [
+	'background-position-x',
+	'background-position-y',
+	'background-size',
+	'border-image-outset',
+	'border-top-width',
+	'border-right-width',
+	'border-bottom-width',
+	'border-left-width',
+	'border-top-left-radius',
+	'border-top-right-radius',
+	'border-bottom-right-radius',
+	'border-bottom-left-radius',
+	'border-image-width',
+	'clip',
+	'font-size',
+	'padding-top',
+	'padding-right',
+	'padding-bottom',
+	'padding-left',
+	'margin-top',
+	'margin-right',
+	'margin-bottom',
+	'margin-left',
+	'width',
+	'height',
+	'min-width',
+	'min-height',
+	'max-width',
+	'max-height',
+	'top',
+	'right',
+	'bottom',
+	'left',
+	'outline-width',
+	'outline-offset',
+	'letter-spacing',
+	'word-spacing',
+	'text-indent',
+	'line-height'
+];

package/src/css/declaration/measurement-converter/CSSMeasurementConverter.ts

@@ -0,0 +1,81 @@
+import IWindow from '../../../window/IWindow';
+
+/**
+ * CSS Measurement Converter.
+ */
+export default class CSSMeasurementConverter {
+	/**
+	 * Returns measurement in pixels.
+	 *
+	 * @param options Options.
+	 * @param options.ownerWindow Owner window.
+	 * @param options.value Measurement (e.g. "10px", "10rem" or "10em").
+	 * @param options.rootFontSize Root font size in pixels.
+	 * @param options.parentFontSize Parent font size in pixels.
+	 * @param [options.parentSize] Parent size in pixels.
+	 * @returns Measurement in pixels.
+	 */
+	public static toPixels(options: {
+		ownerWindow: IWindow;
+		value: string;
+		rootFontSize: string | number;
+		parentFontSize: string | number;
+		parentSize?: string | number | null;
+	}): number | null {
+		const value = parseFloat(options.value);
+		const unit = options.value.replace(value.toString(), '');
+
+		if (isNaN(value)) {
+			return null;
+		}
+
+		switch (unit) {
+			case 'px':
+				return value;
+			case 'rem':
+				return this.round(value * parseFloat(<string>options.rootFontSize));
+			case 'em':
+				return this.round(value * parseFloat(<string>options.parentFontSize));
+			case 'vw':
+				return this.round((value * options.ownerWindow.innerWidth) / 100);
+			case 'vh':
+				return this.round((value * options.ownerWindow.innerHeight) / 100);
+			case '%':
+				return options.parentSize !== undefined && options.parentSize !== null
+					? this.round((value * parseFloat(<string>options.parentSize)) / 100)
+					: null;
+			case 'vmin':
+				return this.round(
+					(value * Math.min(options.ownerWindow.innerWidth, options.ownerWindow.innerHeight)) / 100
+				);
+			case 'vmax':
+				return (
+					(value * Math.max(options.ownerWindow.innerWidth, options.ownerWindow.innerHeight)) / 100
+				);
+			case 'cm':
+				return this.round(value * 37.7812);
+			case 'mm':
+				return this.round(value * 3.7781);
+			case 'in':
+				return this.round(value * 96);
+			case 'pt':
+				return this.round(value * 1.3281);
+			case 'pc':
+				return this.round(value * 16);
+			case 'Q':
+				return this.round(value * 0.945);
+			default:
+				return null;
+		}
+	}
+
+	/**
+	 * Rounds the number with 4 decimals.
+	 *
+	 * @param value Value.
+	 * @returns Rounded value.
+	 */
+	public static round(value: number): number {
+		return Math.round(value * 10000) / 10000;
+	}
+}

package/src/css/declaration/{utilities → property-manager}/CSSStyleDeclarationPropertyGetParser.ts

@@ -35,6 +35,57 @@ export default class CSSStyleDeclarationPropertyGetParser {
 		);
 	}
 
+	/**
+	 * Returns outline.
+	 *
+	 * @param properties Properties.
+	 * @returns Property value
+	 */
+	public static getOutline(properties: {
+		[k: string]: ICSSStyleDeclarationPropertyValue;
+	}): ICSSStyleDeclarationPropertyValue {
+		if (
+			!properties['outline-color']?.value ||
+			!properties['outline-style']?.value ||
+			!properties['outline-width']?.value
+		) {
+			return null;
+		}
+
+		const important =
+			properties['outline-color'].important &&
+			properties['outline-style'].important &&
+			properties['outline-width'].important;
+
+		if (
+			CSSStyleDeclarationValueParser.getGlobalExceptInitial(properties['outline-width'].value) &&
+			properties['outline-width'].value === properties['outline-style'].value &&
+			properties['outline-width'].value === properties['outline-color'].value
+		) {
+			return {
+				important,
+				value: properties['outline-width'].value
+			};
+		}
+
+		const values = [];
+
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['outline-color']?.value)) {
+			values.push(properties['outline-color'].value);
+		}
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['outline-style']?.value)) {
+			values.push(properties['outline-style'].value);
+		}
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['outline-width'].value)) {
+			values.push(properties['outline-width'].value);
+		}
+
+		return {
+			important,
+			value: values.join(' ')
+		};
+	}
+
 	/**
 	 * Returns border.
 	 *

package/src/css/declaration/{utilities → property-manager}/CSSStyleDeclarationPropertyManager.ts

@@ -2,7 +2,7 @@ import ICSSStyleDeclarationPropertyValue from './ICSSStyleDeclarationPropertyVal
 import CSSStyleDeclarationPropertySetParser from './CSSStyleDeclarationPropertySetParser';
 import CSSStyleDeclarationValueParser from './CSSStyleDeclarationValueParser';
 import CSSStyleDeclarationPropertyGetParser from './CSSStyleDeclarationPropertyGetParser';
-import CSSStyleDeclarationCSSParser from './CSSStyleDeclarationCSSParser';
+import CSSStyleDeclarationCSSParser from '../css-parser/CSSStyleDeclarationCSSParser';
 
 const TO_STRING_SHORTHAND_PROPERTIES = [
 	['margin'],
@@ -44,7 +44,7 @@ export default class CSSStyleDeclarationPropertyManager {
 	 * @param name Property name.
 	 * @returns Property value.
 	 */
-	public get(name: string): ICSSStyleDeclarationPropertyValue {
+	public get(name: string): ICSSStyleDeclarationPropertyValue | null {
 		if (this.properties[name]) {
 			return this.properties[name];
 		}
@@ -73,6 +73,8 @@ export default class CSSStyleDeclarationPropertyManager {
 				return CSSStyleDeclarationPropertyGetParser.getBorderRadius(this.properties);
 			case 'border-image':
 				return CSSStyleDeclarationPropertyGetParser.getBorderImage(this.properties);
+			case 'outline':
+				return CSSStyleDeclarationPropertyGetParser.getOutline(this.properties);
 			case 'background':
 				return CSSStyleDeclarationPropertyGetParser.getBackground(this.properties);
 			case 'background-position':
@@ -186,6 +188,11 @@ export default class CSSStyleDeclarationPropertyManager {
 				delete this.properties['border-bottom-right-radius'];
 				delete this.properties['border-bottom-left-radius'];
 				break;
+			case 'outline':
+				delete this.properties['outline-color'];
+				delete this.properties['outline-style'];
+				delete this.properties['outline-width'];
+				break;
 			case 'background':
 				delete this.properties['background-color'];
 				delete this.properties['background-image'];
@@ -348,6 +355,24 @@ export default class CSSStyleDeclarationPropertyManager {
 			case 'border-collapse':
 				properties = CSSStyleDeclarationPropertySetParser.getBorderCollapse(value, important);
 				break;
+			case 'outline':
+				properties = CSSStyleDeclarationPropertySetParser.getOutline(value, important);
+				break;
+			case 'outline-width':
+				properties = CSSStyleDeclarationPropertySetParser.getOutlineWidth(value, important);
+				break;
+			case 'outline-style':
+				properties = CSSStyleDeclarationPropertySetParser.getOutlineStyle(value, important);
+				break;
+			case 'outline-color':
+				properties = CSSStyleDeclarationPropertySetParser.getOutlineColor(value, important);
+				break;
+			case 'letter-spacing':
+				properties = CSSStyleDeclarationPropertySetParser.getLetterSpacing(value, important);
+				break;
+			case 'word-spacing':
+				properties = CSSStyleDeclarationPropertySetParser.getWordSpacing(value, important);
+				break;
 			case 'clear':
 				properties = CSSStyleDeclarationPropertySetParser.getClear(value, important);
 				break;
@@ -429,6 +454,9 @@ export default class CSSStyleDeclarationPropertyManager {
 			case 'width':
 				properties = CSSStyleDeclarationPropertySetParser.getWidth(value, important);
 				break;
+			case 'height':
+				properties = CSSStyleDeclarationPropertySetParser.getHeight(value, important);
+				break;
 			case 'top':
 				properties = CSSStyleDeclarationPropertySetParser.getTop(value, important);
 				break;
@@ -462,6 +490,9 @@ export default class CSSStyleDeclarationPropertyManager {
 			case 'line-height':
 				properties = CSSStyleDeclarationPropertySetParser.getLineHeight(value, important);
 				break;
+			case 'text-indent':
+				properties = CSSStyleDeclarationPropertySetParser.getTextIndent(value, important);
+				break;
 			case 'font-family':
 				properties = CSSStyleDeclarationPropertySetParser.getFontFamily(value, important);
 				break;
@@ -477,6 +508,7 @@ export default class CSSStyleDeclarationPropertyManager {
 			case 'visibility':
 				properties = CSSStyleDeclarationPropertySetParser.getVisibility(value, important);
 				break;
+
 			default:
 				const trimmedValue = value.trim();
 				if (trimmedValue) {