buninu-browser 0.0.2

package/vendor/happy-dom/packages/happy-dom/src/css/declaration/computed-style/CSSComputedStyle.ts

@@ -0,0 +1,502 @@
+import type ShadowRoot from '../../../nodes/shadow-root/ShadowRoot.js';
+import * as PropertySymbol from '../../../PropertySymbol.js';
+import type Element from '../../../nodes/element/Element.js';
+import type Document from '../../../nodes/document/Document.js';
+import type HTMLStyleElement from '../../../nodes/html-style-element/HTMLStyleElement.js';
+import type NodeList from '../../../nodes/node/NodeList.js';
+import CSSPropertyManager from '../property-manager/CSSPropertyManager.js';
+import NodeTypeEnum from '../../../nodes/node/NodeTypeEnum.js';
+import CSSRuleTypeEnum from '../../CSSRuleTypeEnum.js';
+import type CSSMediaRule from '../../rules/CSSMediaRule.js';
+import type CSSRule from '../../CSSRule.js';
+import type CSSStyleRule from '../../rules/CSSStyleRule.js';
+import CSSComputedStyleElementDefault from './config/CSSComputedStyleElementDefault.js';
+import CSSComputedStyleInheritedProperties from './config/CSSComputedStyleInheritedProperties.js';
+import CSSComputedStyleMeasurementProperties from './config/CSSComputedStyleMeasurementProperties.js';
+import CSSTextParser from '../utilities/CSSTextParser.js';
+import QuerySelector from '../../../query-selector/QuerySelector.js';
+import CSSMeasurementConverter from '../utilities/CSSMeasurementConverter.js';
+import MediaQueryList from '../../../match-media/MediaQueryList.js';
+import WindowBrowserContext from '../../../window/WindowBrowserContext.js';
+import type CSSSupportsRule from '../../rules/CSSSupportsRule.js';
+import CSSScopeRule from '../../rules/CSSScopeRule.js';
+import type CSSStyleSheet from '../../CSSStyleSheet.js';
+import CSSVariableFormatter from '../property-manager/utilities/CSSVariableFormatter.js';
+import type HTMLElement from '../../../nodes/html-element/HTMLElement.js';
+import type Node from '../../../nodes/node/Node.js';
+
+const CSS_MEASUREMENT_REGEXP = /[0-9.]+(px|rem|em|vw|vh|%|vmin|vmax|cm|mm|in|pt|pc|Q)/g;
+
+type IStyleAndElement = {
+	element: Element | ShadowRoot | Document | null;
+	cssTexts: Array<{ cssText: string; priorityWeight: number }>;
+	propertyManager: CSSPropertyManager | null;
+};
+
+/**
+ * CSS Style Declaration utility
+ */
+export default class CSSComputedStyle {
+	private element: Element;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param element Element.
+	 * @param [computed] Computed.
+	 */
+	constructor(element: Element) {
+		this.element = element;
+	}
+
+	/**
+	 * Returns style sheets.
+	 *
+	 * @param element Element.
+	 * @returns Style sheets.
+	 */
+	public getComputedStyle(): CSSPropertyManager {
+		const documentElements: Array<IStyleAndElement> = [];
+		const allDocumentElements: Array<IStyleAndElement> = [];
+		const parentElements: Array<IStyleAndElement> = [];
+		let styleAndElement: IStyleAndElement = {
+			element: <Element | ShadowRoot | Document>this.element,
+			cssTexts: [],
+			propertyManager: null
+		};
+		const processedCustomElements: Array<IStyleAndElement> = [];
+		let shadowRootElements: Array<IStyleAndElement> = [];
+		let allShadowRootElements: Array<IStyleAndElement> = [];
+
+		if (!this.element[PropertySymbol.isConnected]) {
+			return new CSSPropertyManager();
+		}
+
+		const cacheResult = this.getCachedPropertyManager(this.element);
+
+		if (cacheResult) {
+			return cacheResult;
+		}
+
+		const settings = new WindowBrowserContext(this.element[PropertySymbol.window]).getSettings();
+
+		// Walks through all parent elements and stores them in an array with element and matching CSS text.
+		while (styleAndElement.element) {
+			if (styleAndElement.element[PropertySymbol.nodeType] === NodeTypeEnum.elementNode) {
+				const rootNode = styleAndElement.element.getRootNode();
+				if (rootNode[PropertySymbol.nodeType] === NodeTypeEnum.documentNode) {
+					if (!styleAndElement.propertyManager) {
+						documentElements.unshift(styleAndElement);
+					}
+					allDocumentElements.unshift(styleAndElement);
+				} else {
+					if (!styleAndElement.propertyManager) {
+						shadowRootElements.unshift(styleAndElement);
+					}
+					allShadowRootElements.unshift(styleAndElement);
+				}
+				parentElements.unshift(styleAndElement);
+			}
+
+			if (styleAndElement.element === this.element[PropertySymbol.ownerDocument]) {
+				if (documentElements.length > 0) {
+					const styleSheets = this.getStyleSheets(this.element[PropertySymbol.ownerDocument]);
+
+					for (const styleSheet of styleSheets) {
+						this.parseCSSRules({
+							elements: documentElements,
+							scopeElements: allDocumentElements,
+							cssRules: styleSheet.cssRules
+						});
+					}
+				}
+				styleAndElement = { element: null, cssTexts: [], propertyManager: null };
+			} else if (
+				styleAndElement.element[PropertySymbol.nodeType] === NodeTypeEnum.documentFragmentNode &&
+				(<ShadowRoot>styleAndElement.element).host
+			) {
+				const shadowRoot = <ShadowRoot>styleAndElement.element;
+
+				styleAndElement = {
+					element: <Element>shadowRoot.host,
+					cssTexts: [],
+					propertyManager: this.getCachedPropertyManager(shadowRoot.host)
+				};
+
+				processedCustomElements.push(styleAndElement);
+				shadowRootElements.unshift(styleAndElement);
+				allShadowRootElements.unshift(styleAndElement);
+
+				const styleSheets = this.getStyleSheets(shadowRoot);
+				for (const styleSheet of styleSheets) {
+					this.parseCSSRules({
+						elements: shadowRootElements,
+						scopeElements: allShadowRootElements,
+						cssRules: styleSheet.cssRules
+					});
+				}
+
+				shadowRootElements = [];
+				allShadowRootElements = [];
+			} else {
+				// We need to process any ":host" or ":host-context" selectors within the shadow DOM.
+				// We can skip this if the element has already been processed as a custom element before
+				if (
+					styleAndElement.element[PropertySymbol.nodeType] === NodeTypeEnum.elementNode &&
+					(<HTMLElement>styleAndElement.element).shadowRoot &&
+					!processedCustomElements.includes(styleAndElement)
+				) {
+					const shadowRoot = (<HTMLElement>styleAndElement.element).shadowRoot!;
+					if (!styleAndElement.propertyManager) {
+						const styleSheets = this.getStyleSheets(shadowRoot);
+
+						for (const styleSheet of styleSheets) {
+							this.parseCSSRules({
+								elements: [styleAndElement],
+								cssRules: styleSheet.cssRules
+							});
+						}
+					}
+				}
+				styleAndElement = {
+					element: <Element>styleAndElement.element[PropertySymbol.parentNode],
+					cssTexts: [],
+					propertyManager: this.getCachedPropertyManager(
+						styleAndElement.element[PropertySymbol.parentNode]
+					)
+				};
+			}
+		}
+
+		// Concatenates all parent element CSS to one string.
+		const inheritedPropertyManager = new CSSPropertyManager();
+		let propertyManager = parentElements[0].propertyManager ?? new CSSPropertyManager();
+		const cssVariables: { [k: string]: string } = {};
+		let rootFontSize: string | number = 16;
+		let parentFontSize: string | number = 16;
+
+		for (let i = 0, max = parentElements.length; i < max; i++) {
+			const parentElement = parentElements[i];
+			if (parentElement.propertyManager) {
+				if (parentElement.element === this.element) {
+					return parentElement.propertyManager;
+				}
+				for (const name of Object.keys(parentElement.propertyManager.properties)) {
+					if ((<any>CSSComputedStyleInheritedProperties)[name]) {
+						inheritedPropertyManager.set(
+							name,
+							parentElement.propertyManager.get(name)!.value,
+							parentElement.propertyManager.get(name)!.important
+						);
+					}
+				}
+				Object.assign(cssVariables, parentElement.propertyManager.getVariables());
+				propertyManager = inheritedPropertyManager.clone();
+			} else {
+				parentElement.cssTexts.sort((a, b) => a.priorityWeight - b.priorityWeight);
+
+				const defaultCSS = (<any>CSSComputedStyleElementDefault)[
+					(<Element>parentElement.element)[PropertySymbol.tagName]!
+				];
+				let elementCSSText = '';
+
+				if (defaultCSS) {
+					if (typeof defaultCSS === 'string') {
+						elementCSSText += defaultCSS;
+					} else {
+						for (const key of Object.keys(defaultCSS)) {
+							if (key === 'default' || !!(<any>parentElement.element)[key]) {
+								elementCSSText += defaultCSS[key];
+							}
+						}
+					}
+				}
+
+				for (const cssText of parentElement.cssTexts) {
+					elementCSSText += cssText.cssText;
+				}
+
+				const elementStyleAttribute = (<Element>parentElement.element).getAttribute('style');
+
+				if (elementStyleAttribute) {
+					elementCSSText += elementStyleAttribute;
+				}
+
+				const rulesAndVariables = CSSTextParser.parse(elementCSSText);
+				const rules = rulesAndVariables.rules;
+
+				Object.assign(cssVariables, rulesAndVariables.variables);
+
+				for (const { name, value, important } of rules) {
+					const parsedValue = CSSVariableFormatter.resolveVariables(value.trim(), cssVariables);
+
+					if (
+						parsedValue &&
+						parsedValue !== 'inherit' &&
+						(!propertyManager.get(name)?.important || important)
+					) {
+						const affectedKeys = propertyManager.set(name, parsedValue, important);
+
+						if ((<any>CSSComputedStyleInheritedProperties)[name]) {
+							inheritedPropertyManager.set(name, parsedValue, important);
+						}
+
+						if (!settings?.disableComputedStyleRendering) {
+							if (affectedKeys.includes('font-size')) {
+								const fontSize = propertyManager.properties['font-size'];
+								const parsedValue = this.parseMeasurementsInValue({
+									value: fontSize.value,
+									rootFontSize,
+									parentFontSize,
+									parentSize: parentFontSize
+								});
+								if ((<Element>parentElement.element)[PropertySymbol.tagName] === 'HTML') {
+									rootFontSize = parsedValue;
+								} else {
+									parentFontSize = parsedValue;
+								}
+							}
+							for (const key of affectedKeys) {
+								if ((<any>CSSComputedStyleMeasurementProperties)[key]) {
+									const property = propertyManager.properties[key];
+									if (property) {
+										property.value = this.parseMeasurementsInValue({
+											value: property.value,
+											rootFontSize,
+											parentFontSize,
+
+											// TODO: Only "font-size" is supported when using percentage values. Add support for other properties.
+											parentSize: key === 'font-size' ? parentFontSize : null
+										});
+									}
+								}
+							}
+						}
+					}
+				}
+
+				const cachedResult = {
+					result: new WeakRef(propertyManager)
+				};
+				parentElement.element![PropertySymbol.cache].computedStyle = cachedResult;
+				parentElement.element![PropertySymbol.ownerDocument][
+					PropertySymbol.affectsComputedStyleCache
+				].push(cachedResult);
+
+				// All parents of current element affects cache
+				for (let a = 0; a < i; a++) {
+					const previousParent = parentElements[a];
+					previousParent.element![PropertySymbol.affectsCache].push(cachedResult);
+					if ((<Element>previousParent.element)?.shadowRoot) {
+						(<Element>previousParent!.element).shadowRoot![PropertySymbol.affectsCache].push(
+							cachedResult
+						);
+					}
+				}
+
+				if (parentElement.element === this.element) {
+					return propertyManager;
+				}
+			}
+
+			propertyManager = inheritedPropertyManager.clone();
+		}
+
+		return propertyManager;
+	}
+
+	/**
+	 * Returns style sheets.
+	 *
+	 * @param root Root element.
+	 * @returns Style sheets.
+	 */
+	private getStyleSheets(root: Document | ShadowRoot | null): CSSStyleSheet[] {
+		if (!root) {
+			return [];
+		}
+		const styleElements = <NodeList<HTMLStyleElement>>(
+			root.querySelectorAll('style,link[rel="stylesheet"]')
+		);
+		let styleSheets: CSSStyleSheet[] = [];
+
+		for (const styleElement of styleElements) {
+			const sheet = styleElement.sheet;
+			if (sheet) {
+				styleSheets.push(sheet);
+			}
+		}
+
+		if ((<Document | ShadowRoot>root).adoptedStyleSheets) {
+			styleSheets = styleSheets.concat((<Document | ShadowRoot>root).adoptedStyleSheets);
+		}
+
+		return styleSheets;
+	}
+
+	/**
+	 * Applies CSS text to elements.
+	 *
+	 * @param options Options.
+	 * @param options.elements Elements.
+	 * @param options.cssRules CSS rules.
+	 * @param [options.scopeElements] Scope elements.
+	 * @param [options.scopeElement] Scope element.
+	 * @param [options.hostElement] Host element.
+	 */
+	private parseCSSRules(options: {
+		cssRules: CSSRule[];
+		elements: IStyleAndElement[];
+		scopeElements?: IStyleAndElement[];
+		hostElement?: IStyleAndElement | null;
+		scopeElement?: IStyleAndElement | null;
+	}): void {
+		if (!options.hostElement && !options.elements.length) {
+			return;
+		}
+
+		const window = this.element[PropertySymbol.window];
+
+		for (const rule of options.cssRules) {
+			if (rule.type === CSSRuleTypeEnum.styleRule) {
+				const selectorText: string = (<CSSStyleRule>rule).selectorText;
+				if (selectorText) {
+					for (const element of options.elements) {
+						const match = QuerySelector.matches(<Element>element.element, selectorText, {
+							ignoreErrors: true,
+							scope: options.scopeElement?.element
+						});
+						if (match) {
+							element.cssTexts.push({
+								cssText: (<CSSStyleRule>rule)[PropertySymbol.cssText],
+								priorityWeight: match.priorityWeight
+							});
+						}
+					}
+				}
+			} else if (
+				rule.type === CSSRuleTypeEnum.mediaRule &&
+				// TODO: We need to send in a predefined 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({
+					window,
+					media: (<CSSMediaRule>rule).conditionText,
+					rootFontSize: this.element[PropertySymbol.tagName] === 'HTML' ? 16 : null
+				}).matches
+			) {
+				this.parseCSSRules({
+					elements: options.elements,
+					cssRules: (<CSSMediaRule>rule).cssRules,
+					hostElement: options.hostElement,
+					scopeElement: options.scopeElement
+				});
+			} else if (rule.type === CSSRuleTypeEnum.supportsRule) {
+				if (window.CSS.supports((<CSSSupportsRule>rule).conditionText)) {
+					this.parseCSSRules({
+						elements: options.elements,
+						cssRules: (<CSSSupportsRule>rule).cssRules,
+						hostElement: options.hostElement,
+						scopeElement: options.scopeElement
+					});
+				}
+			} else if (rule.type === CSSRuleTypeEnum.containerRule) {
+				if (rule instanceof CSSScopeRule) {
+					const scopedElements: IStyleAndElement[] = [];
+					let scope: IStyleAndElement | null = null;
+
+					for (const element of options.scopeElements || options.elements) {
+						if (scope) {
+							if (rule[PropertySymbol.end]) {
+								const match = QuerySelector.matches(
+									<Element>element.element,
+									rule[PropertySymbol.end],
+									{
+										ignoreErrors: true,
+										scope: scope.element
+									}
+								);
+								if (match) {
+									break;
+								}
+							}
+							scopedElements.push(element);
+						} else {
+							const match = QuerySelector.matches(
+								<Element>element.element,
+								rule[PropertySymbol.start] || ':root',
+								{
+									ignoreErrors: true
+								}
+							);
+							if (match) {
+								scope = element;
+								scopedElements.push(element);
+							}
+						}
+					}
+
+					if (scopedElements.length) {
+						this.parseCSSRules({
+							elements: scopedElements,
+							cssRules: (<CSSScopeRule>rule).cssRules,
+							hostElement: options.hostElement,
+							scopeElement: scope
+						});
+					}
+				}
+				// TODO: Add support for CSSContainerRule, which would require element sizes to be measured.
+			}
+		}
+	}
+
+	/**
+	 * 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 | null;
+	}): 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({
+					window: this.element[PropertySymbol.window],
+					value: match[0],
+					rootFontSize: options.rootFontSize,
+					parentFontSize: options.parentFontSize,
+					parentSize: options.parentSize
+				});
+
+				if (valueInPixels !== null) {
+					newValue = newValue.replace(match[0], valueInPixels + 'px');
+				}
+			}
+		}
+
+		return newValue;
+	}
+
+	/**
+	 * Gets the cached property manager for a node.
+	 *
+	 * @param node Node.
+	 * @returns CSS property manager or null if not available.
+	 */
+	private getCachedPropertyManager(node: Node | null): CSSPropertyManager | null {
+		if (!node) {
+			return null;
+		}
+		return node[PropertySymbol.cache].computedStyle?.result?.deref() || null;
+	}
+}

