happy-dom 14.12.3 → 15.0.0

package/src/css/declaration/AbstractCSSStyleDeclaration.ts

@@ -1,12 +1,9 @@
 import Element from '../../nodes/element/Element.js';
-import * as PropertySymbol from '../../PropertySymbol.js';
-import Attr from '../../nodes/attr/Attr.js';
 import CSSRule from '../CSSRule.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import DOMException from '../../exception/DOMException.js';
 import CSSStyleDeclarationElementStyle from './element-style/CSSStyleDeclarationElementStyle.js';
 import CSSStyleDeclarationPropertyManager from './property-manager/CSSStyleDeclarationPropertyManager.js';
-import NamedNodeMap from '../../named-node-map/NamedNodeMap.js';
 
 /**
  * CSS Style Declaration.
@@ -78,22 +75,10 @@ export default abstract class AbstractCSSStyleDeclaration {
 		}
 
 		if (this.#ownerElement) {
-			const style = new CSSStyleDeclarationPropertyManager({ cssText });
-			let styleAttribute = <Attr>this.#ownerElement[PropertySymbol.attributes]['style'];
-
-			if (!styleAttribute) {
-				styleAttribute = this.#ownerElement[PropertySymbol.ownerDocument].createAttribute('style');
-				// We use "[PropertySymbol.setNamedItemWithoutConsequences]" here to avoid triggering setting "Element.style.cssText" when setting the "style" attribute.
-				(<NamedNodeMap>this.#ownerElement[PropertySymbol.attributes])[
-					PropertySymbol.setNamedItemWithoutConsequences
-				](styleAttribute);
-			}
-
-			if (this.#ownerElement[PropertySymbol.isConnected]) {
-				this.#ownerElement[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
-			}
-
-			styleAttribute[PropertySymbol.value] = style.toString();
+			this.#ownerElement.setAttribute(
+				'style',
+				new CSSStyleDeclarationPropertyManager({ cssText }).toString()
+			);
 		} else {
 			this.#style = new CSSStyleDeclarationPropertyManager({ cssText });
 		}
@@ -136,25 +121,10 @@ export default abstract class AbstractCSSStyleDeclaration {
 		if (!stringValue) {
 			this.removeProperty(name);
 		} else if (this.#ownerElement) {
-			let styleAttribute = <Attr>this.#ownerElement[PropertySymbol.attributes]['style'];
-
-			if (!styleAttribute) {
-				styleAttribute = this.#ownerElement[PropertySymbol.ownerDocument].createAttribute('style');
-
-				// We use "[PropertySymbol.setNamedItemWithoutConsequences]" here to avoid triggering setting "Element.style.cssText" when setting the "style" attribute.
-				(<NamedNodeMap>this.#ownerElement[PropertySymbol.attributes])[
-					PropertySymbol.setNamedItemWithoutConsequences
-				](styleAttribute);
-			}
-
-			if (this.#ownerElement[PropertySymbol.isConnected]) {
-				this.#ownerElement[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
-			}
-
 			const style = this.#elementStyle.getElementStyle();
 			style.set(name, stringValue, !!priority);
 
-			styleAttribute[PropertySymbol.value] = style.toString();
+			this.#ownerElement.setAttribute('style', style.toString());
 		} else {
 			this.#style.set(name, stringValue, !!priority);
 		}
@@ -180,18 +150,10 @@ export default abstract class AbstractCSSStyleDeclaration {
 			style.remove(name);
 			const newCSSText = style.toString();
 
-			if (this.#ownerElement[PropertySymbol.isConnected]) {
-				this.#ownerElement[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
-			}
-
 			if (newCSSText) {
-				(<Attr>this.#ownerElement[PropertySymbol.attributes]['style'])[PropertySymbol.value] =
-					newCSSText;
+				this.#ownerElement.setAttribute('style', newCSSText);
 			} else {
-				// We use "[PropertySymbol.removeNamedItemWithoutConsequences]" here to avoid triggering setting "Element.style.cssText" when setting the "style" attribute.
-				(<NamedNodeMap>this.#ownerElement[PropertySymbol.attributes])[
-					PropertySymbol.removeNamedItemWithoutConsequences
-				]('style');
+				this.#ownerElement.removeAttribute('style');
 			}
 		} else {
 			this.#style.remove(name);

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

@@ -31,16 +31,6 @@ type IStyleAndElement = {
  * CSS Style Declaration utility
  */
 export default class CSSStyleDeclarationElementStyle {
-	private cache: {
-		propertyManager: CSSStyleDeclarationPropertyManager;
-		cssText: string;
-		documentCacheID: number;
-	} = {
-		propertyManager: null,
-		cssText: null,
-		documentCacheID: null
-	};
-
 	private element: Element;
 	private computed: boolean;
 
@@ -65,15 +55,26 @@ export default class CSSStyleDeclarationElementStyle {
 			return this.getComputedElementStyle();
 		}
 
-		const cssText = this.element[PropertySymbol.attributes]['style']?.[PropertySymbol.value];
+		const cachedResult = this.element[PropertySymbol.cache].style;
 
-		if (cssText) {
-			if (this.cache.propertyManager && this.cache.cssText === cssText) {
-				return this.cache.propertyManager;
+		if (cachedResult?.result) {
+			const result = cachedResult.result.deref();
+			if (result) {
+				return result;
 			}
-			this.cache.cssText = cssText;
-			this.cache.propertyManager = new CSSStyleDeclarationPropertyManager({ cssText });
-			return this.cache.propertyManager;
+		}
+
+		const cssText =
+			this.element[PropertySymbol.attributes][PropertySymbol.namedItems].get('style')?.[
+				PropertySymbol.value
+			];
+
+		if (cssText) {
+			const propertyManager = new CSSStyleDeclarationPropertyManager({ cssText });
+			this.element[PropertySymbol.cache].style = {
+				result: new WeakRef(propertyManager)
+			};
+			return propertyManager;
 		}
 
 		return new CSSStyleDeclarationPropertyManager();
@@ -98,15 +99,14 @@ export default class CSSStyleDeclarationElementStyle {
 			return new CSSStyleDeclarationPropertyManager();
 		}
 
-		if (
-			this.cache.propertyManager &&
-			this.cache.documentCacheID ===
-				this.element[PropertySymbol.ownerDocument][PropertySymbol.cacheID]
-		) {
-			return this.cache.propertyManager;
-		}
+		const cacheResult = this.element[PropertySymbol.cache].computedStyle;
 
-		this.cache.documentCacheID = this.element[PropertySymbol.ownerDocument][PropertySymbol.cacheID];
+		if (cacheResult?.result) {
+			const result = cacheResult.result.deref();
+			if (result) {
+				return result;
+			}
+		}
 
 		// Walks through all parent elements and stores them in an array with element and matching CSS text.
 		while (styleAndElement.element) {
@@ -245,8 +245,8 @@ export default class CSSStyleDeclarationElementStyle {
 			}
 
 			const elementStyleAttribute = (<Element>parentElement.element)[PropertySymbol.attributes][
-				'style'
-			];
+				PropertySymbol.namedItems
+			].get('style');
 
 			if (elementStyleAttribute) {
 				elementCSSText += elementStyleAttribute[PropertySymbol.value];
@@ -302,7 +302,14 @@ export default class CSSStyleDeclarationElementStyle {
 			}
 		}
 
-		this.cache.propertyManager = propertyManager;
+		const cachedResult = {
+			result: new WeakRef(propertyManager)
+		};
+
+		this.element[PropertySymbol.cache].computedStyle = cachedResult;
+		this.element[PropertySymbol.ownerDocument][PropertySymbol.affectsComputedStyleCache].push(
+			cachedResult
+		);
 
 		return propertyManager;
 	}

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

@@ -2,7 +2,8 @@ import CSSStyleDeclarationValueParser from './CSSStyleDeclarationValueParser.js'
 import ICSSStyleDeclarationPropertyValue from './ICSSStyleDeclarationPropertyValue.js';
 
 const RECT_REGEXP = /^rect\((.*)\)$/i;
-const SPLIT_PARTS_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
+const SPLIT_COMMA_SEPARATED_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
+const SPLIT_SPACE_SEPARATED_REGEXP = /\s+(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on spaces that are outside of parentheses
 const BORDER_STYLE = [
 	'none',
 	'hidden',
@@ -496,7 +497,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getOutlineWidth('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getOutlineWidth(part, important);
@@ -648,7 +649,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderImage('initial', important)
 		};
 
-		const parts = value.replace(/ *, */g, ',').split(/ +/);
+		const parts = value.replace(/\s*,\s*/g, ',').split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderWidth(part, important);
@@ -694,7 +695,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getBorderTopWidth(parts[0], important);
 		const right = this.getBorderRightWidth(parts[1] || parts[0], important);
 		const bottom = this.getBorderBottomWidth(parts[2] || parts[0], important);
@@ -740,7 +741,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getBorderTopStyle(parts[0], important);
 		const right = this.getBorderRightStyle(parts[1] || parts[0], important);
 		const bottom = this.getBorderBottomStyle(parts[2] || parts[0], important);
@@ -787,7 +788,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getBorderTopColor(parts[0], important);
 		const right = this.getBorderRightColor(parts[1] || parts[0], important);
 		const bottom = this.getBorderBottomColor(parts[2] || parts[0], important);
@@ -835,14 +836,14 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		let parsedValue = value.replace(/[ ]*\/[ ]*/g, '/');
-		const sourceMatch = parsedValue.match(/ *([a-zA-Z-]+\([^)]*\)) */);
+		let parsedValue = value.replace(/\s\/\s/g, '/');
+		const sourceMatch = parsedValue.match(/\s*([a-zA-Z-]+\([^)]*\))\s*/);
 
 		if (sourceMatch) {
 			parsedValue = parsedValue.replace(sourceMatch[0], '');
 		}
 
-		const parts = parsedValue.split(/ +/);
+		const parts = parsedValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (sourceMatch) {
 			parts.push(sourceMatch[1]);
@@ -1037,7 +1038,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = lowerValue.split(/ +/);
+		const parts = lowerValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (parts.length > 4) {
 			return null;
@@ -1073,6 +1074,15 @@ export default class CSSStyleDeclarationPropertySetParser {
 	): {
 		[key: string]: ICSSStyleDeclarationPropertyValue;
 	} {
+		if (value === '0') {
+			return {
+				'border-image-outset': {
+					important,
+					value
+				}
+			};
+		}
+
 		const variable = CSSStyleDeclarationValueParser.getVariable(value);
 		if (variable) {
 			return { 'border-image-outset': { value: variable, important } };
@@ -1089,25 +1099,28 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (parts.length > 4) {
 			return null;
 		}
 
+		const newParts = [];
+
 		for (const part of parts) {
-			if (
-				!CSSStyleDeclarationValueParser.getLength(part) &&
-				!CSSStyleDeclarationValueParser.getFloat(part)
-			) {
+			const parsedValue =
+				CSSStyleDeclarationValueParser.getLength(part) ||
+				CSSStyleDeclarationValueParser.getFloat(part);
+			if (!parsedValue) {
 				return null;
 			}
+			newParts.push(parsedValue === '0px' ? '0' : parsedValue);
 		}
 
 		return {
 			'border-image-outset': {
 				important,
-				value
+				value: newParts.join(' ')
 			}
 		};
 	}
@@ -1141,7 +1154,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = lowerValue.split(/ +/);
+		const parts = lowerValue.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		if (parts.length > 2) {
 			return null;
@@ -1532,7 +1545,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const topLeft = this.getBorderTopLeftRadius(parts[0], important);
 		const topRight = this.getBorderTopRightRadius(parts[1] || parts[0], important);
 		const bottomRight = this.getBorderBottomRightRadius(parts[2] || parts[0], important);
@@ -1670,7 +1683,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderTopColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderTopWidth(part, important);
@@ -1719,7 +1732,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderRightColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderRightWidth(part, important);
@@ -1768,7 +1781,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderBottomColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderBottomWidth(part, important);
@@ -1817,7 +1830,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getBorderLeftColor('initial', important)
 		};
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (const part of parts) {
 			const width = this.getBorderLeftWidth(part, important);
@@ -1860,7 +1873,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getPaddingTop(parts[0], important);
 		const right = this.getPaddingRight(parts[1] || parts[0], important);
 		const bottom = this.getPaddingBottom(parts[2] || parts[0], important);
@@ -1993,7 +2006,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const top = this.getMarginTop(parts[0], important);
 		const right = this.getMarginRight(parts[1] || parts[0], important);
 		const bottom = this.getMarginBottom(parts[2] || parts[0], important);
@@ -2151,7 +2164,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		const flexGrow = this.getFlexGrow(parts[0], important);
 		const flexShrink = this.getFlexShrink(parts[1] || '1', important);
 		const flexBasis = this.getFlexBasis(parts[2] || '0%', important);
@@ -2285,9 +2298,9 @@ export default class CSSStyleDeclarationPropertySetParser {
 		};
 
 		const parts = value
-			.replace(/[ ]*,[ ]*/g, ',')
-			.replace(/[ ]*\/[ ]*/g, '/')
-			.split(/ +/);
+			.replace(/\s,\s/g, ',')
+			.replace(/\s\/\s/g, '/')
+			.split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		const backgroundPositions = [];
 
@@ -2384,7 +2397,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-size': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+		const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		const parsed = [];
 
 		for (const imagePart of imageParts) {
@@ -2555,12 +2568,12 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const imageParts = value.split(SPLIT_PARTS_REGEXP);
+		const imageParts = value.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		let x = '';
 		let y = '';
 
 		for (const imagePart of imageParts) {
-			const parts = imagePart.trim().split(/ +/);
+			const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 			if (x) {
 				x += ',';
@@ -2668,11 +2681,11 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-x': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+		const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
-			const parts = imagePart.trim().split(/ +/);
+			const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 			if (parsedValue) {
 				parsedValue += ',';
@@ -2719,11 +2732,11 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-y': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
+		const imageParts = lowerValue.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
-			const parts = imagePart.trim().split(/ +/);
+			const parts = imagePart.trim().split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 			if (parsedValue) {
 				parsedValue += ',';
@@ -2795,15 +2808,17 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-image': { value: lowerValue, important } };
 		}
 
-		const parts = value.split(SPLIT_PARTS_REGEXP);
+		const parts = value.split(SPLIT_COMMA_SEPARATED_REGEXP);
 		const parsed = [];
 
 		for (const part of parts) {
-			const url = CSSStyleDeclarationValueParser.getURL(part.trim());
-			if (!url) {
+			const parsedValue =
+				CSSStyleDeclarationValueParser.getURL(part.trim()) ||
+				CSSStyleDeclarationValueParser.getGradient(part.trim());
+			if (!parsedValue) {
 				return null;
 			}
-			parsed.push(url);
+			parsed.push(parsedValue);
 		}
 
 		if (parsed.length) {
@@ -2902,7 +2917,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			...this.getLineHeight('normal', important)
 		};
 
-		const parts = value.replace(/ *\/ */g, '/').split(/ +/);
+		const parts = value.replace(/\s*\/\s*/g, '/').split(SPLIT_SPACE_SEPARATED_REGEXP);
 
 		for (let i = 0, max = parts.length; i < max; i++) {
 			const part = parts[i];
@@ -2970,7 +2985,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 		if (CSSStyleDeclarationValueParser.getGlobal(lowerValue) || FONT_STYLE.includes(lowerValue)) {
 			return { 'font-style': { value: lowerValue, important } };
 		}
-		const parts = value.split(/ +/);
+		const parts = value.split(SPLIT_SPACE_SEPARATED_REGEXP);
 		if (parts.length === 2 && parts[0] === 'oblique') {
 			const degree = CSSStyleDeclarationValueParser.getDegree(parts[1]);
 			return degree ? { 'font-style': { value: lowerValue, important } } : null;

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

@@ -2,17 +2,17 @@ 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|vw|vh|vmin|vmax|Q))$/;
+	/^(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*\)$/;
 const INTEGER_REGEXP = /^[0-9]+$/;
 const FLOAT_REGEXP = /^[0-9.]+$/;
 const CALC_REGEXP = /^calc\([^^)]+\)$/;
-const CSS_VARIABLE_REGEXP = /^var\( *(--[^) ]+)\)$/;
+const CSS_VARIABLE_REGEXP = /^var\(\s*(--[^)\s]+)\)$/;
 const FIT_CONTENT_REGEXP = /^fit-content\([^^)]+\)$/;
 const GRADIENT_REGEXP =
-	/^(repeating-linear|linear|radial|repeating-radial|conic|repeating-conic)-gradient\([^)]+\)$/;
+	/^((repeating-linear|linear|radial|repeating-radial|conic|repeating-conic)-gradient)\(([^)]+)\)$/;
 const GLOBALS = ['inherit', 'initial', 'unset', 'revert'];
 const COLORS = [
 	'none',
@@ -182,8 +182,14 @@ export default class CSSStyleDeclarationValueParser {
 		if (value === '0') {
 			return '0px';
 		}
-		if (LENGTH_REGEXP.test(value)) {
-			return value;
+		const match = value.match(LENGTH_REGEXP);
+		if (match) {
+			const number = parseFloat(match[1]);
+			if (isNaN(number)) {
+				return null;
+			}
+			const unit = match[2];
+			return `${Math.round(number * 1000000) / 1000000}${unit}`;
 		}
 		return null;
 	}
@@ -309,7 +315,11 @@ export default class CSSStyleDeclarationValueParser {
 	 */
 	public static getFloat(value: string): string {
 		if (FLOAT_REGEXP.test(value)) {
-			return value;
+			const number = parseFloat(value);
+			if (isNaN(number)) {
+				return null;
+			}
+			return String(Math.round(number * 1000000) / 1000000);
 		}
 		return null;
 	}
@@ -321,8 +331,12 @@ export default class CSSStyleDeclarationValueParser {
 	 * @returns Parsed value.
 	 */
 	public static getGradient(value: string): string {
-		if (GRADIENT_REGEXP.test(value)) {
-			return value;
+		const match = value.match(GRADIENT_REGEXP);
+		if (match) {
+			return `${match[1]}(${match[3]
+				.trim()
+				.split(/\s*,\s*/)
+				.join(', ')})`;
 		}
 		return null;
 	}
@@ -368,7 +382,7 @@ export default class CSSStyleDeclarationValueParser {
 			return null;
 		}
 
-		let url = result[1];
+		let url = result[1].trim();
 
 		if ((url[0] === '"' || url[0] === "'") && url[0] !== url[url.length - 1]) {
 			return null;

package/src/custom-element/CustomElementRegistry.ts

@@ -70,9 +70,9 @@ export default class CustomElementRegistry {
 		this[PropertySymbol.registedClass].set(elementClass, name);
 
 		// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
-		if (elementClass.prototype.attributeChangedCallback) {
-			elementClass[PropertySymbol.observedAttributes] = elementClass.observedAttributes;
-		}
+		elementClass[PropertySymbol.observedAttributes] = (elementClass.observedAttributes || []).map(
+			(name) => String(name).toLowerCase()
+		);
 
 		if (this[PropertySymbol.callbacks][name]) {
 			const callbacks = this[PropertySymbol.callbacks][name];

package/src/dom-implementation/DOMImplementation.ts

@@ -46,13 +46,15 @@ export default class DOMImplementation {
 		publicId: string,
 		systemId: string
 	): DocumentType {
-		const documentType = NodeFactory.createNode<DocumentType>(
+		const documentType = NodeFactory.createNode(
 			this.#document,
 			this.#document[PropertySymbol.ownerWindow].DocumentType
 		);
+
 		documentType[PropertySymbol.name] = qualifiedName;
 		documentType[PropertySymbol.publicId] = publicId;
 		documentType[PropertySymbol.systemId] = systemId;
+
 		return documentType;
 	}
 }

package/src/dom-parser/DOMParser.ts

@@ -37,15 +37,17 @@ export default class DOMParser {
 		}
 
 		const newDocument = <Document>this.#createDocument(mimeType);
+		const documentChildNodes = newDocument[PropertySymbol.nodeArray];
 
-		newDocument[PropertySymbol.childNodes].length = 0;
-		newDocument[PropertySymbol.children].length = 0;
+		while (documentChildNodes.length) {
+			newDocument.removeChild(documentChildNodes[0]);
+		}
 
 		const root = <DocumentFragment>XMLParser.parse(newDocument, string, { evaluateScripts: true });
 		let documentElement = null;
 		let documentTypeNode = null;
 
-		for (const node of root[PropertySymbol.childNodes]) {
+		for (const node of root[PropertySymbol.nodeArray]) {
 			if (node['tagName'] === 'HTML') {
 				documentElement = node;
 			} else if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentTypeNode) {
@@ -64,16 +66,16 @@ export default class DOMParser {
 			newDocument.appendChild(documentElement);
 			const body = newDocument.body;
 			if (body) {
-				for (const child of root[PropertySymbol.childNodes].slice()) {
-					body.appendChild(child);
+				while (root[PropertySymbol.nodeArray].length) {
+					body.appendChild(root[PropertySymbol.nodeArray][0]);
 				}
 			}
 		} else {
 			switch (mimeType) {
 				case 'image/svg+xml':
 					{
-						for (const node of root[PropertySymbol.childNodes].slice()) {
-							newDocument.appendChild(node);
+						while (root[PropertySymbol.nodeArray].length) {
+							newDocument.appendChild(root[PropertySymbol.nodeArray][0]);
 						}
 					}
 					break;
@@ -88,8 +90,8 @@ export default class DOMParser {
 						documentElement.appendChild(bodyElement);
 						newDocument.appendChild(documentElement);
 
-						for (const node of root[PropertySymbol.childNodes].slice()) {
-							bodyElement.appendChild(node);
+						while (root[PropertySymbol.nodeArray].length) {
+							bodyElement.appendChild(root[PropertySymbol.nodeArray][0]);
 						}
 					}
 					break;

package/src/event/Event.ts

@@ -125,7 +125,7 @@ export default class Event {
 	 * Prevents default.
 	 */
 	public preventDefault(): void {
-		if (!this[PropertySymbol.isInPassiveEventListener]) {
+		if (!this[PropertySymbol.isInPassiveEventListener] && this.cancelable) {
 			this.defaultPrevented = true;
 		}
 	}

package/src/event/events/IMediaQueryListEventInit.ts

@@ -0,0 +1,6 @@
+import MediaStreamTrack from '../../nodes/html-media-element/MediaStreamTrack.js';
+import IEventInit from '../IEventInit.js';
+
+export default interface IMediaQueryListEventInit extends IEventInit {
+	track?: MediaStreamTrack;
+}