happy-dom 17.0.4 → 17.1.1

package/src/css/utilities/CSSParser.ts

@@ -9,6 +9,7 @@ import CSSContainerRule from '../rules/CSSContainerRule.js';
 import CSSSupportsRule from '../rules/CSSSupportsRule.js';
 import CSSFontFaceRule from '../rules/CSSFontFaceRule.js';
 import SelectorParser from '../../query-selector/SelectorParser.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 const COMMENT_REGEXP = /\/\*[\s\S]*?\*\//gm;
 
@@ -29,7 +30,7 @@ export default class CSSParser {
 		const cssRules = [];
 		const regExp = /{|}/gm;
 		const stack: CSSRule[] = [];
-		let parentRule: CSSRule = null;
+		let parentRule: CSSRule | null = null;
 		let lastIndex = 0;
 		let match: RegExpMatchArray;
 
@@ -37,64 +38,120 @@ export default class CSSParser {
 			if (match[0] === '{') {
 				const selectorText = css.substring(lastIndex, match.index).trim();
 
-				if (
-					selectorText.startsWith('@keyframes') ||
-					selectorText.startsWith('@-webkit-keyframes')
-				) {
-					const newRule = new CSSKeyframesRule(PropertySymbol.illegalConstructor, window);
-
-					(<string>newRule.name) = selectorText.replace(/@(-webkit-){0,1}keyframes +/, '');
-					newRule.parentStyleSheet = parentStyleSheet;
-					cssRules.push(newRule);
-					parentRule = newRule;
-				} else if (selectorText.startsWith('@media')) {
-					const mediums = selectorText.replace('@media', '').split(',');
-					const newRule = new CSSMediaRule(PropertySymbol.illegalConstructor, window);
-
-					for (const medium of mediums) {
-						newRule.media.appendMedium(medium.trim());
+				if (selectorText[0] === '@') {
+					const ruleParts = selectorText.split(' ');
+					const ruleType = ruleParts[0];
+					const ruleParameters = ruleParts.slice(1).join(' ').trim();
+
+					switch (ruleType) {
+						case '@keyframes':
+						case '@-webkit-keyframes':
+							const keyframesRule = new CSSKeyframesRule(PropertySymbol.illegalConstructor, window);
+
+							(<string>keyframesRule.name) = ruleParameters;
+							keyframesRule.parentStyleSheet = parentStyleSheet;
+							if (parentRule) {
+								if (
+									parentRule.type === CSSRuleTypeEnum.mediaRule ||
+									parentRule.type === CSSRuleTypeEnum.containerRule ||
+									parentRule.type === CSSRuleTypeEnum.supportsRule
+								) {
+									(<CSSMediaRule>parentRule).cssRules.push(keyframesRule);
+								}
+							} else {
+								cssRules.push(keyframesRule);
+							}
+							parentRule = keyframesRule;
+							break;
+						case '@media':
+							const mediums = ruleParameters.split(',');
+							const mediaRule = new CSSMediaRule(PropertySymbol.illegalConstructor, window);
+
+							for (const medium of mediums) {
+								mediaRule.media.appendMedium(medium.trim());
+							}
+
+							mediaRule.parentStyleSheet = parentStyleSheet;
+							if (parentRule) {
+								if (
+									parentRule.type === CSSRuleTypeEnum.mediaRule ||
+									parentRule.type === CSSRuleTypeEnum.containerRule ||
+									parentRule.type === CSSRuleTypeEnum.supportsRule
+								) {
+									(<CSSMediaRule>parentRule).cssRules.push(mediaRule);
+								}
+							} else {
+								cssRules.push(mediaRule);
+							}
+							parentRule = mediaRule;
+							break;
+						case '@container':
+						case '@-webkit-container':
+							const containerRule = new CSSContainerRule(PropertySymbol.illegalConstructor, window);
+
+							(<string>containerRule.conditionText) = ruleParameters;
+							containerRule.parentStyleSheet = parentStyleSheet;
+
+							if (parentRule) {
+								if (
+									parentRule.type === CSSRuleTypeEnum.mediaRule ||
+									parentRule.type === CSSRuleTypeEnum.containerRule ||
+									parentRule.type === CSSRuleTypeEnum.supportsRule
+								) {
+									(<CSSMediaRule>parentRule).cssRules.push(containerRule);
+								}
+							} else {
+								cssRules.push(containerRule);
+							}
+
+							parentRule = containerRule;
+							break;
+						case '@supports':
+						case '@-webkit-supports':
+							const supportsRule = new CSSSupportsRule(PropertySymbol.illegalConstructor, window);
+
+							(<string>supportsRule.conditionText) = ruleParameters;
+							supportsRule.parentStyleSheet = parentStyleSheet;
+							if (parentRule) {
+								if (
+									parentRule.type === CSSRuleTypeEnum.mediaRule ||
+									parentRule.type === CSSRuleTypeEnum.containerRule ||
+									parentRule.type === CSSRuleTypeEnum.supportsRule
+								) {
+									(<CSSMediaRule>parentRule).cssRules.push(supportsRule);
+								}
+							} else {
+								cssRules.push(supportsRule);
+							}
+							parentRule = supportsRule;
+							break;
+						case '@font-face':
+							const fontFaceRule = new CSSFontFaceRule(PropertySymbol.illegalConstructor, window);
+
+							fontFaceRule[PropertySymbol.cssText] = ruleParameters;
+							fontFaceRule.parentStyleSheet = parentStyleSheet;
+							if (parentRule) {
+								if (
+									parentRule.type === CSSRuleTypeEnum.mediaRule ||
+									parentRule.type === CSSRuleTypeEnum.containerRule ||
+									parentRule.type === CSSRuleTypeEnum.supportsRule
+								) {
+									(<CSSMediaRule>parentRule).cssRules.push(fontFaceRule);
+								}
+							} else {
+								cssRules.push(fontFaceRule);
+							}
+							parentRule = fontFaceRule;
+							break;
+						default:
+							// Unknown rule.
+							// We will create a new rule to let it grab its content, but we will not add it to the cssRules array.
+							const newRule = new CSSRule(PropertySymbol.illegalConstructor, window);
+							newRule.parentStyleSheet = parentStyleSheet;
+							parentRule = newRule;
+							break;
 					}
-
-					newRule.parentStyleSheet = parentStyleSheet;
-					cssRules.push(newRule);
-					parentRule = newRule;
-				} else if (
-					selectorText.startsWith('@container') ||
-					selectorText.startsWith('@-webkit-container')
-				) {
-					const conditionText = selectorText.replace(/@(-webkit-){0,1}container +/, '');
-					const newRule = new CSSContainerRule(PropertySymbol.illegalConstructor, window);
-
-					(<string>newRule.conditionText) = conditionText;
-					newRule.parentStyleSheet = parentStyleSheet;
-					cssRules.push(newRule);
-					parentRule = newRule;
-				} else if (
-					selectorText.startsWith('@supports') ||
-					selectorText.startsWith('@-webkit-supports')
-				) {
-					const conditionText = selectorText.replace(/@(-webkit-){0,1}supports +/, '');
-					const newRule = new CSSSupportsRule(PropertySymbol.illegalConstructor, window);
-
-					(<string>newRule.conditionText) = conditionText;
-					newRule.parentStyleSheet = parentStyleSheet;
-					cssRules.push(newRule);
-					parentRule = newRule;
-				} else if (selectorText.startsWith('@font-face')) {
-					const conditionText = selectorText.replace('@font-face', '');
-					const newRule = new CSSFontFaceRule(PropertySymbol.illegalConstructor, window);
-
-					newRule[PropertySymbol.cssText] = conditionText;
-					newRule.parentStyleSheet = parentStyleSheet;
-					cssRules.push(newRule);
-					parentRule = newRule;
-				} else if (selectorText[0] === '@') {
-					// Unknown rule.
-					// We will create a new rule to let it grab its content, but we will not add it to the cssRules array.
-					const newRule = new CSSRule(PropertySymbol.illegalConstructor, window);
-					newRule.parentStyleSheet = parentStyleSheet;
-					parentRule = newRule;
-				} else if (parentRule && parentRule.type === CSSRule.KEYFRAMES_RULE) {
+				} else if (parentRule && parentRule.type === CSSRuleTypeEnum.keyframesRule) {
 					const newRule = new CSSKeyframeRule(PropertySymbol.illegalConstructor, window);
 					(<string>newRule.keyText) = selectorText.trim();
 					newRule.parentStyleSheet = parentStyleSheet;
@@ -104,9 +161,9 @@ export default class CSSParser {
 					parentRule = newRule;
 				} else if (
 					parentRule &&
-					(parentRule.type === CSSRule.MEDIA_RULE ||
-						parentRule.type === CSSRule.CONTAINER_RULE ||
-						parentRule.type === CSSRule.SUPPORTS_RULE)
+					(parentRule.type === CSSRuleTypeEnum.mediaRule ||
+						parentRule.type === CSSRuleTypeEnum.containerRule ||
+						parentRule.type === CSSRuleTypeEnum.supportsRule)
 				) {
 					if (this.validateSelectorText(selectorText)) {
 						const newRule = new CSSStyleRule(PropertySymbol.illegalConstructor, window);
@@ -139,9 +196,9 @@ export default class CSSParser {
 						.trim()
 						.replace(/([^;])$/, '$1;'); // Ensure last semicolon
 					switch (parentRule.type) {
-						case CSSRule.FONT_FACE_RULE:
-						case CSSRule.KEYFRAME_RULE:
-						case CSSRule.STYLE_RULE:
+						case CSSRuleTypeEnum.fontFaceRule:
+						case CSSRuleTypeEnum.keyframeRule:
+						case CSSRuleTypeEnum.styleRule:
 							(<CSSStyleRule>parentRule)[PropertySymbol.cssText] = cssText;
 							break;
 					}

package/src/match-media/MediaQueryItem.ts

@@ -199,6 +199,12 @@ export default class MediaQueryItem {
 	 * @returns "true" if the rule matches.
 	 */
 	private matchesRule(rule: IMediaQueryRule): boolean {
+		const settings = new WindowBrowserContext(this.window).getSettings();
+
+		if (!settings) {
+			return false;
+		}
+
 		if (!rule.value) {
 			switch (rule.name) {
 				case 'min-width':
@@ -218,6 +224,10 @@ export default class MediaQueryItem {
 				case 'max-aspect-ratio':
 				case 'aspect-ratio':
 					return true;
+				case 'prefers-reduced-motion':
+					return settings.device.prefersReducedMotion === 'reduce';
+				case 'forced-colors':
+					return settings.device.forcedColors === 'active';
 			}
 			return false;
 		}
@@ -246,9 +256,13 @@ export default class MediaQueryItem {
 					? this.window.innerWidth > this.window.innerHeight
 					: this.window.innerWidth < this.window.innerHeight;
 			case 'prefers-color-scheme':
+				return rule.value === settings.device.prefersColorScheme;
+			case 'prefers-reduced-motion':
+				return rule.value === settings.device.prefersReducedMotion;
+			case 'forced-colors':
 				return (
-					rule.value ===
-					new WindowBrowserContext(this.window).getSettings().device.prefersColorScheme
+					(rule.value === 'none' || rule.value === 'active') &&
+					rule.value === settings.device.forcedColors
 				);
 			case 'any-hover':
 			case 'hover':

package/src/nodes/html-link-element/HTMLLinkElement.ts

@@ -455,7 +455,9 @@ export default class HTMLLinkElement extends HTMLElement {
 			browserFrame.page?.console.error(error);
 			this.dispatchEvent(new Event('error'));
 		} else {
-			const styleSheet = new CSSStyleSheet();
+			const styleSheet = new this[PropertySymbol.ownerDocument][
+				PropertySymbol.window
+			].CSSStyleSheet();
 			styleSheet.replaceSync(code);
 			this[PropertySymbol.sheet] = styleSheet;
 

package/src/nodes/html-style-element/HTMLStyleElement.ts

@@ -79,7 +79,9 @@ export default class HTMLStyleElement extends HTMLElement {
 			return null;
 		}
 		if (!this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet] = new CSSStyleSheet();
+			this[PropertySymbol.sheet] = new this[PropertySymbol.ownerDocument][
+				PropertySymbol.window
+			].CSSStyleSheet();
 			this[PropertySymbol.sheet].replaceSync(this.textContent);
 		}
 		return this[PropertySymbol.sheet];

package/src/nodes/svg-style-element/SVGStyleElement.ts

@@ -97,7 +97,9 @@ export default class SVGStyleElement extends SVGElement {
 			return null;
 		}
 		if (!this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet] = new CSSStyleSheet();
+			this[PropertySymbol.sheet] = new this[PropertySymbol.ownerDocument][
+				PropertySymbol.window
+			].CSSStyleSheet();
 			this[PropertySymbol.sheet].replaceSync(this.textContent);
 		}
 		return this[PropertySymbol.sheet];