package/vendor/happy-dom/packages/happy-dom/src/css/declaration/computed-style/config/CSSComputedStyleElementDefault.ts

@@ -0,0 +1,133 @@
+export default {
+	default: 'display: inline;',
+	A: '',
+	ABBR: '',
+	ADDRESS: 'display: block;',
+	AREA: '',
+	ARTICLE: 'display: block;',
+	ASIDE: 'display: block;',
+	AUDIO: 'display: none;',
+	B: '',
+	BASE: 'display: none;',
+	BDI: '',
+	BDO: '',
+	BLOCKQUAOTE: '',
+	BODY: 'display: block;',
+	TEMPLATE: 'display: none;',
+	FORM: 'display: block;',
+	INPUT: 'display: inline-block;',
+	TEXTAREA: 'display: inline-block;',
+	SCRIPT: 'display: none;',
+	IMG: '',
+	LINK: 'display: none;',
+	STYLE: 'display: none;',
+	LABEL: '',
+	SLOT: 'display: contents;',
+	SVG: '',
+	CIRCLE: '',
+	ELLIPSE: '',
+	LINE: '',
+	PATH: '',
+	POLYGON: '',
+	POLYLINE: '',
+	RECT: '',
+	STOP: '',
+	USE: '',
+	META: 'display: none;',
+	BLOCKQUOTE: 'display: block;',
+	BR: '',
+	BUTTON: 'display: inline-block;',
+	CANVAS: '',
+	CAPTION: 'display: table-caption;',
+	CITE: '',
+	CODE: '',
+	COL: 'display: table-column;',
+	COLGROUP: 'display: table-column-group;',
+	DATA: '',
+	DATALIST: 'display: none;',
+	DD: 'display: block;',
+	DEL: '',
+	DETAILS: 'display: block;',
+	DFN: '',
+	DIALOG: {
+		default: 'display: none;',
+		open: 'display: block;'
+	},
+	DIV: 'display: block;',
+	DL: 'display: block;',
+	DT: 'display: block;',
+	EM: '',
+	EMBED: '',
+	FIELDSET: 'display: block;',
+	FIGCAPTION: 'display: block;',
+	FIGURE: 'display: block;',
+	FOOTER: 'display: block;',
+	H1: 'display: block;',
+	H2: 'display: block;',
+	H3: 'display: block;',
+	H4: 'display: block;',
+	H5: 'display: block;',
+	H6: 'display: block;',
+	HEAD: 'display: none;',
+	HEADER: 'display: block;',
+	HGROUP: 'display: block;',
+	HR: 'display: block;',
+	HTML: 'display: block;direction: ltr;font: 16px "Times New Roman";',
+	I: '',
+	IFRAME: '',
+	INS: '',
+	KBD: '',
+	LEGEND: 'display: block;',
+	LI: 'display: list-item;',
+	MAIN: 'display: block;',
+	MAP: '',
+	MARK: '',
+	MATH: '',
+	MENU: 'display: block;',
+	MENUITEM: '',
+	METER: 'display: inline-block;',
+	NAV: 'display: block;',
+	NOSCRIPT: '',
+	OBJECT: '',
+	OL: 'display: block;',
+	OPTGROUP: 'display: block;',
+	OPTION: 'display: block;',
+	OUTPUT: 'unicode-bidi: isolate;',
+	P: 'display: block;',
+	PARAM: 'display: none;',
+	PICTURE: '',
+	PRE: 'display: block;',
+	PROGRESS: 'display: inline-block;',
+	Q: '',
+	RB: '',
+	RP: 'display: none;',
+	RT: '',
+	RTC: '',
+	RUBY: '',
+	S: '',
+	SAMP: '',
+	SECTION: 'display: block;',
+	SELECT: 'display: inline-block;',
+	SMALL: '',
+	SOURCE: '',
+	SPAN: '',
+	STRONG: '',
+	SUB: '',
+	SUMMARY: 'display: block;',
+	SUP: '',
+	TABLE: 'display: table;',
+	TBODY: 'display: table-row-group;',
+	TD: 'display: table-cell;',
+	TFOOT: 'display: table-footer-group;',
+	TH: 'display: table-cell;',
+	THEAD: 'display: table-header-group;',
+	TIME: '',
+	TITLE: 'display: none;',
+	TR: 'display: table-row;',
+	TRACK: '',
+	U: '',
+	UL: 'display: block;',
+	VAR: '',
+	VIDEO: '',
+	WBR: ''
+};

package/vendor/happy-dom/packages/happy-dom/src/css/declaration/computed-style/config/CSSComputedStyleInheritedProperties.ts

@@ -0,0 +1,39 @@
+export default {
+	'border-collapse': true,
+	'border-spacing': true,
+	'caption-side': true,
+	color: true,
+	cursor: true,
+	direction: true,
+	'empty-cells': true,
+	'font-family': true,
+	'font-size': true,
+	'font-style': true,
+	'font-variant': true,
+	'font-weight': true,
+	'font-size-adjust': true,
+	'font-stretch': true,
+	font: true,
+	'letter-spacing': true,
+	'line-height': true,
+	'list-style-image': true,
+	'list-style-position': true,
+	'list-style-type': true,
+	'list-style': true,
+	orphans: true,
+	quotes: true,
+	'tab-size': true,
+	'text-align': true,
+	'text-align-last': true,
+	'text-decoration-color': true,
+	'text-indent': true,
+	'text-justify': true,
+	'text-shadow': true,
+	'text-transform': true,
+	visibility: true,
+	'white-space': true,
+	widows: true,
+	'word-break': true,
+	'word-spacing': true,
+	'word-wrap': true
+};