happy-dom 17.1.0 → 17.1.2

package/src/css/CSSStyleSheet.ts

@@ -57,18 +57,17 @@ export default class CSSStyleSheet {
 	 * @returns The newly inserterted rule's index.
 	 */
 	public insertRule(rule: string, index?: number): number {
-		const rules = CSSParser.parseFromString(this, rule);
-
-		if (rules.length === 0) {
-			throw new this[PropertySymbol.window].DOMException(
-				'Invalid CSS rule.',
-				DOMExceptionNameEnum.hierarchyRequestError
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'insertRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
 			);
 		}
 
-		if (rules.length > 1) {
+		const rules = CSSParser.parseFromString(this, rule);
+
+		if (rules.length === 0 || rules.length > 1) {
 			throw new this[PropertySymbol.window].DOMException(
-				'Only one rule is allowed to be added.',
+				`Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '${rule}'.`,
 				DOMExceptionNameEnum.syntaxError
 			);
 		}
@@ -76,7 +75,9 @@ export default class CSSStyleSheet {
 		if (index !== undefined) {
 			if (index > this.cssRules.length) {
 				throw new this[PropertySymbol.window].DOMException(
-					'Index is more than the length of CSSRuleList.',
+					`Failed to execute 'insertRule' on 'CSSStyleSheet': The index provided (${index}) is larger than the maximum index (${
+						this.cssRules.length - 1
+					}).`,
 					DOMExceptionNameEnum.indexSizeError
 				);
 			}
@@ -98,7 +99,12 @@ export default class CSSStyleSheet {
 	 * @param index Index.
 	 */
 	public deleteRule(index: number): void {
-		delete this.cssRules[index];
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'deleteRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
+			);
+		}
+		this.cssRules.splice(index, 1);
 	}
 
 	/**
@@ -109,6 +115,11 @@ export default class CSSStyleSheet {
 	 * @returns Promise.
 	 */
 	public async replace(text: string): Promise<void> {
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'replace' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
+			);
+		}
 		this.replaceSync(text);
 	}
 
@@ -119,6 +130,11 @@ export default class CSSStyleSheet {
 	 * @param text CSS text.
 	 */
 	public replaceSync(text: string): void {
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'replaceSync' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
+			);
+		}
 		if (this.#currentText !== text) {
 			this.#currentText = text;
 			(<CSSRule[]>this.cssRules) = CSSParser.parseFromString(this, text);

package/src/css/rules/CSSContainerRule.ts

@@ -1,10 +1,11 @@
 import CSSRule from '../CSSRule.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSContainerRule extends CSSRule {
-	public readonly type = CSSRule.CONTAINER_RULE;
+	public readonly type = CSSRuleTypeEnum.containerRule;
 	public readonly cssRules: CSSRule[] = [];
 	public readonly conditionText = '';
 

package/src/css/rules/CSSFontFaceRule.ts

@@ -1,12 +1,13 @@
 import CSSRule from '../CSSRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSFontFaceRule extends CSSRule {
-	public readonly type = CSSRule.FONT_FACE_RULE;
+	public readonly type = CSSRuleTypeEnum.fontFaceRule;
 	public [PropertySymbol.cssText] = '';
 	#style: CSSStyleDeclaration | null = null;
 

package/src/css/rules/CSSKeyframeRule.ts

@@ -1,12 +1,13 @@
 import CSSRule from '../CSSRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSKeyframeRule extends CSSRule {
-	public readonly type = CSSRule.KEYFRAME_RULE;
+	public readonly type = CSSRuleTypeEnum.keyframeRule;
 	public readonly keyText: string;
 	public [PropertySymbol.cssText] = '';
 	#style: CSSStyleDeclaration | null = null;

package/src/css/rules/CSSKeyframesRule.ts

@@ -2,6 +2,7 @@ import CSSRule from '../CSSRule.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
 import CSSKeyframeRule from './CSSKeyframeRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 const CSS_RULE_REGEXP = /([^{]+){([^}]+)}/;
 
@@ -9,7 +10,7 @@ const CSS_RULE_REGEXP = /([^{]+){([^}]+)}/;
  * CSSRule interface.
  */
 export default class CSSKeyframesRule extends CSSRule {
-	public readonly type = CSSRule.KEYFRAMES_RULE;
+	public readonly type = CSSRuleTypeEnum.keyframesRule;
 	public readonly cssRules: CSSKeyframeRule[] = [];
 	public readonly name: string = null;
 

package/src/css/rules/CSSMediaRule.ts

@@ -1,11 +1,12 @@
 import CSSRule from '../CSSRule.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 import MediaList from '../MediaList.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSMediaRule extends CSSRule {
-	public readonly type = CSSRule.MEDIA_RULE;
+	public readonly type = CSSRuleTypeEnum.mediaRule;
 	public readonly cssRules: CSSRule[] = [];
 	public readonly media = new MediaList();
 

package/src/css/rules/CSSStyleRule.ts

@@ -1,12 +1,13 @@
 import CSSRule from '../CSSRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSStyleRule extends CSSRule {
-	public readonly type = CSSRule.STYLE_RULE;
+	public readonly type = CSSRuleTypeEnum.styleRule;
 	public readonly styleMap = new Map();
 	public selectorText = '';
 	public [PropertySymbol.cssText] = '';

package/src/css/rules/CSSSupportsRule.ts

@@ -1,10 +1,11 @@
 import CSSRule from '../CSSRule.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSSupportsRule extends CSSRule {
-	public readonly type = CSSRule.SUPPORTS_RULE;
+	public readonly type = CSSRuleTypeEnum.supportsRule;
 	public readonly cssRules: CSSRule[] = [];
 	public readonly conditionText = '';
 

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/fetch/AbortController.ts

@@ -19,7 +19,7 @@ export default class AbortController {
 	 *
 	 * @param [reason] Reason.
 	 */
-	public abort(reason?: Error): void {
+	public abort(reason?: any): void {
 		this.signal[PropertySymbol.abort](reason);
 	}
 }

package/src/fetch/AbortSignal.ts

@@ -14,9 +14,9 @@ export default class AbortSignal extends EventTarget {
 	protected declare static [PropertySymbol.window]: BrowserWindow;
 	protected declare [PropertySymbol.window]: BrowserWindow;
 
-	// Public properties
-	public readonly aborted: boolean = false;
-	public readonly reason: Error | null = null;
+	// Internal properties
+	public [PropertySymbol.aborted]: boolean = false;
+	public [PropertySymbol.reason]: any = undefined;
 
 	// Events
 	public onabort: ((this: AbortSignal, event: Event) => void) | null = null;
@@ -28,9 +28,7 @@ export default class AbortSignal extends EventTarget {
 		super();
 
 		if (!this[PropertySymbol.window]) {
-			throw new TypeError(
-				`Failed to construct '${this.constructor.name}': '${this.constructor.name}' was constructed outside a Window context.`
-			);
+			throw new TypeError(`Failed to construct 'AbortSignal': Illegal constructor`);
 		}
 	}
 
@@ -41,22 +39,59 @@ export default class AbortSignal extends EventTarget {
 		return 'AbortSignal';
 	}
 
+	/**
+	 * Returns true if the signal has been aborted.
+	 *
+	 * @returns True if the signal has been aborted.
+	 */
+	public get aborted(): boolean {
+		return this[PropertySymbol.aborted];
+	}
+
+	/**
+	 * Setter for aborted. Value will be ignored as the property is read-only.
+	 *
+	 * @param _value Aborted.
+	 */
+	public set aborted(_value: boolean) {
+		// Do nothing
+	}
+
+	/**
+	 * Returns the reason the signal was aborted.
+	 *
+	 * @returns Reason.
+	 */
+	public get reason(): any {
+		return this[PropertySymbol.reason];
+	}
+
+	/**
+	 * Setter for reason. Value will be ignored as the property is read-only.
+	 *
+	 * @param _value Reason.
+	 */
+	public set reason(_value: any) {
+		// Do nothing
+	}
+
 	/**
 	 * Aborts the signal.
 	 *
 	 * @param [reason] Reason.
 	 */
-	public [PropertySymbol.abort](reason?: Error): void {
+	public [PropertySymbol.abort](reason?: any): void {
 		if (this.aborted) {
 			return;
 		}
-		(<Error>this.reason) =
-			reason ||
-			new this[PropertySymbol.window].DOMException(
-				'signal is aborted without reason',
-				DOMExceptionNameEnum.abortError
-			);
-		(<boolean>this.aborted) = true;
+		this[PropertySymbol.reason] =
+			reason !== undefined
+				? reason
+				: new this[PropertySymbol.window].DOMException(
+						'signal is aborted without reason',
+						DOMExceptionNameEnum.abortError
+					);
+		this[PropertySymbol.aborted] = true;
 		this.dispatchEvent(new Event('abort'));
 	}
 
@@ -75,15 +110,16 @@ export default class AbortSignal extends EventTarget {
 	 * @param [reason] Reason.
 	 * @returns AbortSignal instance.
 	 */
-	public static abort(reason?: Error): AbortSignal {
+	public static abort(reason?: any): AbortSignal {
 		const signal = new this();
-		(<Error>signal.reason) =
-			reason ||
-			new this[PropertySymbol.window].DOMException(
-				'signal is aborted without reason',
-				DOMExceptionNameEnum.abortError
-			);
-		(<boolean>signal.aborted) = true;
+		signal[PropertySymbol.reason] =
+			reason !== undefined
+				? reason
+				: new this[PropertySymbol.window].DOMException(
+						'signal is aborted without reason',
+						DOMExceptionNameEnum.abortError
+					);
+		signal[PropertySymbol.aborted] = true;
 		return signal;
 	}
 
@@ -118,8 +154,8 @@ export default class AbortSignal extends EventTarget {
 	 */
 	public static any(signals: AbortSignal[]): AbortSignal {
 		for (const signal of signals) {
-			if (signal.aborted) {
-				return this.abort(signal.reason);
+			if (signal[PropertySymbol.aborted]) {
+				return this.abort(signal[PropertySymbol.reason]);
 			}
 		}
 
@@ -135,7 +171,7 @@ export default class AbortSignal extends EventTarget {
 		for (const signal of signals) {
 			const handler = (): void => {
 				stopListening();
-				anySignal[PropertySymbol.abort](signal.reason);
+				anySignal[PropertySymbol.abort](signal[PropertySymbol.reason]);
 			};
 			handlers.set(signal, handler);
 			signal.addEventListener('abort', handler);

package/src/fetch/Fetch.ts

@@ -134,9 +134,12 @@ export default class Fetch {
 
 		FetchRequestValidationUtility.validateSchema(this.request);
 
-		if (this.request.signal.aborted) {
-			throw new this.#window.DOMException(
-				'The operation was aborted.',
+		if (this.request.signal[PropertySymbol.aborted]) {
+			if (this.request.signal[PropertySymbol.reason] !== undefined) {
+				throw this.request.signal[PropertySymbol.reason];
+			}
+			throw new this[PropertySymbol.window].DOMException(
+				'signal is aborted without reason',
 				DOMExceptionNameEnum.abortError
 			);
 		}
@@ -947,8 +950,8 @@ export default class Fetch {
 					headers.delete('cookie2');
 				}
 
-				if (this.request.signal.aborted) {
-					this.abort();
+				if (this.request.signal[PropertySymbol.aborted]) {
+					this.abort(this.request.signal[PropertySymbol.reason]);
 					return true;
 				}
 
@@ -1006,7 +1009,7 @@ export default class Fetch {
 	 *
 	 * @param reason Reason.
 	 */
-	private abort(reason?: Error): void {
+	private abort(reason?: any): void {
 		const error = new this.#window.DOMException(
 			'The operation was aborted.' + (reason ? ' ' + reason.toString() : ''),
 			DOMExceptionNameEnum.abortError
@@ -1034,7 +1037,7 @@ export default class Fetch {
 		}
 
 		if (this.reject) {
-			this.reject(error);
+			this.reject(reason !== undefined ? reason : error);
 		}
 	}
 }

package/src/fetch/SyncFetch.ts

@@ -113,9 +113,12 @@ export default class SyncFetch {
 
 		FetchRequestValidationUtility.validateSchema(this.request);
 
-		if (this.request.signal.aborted) {
-			throw new this.#window.DOMException(
-				'The operation was aborted.',
+		if (this.request.signal[PropertySymbol.aborted]) {
+			if (this.request.signal[PropertySymbol.reason] !== undefined) {
+				throw this.request.signal[PropertySymbol.reason];
+			}
+			throw new this[PropertySymbol.window].DOMException(
+				'signal is aborted without reason',
 				DOMExceptionNameEnum.abortError
 			);
 		}

package/src/match-media/MediaQueryItem.ts

@@ -226,6 +226,8 @@ export default class MediaQueryItem {
 					return true;
 				case 'prefers-reduced-motion':
 					return settings.device.prefersReducedMotion === 'reduce';
+				case 'forced-colors':
+					return settings.device.forcedColors === 'active';
 			}
 			return false;
 		}
@@ -257,6 +259,11 @@ export default class MediaQueryItem {
 				return rule.value === settings.device.prefersColorScheme;
 			case 'prefers-reduced-motion':
 				return rule.value === settings.device.prefersReducedMotion;
+			case 'forced-colors':
+				return (
+					(rule.value === 'none' || rule.value === 'active') &&
+					rule.value === settings.device.forcedColors
+				);
 			case 'any-hover':
 			case 'hover':
 				if (rule.value === 'none') {

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];