happy-dom 9.18.2 → 9.19.0

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

@@ -174,6 +174,66 @@ export default class CSSStyleDeclarationPropertySetParser {
 		return null;
 	}
 
+	/**
+	 * Returns letter spacing.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getLetterSpacing(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
+			CSSStyleDeclarationValueParser.getGlobal(value) ||
+			CSSStyleDeclarationValueParser.getContentMeasurement(value);
+		return parsedValue ? { 'letter-spacing': { value: parsedValue, important } } : null;
+	}
+
+	/**
+	 * Returns word spacing.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getWordSpacing(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
+			CSSStyleDeclarationValueParser.getGlobal(value) ||
+			CSSStyleDeclarationValueParser.getContentMeasurement(value);
+		return parsedValue ? { 'word-spacing': { value: parsedValue, important } } : null;
+	}
+
+	/**
+	 * Returns text indent.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getTextIndent(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
+			CSSStyleDeclarationValueParser.getGlobal(value) ||
+			CSSStyleDeclarationValueParser.getContentMeasurement(value);
+		return parsedValue ? { 'text-indent': { value: parsedValue, important } } : null;
+	}
+
 	/**
 	 * Returns width.
 	 *
@@ -187,16 +247,33 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
-		const variable = CSSStyleDeclarationValueParser.getVariable(value);
-		if (variable) {
-			return { width: { value: variable, important } };
-		}
 		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
 			CSSStyleDeclarationValueParser.getGlobal(value) ||
 			CSSStyleDeclarationValueParser.getContentMeasurement(value);
 		return parsedValue ? { width: { value: parsedValue, important } } : null;
 	}
 
+	/**
+	 * Returns height.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getHeight(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
+			CSSStyleDeclarationValueParser.getGlobal(value) ||
+			CSSStyleDeclarationValueParser.getContentMeasurement(value);
+		return parsedValue ? { height: { value: parsedValue, important } } : null;
+	}
+
 	/**
 	 * Returns top.
 	 *
@@ -210,11 +287,8 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
-		const variable = CSSStyleDeclarationValueParser.getVariable(value);
-		if (variable) {
-			return { top: { value: variable, important } };
-		}
 		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
 			CSSStyleDeclarationValueParser.getGlobal(value) ||
 			CSSStyleDeclarationValueParser.getContentMeasurement(value);
 		return parsedValue ? { top: { value: parsedValue, important } } : null;
@@ -233,11 +307,8 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
-		const variable = CSSStyleDeclarationValueParser.getVariable(value);
-		if (variable) {
-			return { right: { value: variable, important } };
-		}
 		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
 			CSSStyleDeclarationValueParser.getGlobal(value) ||
 			CSSStyleDeclarationValueParser.getContentMeasurement(value);
 		return parsedValue ? { right: { value: parsedValue, important } } : null;
@@ -256,11 +327,8 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
-		const variable = CSSStyleDeclarationValueParser.getVariable(value);
-		if (variable) {
-			return { bottom: { value: variable, important } };
-		}
 		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
 			CSSStyleDeclarationValueParser.getGlobal(value) ||
 			CSSStyleDeclarationValueParser.getContentMeasurement(value);
 		return parsedValue ? { bottom: { value: parsedValue, important } } : null;
@@ -279,11 +347,8 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
-		const variable = CSSStyleDeclarationValueParser.getVariable(value);
-		if (variable) {
-			return { left: { value: variable, important } };
-		}
 		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
 			CSSStyleDeclarationValueParser.getGlobal(value) ||
 			CSSStyleDeclarationValueParser.getContentMeasurement(value);
 		return parsedValue ? { left: { value: parsedValue, important } } : null;
@@ -398,6 +463,156 @@ export default class CSSStyleDeclarationPropertySetParser {
 		return float ? { 'css-float': float['float'] } : null;
 	}
 
+	/**
+	 * Returns outline.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values.
+	 */
+	public static getOutline(
+		value: string,
+		important: boolean
+	): { [key: string]: ICSSStyleDeclarationPropertyValue } {
+		const variable = CSSStyleDeclarationValueParser.getVariable(value);
+		if (variable) {
+			return { outline: { value: variable, important } };
+		}
+
+		const globalValue = CSSStyleDeclarationValueParser.getGlobal(value);
+
+		if (globalValue) {
+			return {
+				...this.getOutlineColor(globalValue, important),
+				...this.getOutlineStyle(globalValue, important),
+				...this.getOutlineWidth(globalValue, important)
+			};
+		}
+
+		const properties = {
+			...this.getOutlineColor('initial', important),
+			...this.getOutlineStyle('initial', important),
+			...this.getOutlineWidth('initial', important)
+		};
+
+		const parts = value.split(/ +/);
+
+		for (const part of parts) {
+			const width = this.getOutlineWidth(part, important);
+			const style = this.getOutlineStyle(part, important);
+			const color = this.getOutlineColor(part, important);
+
+			if (width === null && style === null && color === null) {
+				return null;
+			}
+
+			Object.assign(properties, width, style, color);
+		}
+
+		return properties;
+	}
+
+	/**
+	 * Returns outline color.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getOutlineColor(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const color =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
+			CSSStyleDeclarationValueParser.getGlobal(value) ||
+			CSSStyleDeclarationValueParser.getColor(value);
+		return color
+			? {
+					'outline-color': { value: color, important }
+			  }
+			: null;
+	}
+
+	/**
+	 * Returns outline offset.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getOutlineOffset(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const parsedValue =
+			CSSStyleDeclarationValueParser.getVariable(value) ||
+			CSSStyleDeclarationValueParser.getLength(value);
+		return parsedValue ? { 'outline-offset': { value: parsedValue, important } } : null;
+	}
+
+	/**
+	 * Returns outline style.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getOutlineStyle(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const variable = CSSStyleDeclarationValueParser.getVariable(value);
+		if (variable) {
+			return { 'outline-style': { value: variable, important } };
+		}
+
+		const lowerValue = value.toLowerCase();
+		if (CSSStyleDeclarationValueParser.getGlobal(lowerValue) || BORDER_STYLE.includes(lowerValue)) {
+			return {
+				'outline-style': { value: lowerValue, important }
+			};
+		}
+		return null;
+	}
+
+	/**
+	 * Returns outline width.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property values
+	 */
+	public static getOutlineWidth(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const variable = CSSStyleDeclarationValueParser.getVariable(value);
+		if (variable) {
+			return { 'outline-width': { value: variable, important } };
+		}
+
+		const lowerValue = value.toLowerCase();
+		const parsedValue =
+			BORDER_WIDTH.includes(lowerValue) || CSSStyleDeclarationValueParser.getGlobal(lowerValue)
+				? lowerValue
+				: CSSStyleDeclarationValueParser.getLength(value);
+		if (parsedValue) {
+			return {
+				'outline-width': { value: parsedValue, important }
+			};
+		}
+		return null;
+	}
+
 	/**
 	 * Returns border.
 	 *

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

@@ -1,7 +1,8 @@
 const COLOR_REGEXP =
 	/^#([0-9a-fA-F]{3,4}){1,2}$|^rgb\(([^)]*)\)$|^rgba\(([^)]*)\)$|^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/;
 
-const LENGTH_REGEXP = /^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch))$/;
+const LENGTH_REGEXP =
+	/^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch|vw|vh|vmin|vmax|Q))$/;
 const PERCENTAGE_REGEXP = /^[-+]?[0-9]*\.?[0-9]+%$/;
 const DEGREE_REGEXP = /^[0-9]+deg$/;
 const URL_REGEXP = /^url\(\s*([^)]*)\s*\)$/;

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

@@ -1,4 +1,4 @@
 export default interface ICSSStyleDeclarationPropertyValue {
-	readonly value: string;
-	readonly important: boolean;
+	value: string;
+	important: boolean;
 }

package/src/match-media/IMediaQueryRange.ts

@@ -0,0 +1,5 @@
+export default interface IMediaQueryRange {
+	before: { value: string; operator: string };
+	type: string;
+	after: { value: string; operator: string };
+}

package/src/match-media/IMediaQueryRule.ts

@@ -0,0 +1,4 @@
+export default interface IMediaQueryRule {
+	name: string;
+	value: string | null;
+}

package/src/match-media/MediaQueryItem.ts

@@ -0,0 +1,336 @@
+import CSSMeasurementConverter from '../css/declaration/measurement-converter/CSSMeasurementConverter';
+import IWindow from '../window/IWindow';
+import IMediaQueryRange from './IMediaQueryRange';
+import IMediaQueryRule from './IMediaQueryRule';
+import MediaQueryTypeEnum from './MediaQueryTypeEnum';
+
+/**
+ * Media query this.
+ */
+export default class MediaQueryItem {
+	public mediaTypes: MediaQueryTypeEnum[];
+	public not: boolean;
+	public rules: IMediaQueryRule[];
+	public ranges: IMediaQueryRange[];
+	private rootFontSize: string | number | null = null;
+	private ownerWindow: IWindow;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param options Options.
+	 * @param options.ownerWindow Owner window.
+	 * @param [options.rootFontSize] Root font size.
+	 * @param [options.mediaTypes] Media types.
+	 * @param [options.not] Not.
+	 * @param [options.rules] Rules.
+	 * @param [options.ranges] Ranges.
+	 */
+	constructor(options: {
+		ownerWindow: IWindow;
+		rootFontSize?: string | number | null;
+		mediaTypes?: MediaQueryTypeEnum[];
+		not?: boolean;
+		rules?: IMediaQueryRule[];
+		ranges?: IMediaQueryRange[];
+	}) {
+		this.ownerWindow = options.ownerWindow;
+		this.rootFontSize = options.rootFontSize || null;
+		this.mediaTypes = options.mediaTypes || [];
+		this.not = options.not || false;
+		this.rules = options.rules || [];
+		this.ranges = options.ranges || [];
+	}
+
+	/**
+	 * Returns media string.
+	 */
+	public toString(): string {
+		return `${this.not ? 'not ' : ''}${this.mediaTypes.join(', ')}${
+			(this.not || this.mediaTypes.length > 0) && !!this.ranges.length ? ' and ' : ''
+		}${this.ranges
+			.map(
+				(range) =>
+					`(${range.before ? `${range.before.value} ${range.before.operator} ` : ''}${range.type}${
+						range.after ? ` ${range.after.operator} ${range.after.value}` : ''
+					})`
+			)
+			.join(' and ')}${
+			(this.not || this.mediaTypes.length > 0) && !!this.rules.length ? ' and ' : ''
+		}${this.rules
+			.map((rule) => (rule.value ? `(${rule.name}: ${rule.value})` : `(${rule.name})`))
+			.join(' and ')}`;
+	}
+
+	/**
+	 * Returns "true" if the item matches.
+	 */
+	public matches(): boolean {
+		return this.not ? !this.matchesAll() : this.matchesAll();
+	}
+
+	/**
+	 * Returns "true" if all matches.
+	 *
+	 * @returns "true" if all matches.
+	 */
+	private matchesAll(): boolean {
+		if (!!this.mediaTypes.length) {
+			let isMediaTypeMatch = false;
+			for (const mediaType of this.mediaTypes) {
+				if (this.matchesMediaType(mediaType)) {
+					isMediaTypeMatch = true;
+					break;
+				}
+			}
+
+			if (!isMediaTypeMatch) {
+				return false;
+			}
+		}
+
+		for (const rule of this.rules) {
+			if (!this.matchesRule(rule)) {
+				return false;
+			}
+		}
+
+		for (const range of this.ranges) {
+			if (!this.matchesRange(range)) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns "true" if the mediaType matches.
+	 *
+	 * @param mediaType Media type.
+	 * @returns "true" if the mediaType matches.
+	 */
+	private matchesMediaType(mediaType: MediaQueryTypeEnum): boolean {
+		if (mediaType === MediaQueryTypeEnum.all) {
+			return true;
+		}
+		return mediaType === this.ownerWindow.happyDOM.settings.device.mediaType;
+	}
+
+	/**
+	 * Returns "true" if the range matches.
+	 *
+	 * @param range Range.
+	 * @returns "true" if the range matches.
+	 */
+	private matchesRange(range: IMediaQueryRange): boolean {
+		const windowSize =
+			range.type === 'width' ? this.ownerWindow.innerWidth : this.ownerWindow.innerHeight;
+
+		if (range.before) {
+			const beforeValue = this.toPixels(range.before.value);
+
+			if (beforeValue === null) {
+				return false;
+			}
+
+			switch (range.before.operator) {
+				case '<':
+					if (beforeValue >= windowSize) {
+						return false;
+					}
+					break;
+				case '<=':
+					if (beforeValue > windowSize) {
+						return false;
+					}
+					break;
+				case '>':
+					if (beforeValue <= windowSize) {
+						return false;
+					}
+					break;
+				case '>=':
+					if (beforeValue < windowSize) {
+						return false;
+					}
+					break;
+			}
+		}
+
+		if (range.after) {
+			const afterValue = this.toPixels(range.after.value);
+
+			if (afterValue === null) {
+				return false;
+			}
+
+			switch (range.after.operator) {
+				case '<':
+					if (windowSize >= afterValue) {
+						return false;
+					}
+					break;
+				case '<=':
+					if (windowSize > afterValue) {
+						return false;
+					}
+					break;
+				case '>':
+					if (windowSize <= afterValue) {
+						return false;
+					}
+					break;
+				case '>=':
+					if (windowSize < afterValue) {
+						return false;
+					}
+					break;
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns "true" if the rule matches.
+	 *
+	 * @param rule Rule.
+	 * @returns "true" if the rule matches.
+	 */
+	private matchesRule(rule: IMediaQueryRule): boolean {
+		if (!rule.value) {
+			switch (rule.name) {
+				case 'min-width':
+				case 'max-width':
+				case 'min-height':
+				case 'max-height':
+				case 'width':
+				case 'height':
+				case 'orientation':
+				case 'prefers-color-scheme':
+				case 'hover':
+				case 'any-hover':
+				case 'any-pointer':
+				case 'pointer':
+				case 'display-mode':
+				case 'min-aspect-ratio':
+				case 'max-aspect-ratio':
+				case 'aspect-ratio':
+					return true;
+			}
+			return false;
+		}
+
+		switch (rule.name) {
+			case 'min-width':
+				const minWidth = this.toPixels(rule.value);
+				return minWidth !== null && this.ownerWindow.innerWidth >= minWidth;
+			case 'max-width':
+				const maxWidth = this.toPixels(rule.value);
+				return maxWidth !== null && this.ownerWindow.innerWidth <= maxWidth;
+			case 'min-height':
+				const minHeight = this.toPixels(rule.value);
+				return minHeight !== null && this.ownerWindow.innerHeight >= minHeight;
+			case 'max-height':
+				const maxHeight = this.toPixels(rule.value);
+				return maxHeight !== null && this.ownerWindow.innerHeight <= maxHeight;
+			case 'width':
+				const width = this.toPixels(rule.value);
+				return width !== null && this.ownerWindow.innerWidth === width;
+			case 'height':
+				const height = this.toPixels(rule.value);
+				return height !== null && this.ownerWindow.innerHeight === height;
+			case 'orientation':
+				return rule.value === 'landscape'
+					? this.ownerWindow.innerWidth > this.ownerWindow.innerHeight
+					: this.ownerWindow.innerWidth < this.ownerWindow.innerHeight;
+			case 'prefers-color-scheme':
+				return rule.value === this.ownerWindow.happyDOM.settings.device.prefersColorScheme;
+			case 'any-hover':
+			case 'hover':
+				if (rule.value === 'none') {
+					return this.ownerWindow.navigator.maxTouchPoints > 0;
+				}
+				if (rule.value === 'hover') {
+					return this.ownerWindow.navigator.maxTouchPoints === 0;
+				}
+				return false;
+			case 'any-pointer':
+			case 'pointer':
+				if (rule.value === 'none') {
+					return false;
+				}
+
+				if (rule.value === 'coarse') {
+					return this.ownerWindow.navigator.maxTouchPoints > 0;
+				}
+
+				if (rule.value === 'fine') {
+					return this.ownerWindow.navigator.maxTouchPoints === 0;
+				}
+
+				return false;
+			case 'display-mode':
+				return rule.value === 'browser';
+			case 'min-aspect-ratio':
+			case 'max-aspect-ratio':
+			case 'aspect-ratio':
+				const aspectRatio = rule.value.split('/');
+				const aspectRatioWidth = parseInt(aspectRatio[0], 10);
+				const aspectRatioHeight = parseInt(aspectRatio[1], 10);
+
+				if (isNaN(aspectRatioWidth) || isNaN(aspectRatioHeight)) {
+					return false;
+				}
+
+				switch (rule.name) {
+					case 'min-aspect-ratio':
+						return (
+							aspectRatioWidth / aspectRatioHeight <=
+							this.ownerWindow.innerWidth / this.ownerWindow.innerHeight
+						);
+					case 'max-aspect-ratio':
+						return (
+							aspectRatioWidth / aspectRatioHeight >=
+							this.ownerWindow.innerWidth / this.ownerWindow.innerHeight
+						);
+					case 'aspect-ratio':
+						return (
+							aspectRatioWidth / aspectRatioHeight ===
+							this.ownerWindow.innerWidth / this.ownerWindow.innerHeight
+						);
+				}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Convert to pixels.
+	 *
+	 * @param value Value.
+	 * @returns Value in pixels.
+	 */
+	private toPixels(value: string): number | null {
+		if (value.endsWith('em')) {
+			this.rootFontSize =
+				this.rootFontSize ||
+				parseFloat(
+					this.ownerWindow.getComputedStyle(this.ownerWindow.document.documentElement).fontSize
+				);
+			return CSSMeasurementConverter.toPixels({
+				ownerWindow: this.ownerWindow,
+				value,
+				rootFontSize: this.rootFontSize,
+				parentFontSize: this.rootFontSize
+			});
+		}
+		return CSSMeasurementConverter.toPixels({
+			ownerWindow: this.ownerWindow,
+			value,
+			rootFontSize: 16,
+			parentFontSize: 16
+		});
+	}
+}