happy-dom 14.3.9 → 14.4.0

package/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts

@@ -132,15 +132,23 @@ export default class CSSStyleDeclarationElementStyle {
 					if (sheet) {
 						this.parseCSSRules({
 							elements: documentElements,
+							rootElement:
+								documentElements[0].element[PropertySymbol.tagName] === 'HTML'
+									? documentElements[0]
+									: null,
 							cssRules: sheet.cssRules
 						});
 					}
 				}
 
-				for (const styleSheet of this.element[PropertySymbol.ownerDocument].adoptedStyleSheets) {
+				for (const sheet of this.element[PropertySymbol.ownerDocument].adoptedStyleSheets) {
 					this.parseCSSRules({
 						elements: documentElements,
-						cssRules: styleSheet.cssRules
+						rootElement:
+							documentElements[0].element[PropertySymbol.tagName] === 'HTML'
+								? documentElements[0]
+								: null,
+						cssRules: sheet.cssRules
 					});
 				}
 
@@ -170,10 +178,10 @@ export default class CSSStyleDeclarationElementStyle {
 					}
 				}
 
-				for (const styleSheet of shadowRoot.adoptedStyleSheets) {
+				for (const sheet of shadowRoot.adoptedStyleSheets) {
 					this.parseCSSRules({
 						elements: shadowRootElements,
-						cssRules: styleSheet.cssRules,
+						cssRules: sheet.cssRules,
 						hostElement: styleAndElement
 					});
 				}
@@ -190,7 +198,7 @@ export default class CSSStyleDeclarationElementStyle {
 		// Concatenates all parent element CSS to one string.
 		const targetElement = parentElements[parentElements.length - 1];
 		const propertyManager = new CSSStyleDeclarationPropertyManager();
-		const cssVariables: { [k: string]: string } = {};
+		const cssProperties: { [k: string]: string } = {};
 		let rootFontSize: string | number = 16;
 		let parentFontSize: string | number = 16;
 
@@ -239,24 +247,27 @@ export default class CSSStyleDeclarationElementStyle {
 			const elementStyleAttribute = (<Element>parentElement.element)[PropertySymbol.attributes][
 				'style'
 			];
+
 			if (elementStyleAttribute) {
 				elementCSSText += elementStyleAttribute[PropertySymbol.value];
 			}
 
-			CSSStyleDeclarationCSSParser.parse(elementCSSText, (name, value, important) => {
-				const isCSSVariable = name.startsWith('--');
+			const rulesAndProperties = CSSStyleDeclarationCSSParser.parse(elementCSSText);
+			const rules = rulesAndProperties.rules;
+
+			Object.assign(cssProperties, rulesAndProperties.properties);
+
+			for (const { name, value, important } of rules) {
 				if (
-					isCSSVariable ||
 					CSSStyleDeclarationElementInheritedProperties[name] ||
 					parentElement === targetElement
 				) {
-					const cssValue = this.parseCSSVariablesInValue(value, cssVariables);
-					if (cssValue && (!propertyManager.get(name)?.important || important)) {
-						propertyManager.set(name, cssValue, important);
+					const parsedValue = this.parseCSSVariablesInValue(value.trim(), cssProperties);
 
-						if (isCSSVariable) {
-							cssVariables[name] = cssValue;
-						} else if (name === 'font' || name === 'font-size') {
+					if (parsedValue && (!propertyManager.get(name)?.important || important)) {
+						propertyManager.set(name, parsedValue, important);
+
+						if (name === 'font' || name === 'font-size') {
 							const fontSize = propertyManager.properties['font-size'];
 							if (fontSize !== null) {
 								const parsedValue = this.parseMeasurementsInValue({
@@ -274,7 +285,7 @@ export default class CSSStyleDeclarationElementStyle {
 						}
 					}
 				}
-			});
+			}
 		}
 
 		for (const name of CSSStyleDeclarationElementMeasurementProperties) {
@@ -302,11 +313,13 @@ export default class CSSStyleDeclarationElementStyle {
 	 * @param options Options.
 	 * @param options.elements Elements.
 	 * @param options.cssRules CSS rules.
+	 * @param options.rootElement Root element.
 	 * @param [options.hostElement] Host element.
 	 */
 	private parseCSSRules(options: {
 		cssRules: CSSRule[];
-		elements: Array<IStyleAndElement>;
+		elements: IStyleAndElement[];
+		rootElement?: IStyleAndElement;
 		hostElement?: IStyleAndElement;
 	}): void {
 		if (!options.elements.length) {
@@ -326,6 +339,13 @@ export default class CSSStyleDeclarationElementStyle {
 								priorityWeight: 0
 							});
 						}
+					} else if (selectorText.startsWith(':root')) {
+						if (options.rootElement) {
+							options.rootElement.cssTexts.push({
+								cssText: (<CSSStyleRule>rule)[PropertySymbol.cssText],
+								priorityWeight: 0
+							});
+						}
 					} else {
 						for (const element of options.elements) {
 							const match = QuerySelector.matches(<Element>element.element, selectorText, {

package/src/css/declaration/property-manager/CSSStyleDeclarationPropertyManager.ts

@@ -30,11 +30,12 @@ export default class CSSStyleDeclarationPropertyManager {
 	 */
 	constructor(options?: { cssText?: string }) {
 		if (options?.cssText) {
-			CSSStyleDeclarationCSSParser.parse(options.cssText, (name, value, important) => {
-				if (important || !this.get(name)?.important) {
-					this.set(name, value, important);
+			const { rules } = CSSStyleDeclarationCSSParser.parse(options.cssText);
+			for (const rule of rules) {
+				if (rule.important || !this.get(rule.name)?.important) {
+					this.set(rule.name, rule.value, rule.important);
 				}
-			});
+			}
 		}
 	}
 

package/src/nodes/html-iframe-element/HTMLIFrameElement.ts

@@ -9,6 +9,7 @@ import HTMLIFrameElementNamedNodeMap from './HTMLIFrameElementNamedNodeMap.js';
 import CrossOriginBrowserWindow from '../../window/CrossOriginBrowserWindow.js';
 import IBrowserFrame from '../../browser/types/IBrowserFrame.js';
 import HTMLIFrameElementPageLoader from './HTMLIFrameElementPageLoader.js';
+import DOMTokenList from '../../dom-token-list/DOMTokenList.js';
 
 /**
  * HTML Iframe Element.
@@ -23,7 +24,7 @@ export default class HTMLIFrameElement extends HTMLElement {
 
 	// Internal properties
 	public override [PropertySymbol.attributes]: NamedNodeMap;
-
+	public [PropertySymbol.sandbox]: DOMTokenList = null;
 	// Private properties
 	#contentWindowContainer: { window: BrowserWindow | CrossOriginBrowserWindow | null } = {
 		window: null
@@ -140,14 +141,15 @@ export default class HTMLIFrameElement extends HTMLElement {
 	 *
 	 * @returns Sandbox.
 	 */
-	public get sandbox(): string {
-		return this.getAttribute('sandbox') || '';
+	public get sandbox(): DOMTokenList {
+		if (!this[PropertySymbol.sandbox]) {
+			this[PropertySymbol.sandbox] = new DOMTokenList(this, 'sandbox');
+		}
+		return <DOMTokenList>this[PropertySymbol.sandbox];
 	}
 
 	/**
 	 * Sets sandbox.
-	 *
-	 * @param sandbox Sandbox.
 	 */
 	public set sandbox(sandbox: string) {
 		this.setAttribute('sandbox', sandbox);
@@ -163,7 +165,7 @@ export default class HTMLIFrameElement extends HTMLElement {
 	}
 
 	/**
-	 * Sets sandbox.
+	 * Sets srcdoc.
 	 *
 	 * @param srcdoc Srcdoc.
 	 */

package/src/nodes/html-iframe-element/HTMLIFrameElementNamedNodeMap.ts

@@ -3,6 +3,23 @@ import Element from '../element/Element.js';
 import HTMLElementNamedNodeMap from '../html-element/HTMLElementNamedNodeMap.js';
 import HTMLIFrameElementPageLoader from './HTMLIFrameElementPageLoader.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
+import DOMTokenList from '../../dom-token-list/DOMTokenList.js';
+
+const SANDBOX_FLAGS = [
+	'allow-downloads',
+	'allow-forms',
+	'allow-modals',
+	'allow-orientation-lock',
+	'allow-pointer-lock',
+	'allow-popups',
+	'allow-popups-to-escape-sandbox',
+	'allow-presentation',
+	'allow-same-origin',
+	'allow-scripts',
+	'allow-top-navigation',
+	'allow-top-navigation-by-user-activation',
+	'allow-top-navigation-to-custom-protocols'
+];
 
 /**
  * Named Node Map.
@@ -37,6 +54,49 @@ export default class HTMLIFrameElementNamedNodeMap extends HTMLElementNamedNodeM
 			this.#pageLoader.loadPage();
 		}
 
+		if (item[PropertySymbol.name] === 'sandbox') {
+			if (!this[PropertySymbol.ownerElement][PropertySymbol.sandbox]) {
+				this[PropertySymbol.ownerElement][PropertySymbol.sandbox] = new DOMTokenList(
+					this[PropertySymbol.ownerElement],
+					'sandbox'
+				);
+			} else {
+				this[PropertySymbol.ownerElement][PropertySymbol.sandbox][PropertySymbol.updateIndices]();
+			}
+
+			this.#validateSandboxFlags();
+		}
+
 		return replacedAttribute || null;
 	}
+
+	/**
+	 *
+	 * @param tokens
+	 * @param vconsole
+	 */
+	#validateSandboxFlags(): void {
+		const window =
+			this[PropertySymbol.ownerElement][PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
+		const values = this[PropertySymbol.ownerElement][PropertySymbol.sandbox].values();
+		const invalidFlags: string[] = [];
+
+		for (const token of values) {
+			if (!SANDBOX_FLAGS.includes(token)) {
+				invalidFlags.push(token);
+			}
+		}
+
+		if (invalidFlags.length === 1) {
+			window.console.error(
+				`Error while parsing the 'sandbox' attribute: '${invalidFlags[0]}' is an invalid sandbox flag.`
+			);
+		} else if (invalidFlags.length > 1) {
+			window.console.error(
+				`Error while parsing the 'sandbox' attribute: '${invalidFlags.join(
+					`', '`
+				)}' are invalid sandbox flags.`
+			);
+		}
+	}
 }

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

@@ -38,6 +38,7 @@ export default class HTMLLinkElementStyleSheetLoader {
 	public async loadStyleSheet(url: string | null, rel: string | null): Promise<void> {
 		const element = this.#element;
 		const browserSettings = this.#browserFrame.page.context.browser.settings;
+		const window = element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
 
 		if (
 			!url ||
@@ -50,10 +51,7 @@ export default class HTMLLinkElementStyleSheetLoader {
 
 		let absoluteURL: string;
 		try {
-			absoluteURL = new URL(
-				url,
-				element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow].location.href
-			).href;
+			absoluteURL = new URL(url, window.location.href).href;
 		} catch (error) {
 			return;
 		}
@@ -79,10 +77,10 @@ export default class HTMLLinkElementStyleSheetLoader {
 
 		const resourceFetch = new ResourceFetch({
 			browserFrame: this.#browserFrame,
-			window: element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow]
+			window: window
 		});
 		const readyStateManager = (<{ [PropertySymbol.readyStateManager]: DocumentReadyStateManager }>(
-			(<unknown>element[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow])
+			(<unknown>window)
 		))[PropertySymbol.readyStateManager];
 
 		this.#loadedStyleSheetURL = absoluteURL;

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

@@ -1,6 +1,7 @@
 import CSSStyleSheet from '../../css/CSSStyleSheet.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import HTMLElement from '../html-element/HTMLElement.js';
+import Node from '../node/Node.js';
 
 /**
  * HTML Style Element.
@@ -17,14 +18,7 @@ export default class HTMLStyleElement extends HTMLElement {
 	 * @returns CSS style sheet.
 	 */
 	public get sheet(): CSSStyleSheet {
-		if (!this[PropertySymbol.isConnected]) {
-			return null;
-		}
-		if (!this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet] = new CSSStyleSheet();
-		}
-		this[PropertySymbol.sheet].replaceSync(this.textContent);
-		return this[PropertySymbol.sheet];
+		return this[PropertySymbol.sheet] ? this[PropertySymbol.sheet] : null;
 	}
 
 	/**
@@ -84,4 +78,51 @@ export default class HTMLStyleElement extends HTMLElement {
 			this.setAttribute('disabled', '');
 		}
 	}
+
+	/**
+	 * @override
+	 */
+	public override appendChild(node: Node): Node {
+		const returnValue = super.appendChild(node);
+		if (this[PropertySymbol.sheet]) {
+			this[PropertySymbol.sheet].replaceSync(this.textContent);
+		}
+		return returnValue;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeChild(node: Node): Node {
+		const returnValue = super.removeChild(node);
+		if (this[PropertySymbol.sheet]) {
+			this[PropertySymbol.sheet].replaceSync(this.textContent);
+		}
+		return returnValue;
+	}
+
+	/**
+	 * @override
+	 */
+	public override insertBefore(newNode: Node, referenceNode: Node | null): Node {
+		const returnValue = super.insertBefore(newNode, referenceNode);
+		if (this[PropertySymbol.sheet]) {
+			this[PropertySymbol.sheet].replaceSync(this.textContent);
+		}
+		return returnValue;
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.connectToNode](parentNode: Node = null): void {
+		super[PropertySymbol.connectToNode](parentNode);
+
+		if (parentNode) {
+			this[PropertySymbol.sheet] = new CSSStyleSheet();
+			this[PropertySymbol.sheet].replaceSync(this.textContent);
+		} else {
+			this[PropertySymbol.sheet] = null;
+		}
+	}
 }