buninu-browser 0.2.1 → 0.2.2

package/lib/style/computed-style.js

@@ -50,13 +50,21 @@ const VERTICAL_ALIGNS = new Set(["baseline", "top", "middle", "bottom", "text-to
 const AUTO_TRACK = Object.freeze({ min: "auto", max: "auto" });
 const FLEX_ALIGNMENT = Object.freeze({ "flex-start": "start", "flex-end": "end", left: "start", right: "end" });
 const GRADIENT = /^\s*(?:repeating-)?(?:linear|radial)-gradient\(/i;
+// A background layer's image: a URL or a gradient.
+const BACKGROUND_IMAGE = /^(?:url\(|(?:repeating-)?(?:linear|radial)-gradient\()/i;
+const BACKGROUND_REPEATS = new Set(["repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"]);
+const BACKGROUND_BOXES = new Set(["border-box", "padding-box", "content-box"]);
+const BACKGROUND_ATTACHMENTS = new Set(["scroll", "fixed", "local"]);
 const BOX_SIDES = Object.freeze(["top", "right", "bottom", "left"]);
 const WHITE_SPACES = new Set(["normal", "nowrap", "pre", "pre-wrap"]);
 // CSS Cascade 4 §7.3 CSS-wide keywords; revert is treated as unset (no user/UA origin split).
 const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
 // Computed-style fields a shorthand (or a property not named after its field) covers.
 const PROPERTY_FIELDS = Object.freeze({
-  background: ["backgroundColor", "backgroundImage"],
+  overflow: ["overflowX", "overflowY", "overflowScrollX", "overflowScrollY"],
+  "overflow-x": ["overflowX", "overflowScrollX"],
+  "overflow-y": ["overflowY", "overflowScrollY"],
+  background: ["backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat"],
   flex: ["flexGrow", "flexShrink", "flexBasis"],
   "flex-flow": ["flexDirection", "flexWrap"],
   gap: ["rowGap", "columnGap", "gap"],
@@ -89,6 +97,10 @@ const INITIAL = Object.freeze({
   colorScheme: "light",
   backgroundColor: "rgba(0, 0, 0, 0)",
   backgroundImage: null,
+  // Comma-separated, one entry per background-image layer (repeated as needed); null is the initial value.
+  backgroundPosition: null,
+  backgroundSize: null,
+  backgroundRepeat: null,
   backgroundClip: "border-box",
   boxShadow: null,
   fontFamily: Object.freeze(["sans-serif"]),
@@ -133,6 +145,8 @@ const INITIAL = Object.freeze({
   inset: Object.freeze(["auto", "auto", "auto", "auto"]),
   zIndex: "auto",
   transform: null,
+  // Raw text (default "50% 50%"); paint resolves it against the border box.
+  transformOrigin: null,
   justifyItems: "normal",
   justifySelf: "auto",
   gridTemplateColumns: null,
@@ -161,6 +175,10 @@ const INITIAL = Object.freeze({
   opacity: 1,
   overflowX: "visible",
   overflowY: "visible",
+  // Scroll containers (CSS Overflow 3 §3): "auto" for auto/scroll/overlay,
+  // which the user scrolls; "hidden", which only scripts scroll; else null.
+  overflowScrollX: null,
+  overflowScrollY: null,
   textOverflow: "clip",
   clip: null,
   clipPath: null,
@@ -187,6 +205,7 @@ const UA_DECLARATIONS = new Map(Object.entries({
   FIGURE: "margin: 1em 40px",
   PRE: "margin: 1em 0; font-family: monospace",
   CODE: "font-family: monospace",
+  IFRAME: "border: 2px inset",
   KBD: "font-family: monospace",
   SAMP: "font-family: monospace",
   TT: "font-family: monospace",
@@ -237,6 +256,8 @@ export function controlKind(element) {
 }
 
 /** HTML §15.3.4: :link (visited links are not tracked). */
+// <iframe frameborder="0"> (or "no"): no border in place of the default one.
+const UA_FRAMELESS_DECLARATIONS = parseDeclarations("border: none");
 const UA_LINK_DECLARATIONS = parseDeclarations("color: #0000EE; text-decoration: underline; cursor: pointer");
 const DECORATION_LINES = new Set(["underline", "overline", "line-through"]);
 const DECORATION_STYLES = new Set(["solid", "double", "dotted", "dashed", "wavy"]);
@@ -422,6 +443,11 @@ export class StyleEngine {
     return this.#styles.get(element) ?? INITIAL;
   }
 
+  /** An element's custom properties (--*), name to value text, inherited ones included. */
+  customPropertiesOf(element) {
+    return this.#customProperties.get(element) ?? EMPTY_MAP;
+  }
+
   /** The computed style of an element's ::before/::after box, or null when it generates none. */
   getPseudo(element, pseudo) {
     return this.#pseudoStyles.get(element)?.[pseudo] ?? null;
@@ -618,7 +644,9 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   const isLink = (element.tagName === "A" || element.tagName === "AREA") && element.hasAttribute("href");
   const control = controlKind(element);
   if (control === "hidden") values.display = "none";
-  for (const declaration of [...(UA_DECLARATIONS.get(element.tagName)?.values() ?? []),
+  const frameless = element.tagName === "IFRAME" && ["0", "no"].includes(element.getAttribute("frameborder")?.trim().toLowerCase());
+  const uaDeclarations = frameless ? UA_FRAMELESS_DECLARATIONS : UA_DECLARATIONS.get(element.tagName);
+  for (const declaration of [...(uaDeclarations?.values() ?? []),
     ...(isLink ? UA_LINK_DECLARATIONS.values() : []), ...(UA_CONTROL_DECLARATIONS[control]?.values() ?? [])]) {
     if (!declarations.has(declaration.name)) {
       declarations.set(declaration.name, { ...declaration, specificity: -1, order: -1, layer: -Infinity });
@@ -1112,13 +1140,22 @@ function setProperty(style, name, value, parentStyle = null) {
     case "overflow":
     case "overflow-x":
     case "overflow-y": {
-      // Scrolling boxes are not implemented: every non-visible value clips.
+      // Every non-visible value clips; all but clip also make a scroll container.
       const parts = value.split(/\s+/);
       const clips = (part) => (["hidden", "clip", "auto", "scroll", "overlay"].includes(part) ? "clip" : part === "visible" ? "visible" : null);
-      const x = clips(parts[0]);
-      const y = clips(parts[1] ?? parts[0]);
-      if (name !== "overflow-y" && x) style.overflowX = x;
-      if (name !== "overflow-x" && (name === "overflow" ? y : x)) style.overflowY = name === "overflow" ? y : x;
+      const scrolls = (part) => (["auto", "scroll", "overlay"].includes(part) ? "auto" : part === "hidden" ? "hidden" : null);
+      const xPart = parts[0];
+      const yPart = name === "overflow" ? parts[1] ?? parts[0] : parts[0];
+      const x = clips(xPart);
+      const y = clips(yPart);
+      if (name !== "overflow-y" && x) {
+        style.overflowX = x;
+        style.overflowScrollX = scrolls(xPart);
+      }
+      if (name !== "overflow-x" && y) {
+        style.overflowY = y;
+        style.overflowScrollY = scrolls(yPart);
+      }
       break;
     }
     case "text-overflow":
@@ -1157,24 +1194,37 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "background": {
-      // The shorthand resets both longhands; only the final layer may carry a color.
-      const layers = splitTopLevel(value, ",");
-      const images = layers.filter((layer) => GRADIENT.test(layer));
-      const color = splitTopLevel(layers.at(-1) ?? "", " ")
-        .map((token) => resolvedColor(token, style.colorScheme))
-        .find(Boolean);
-      style.backgroundColor = color ?? INITIAL.backgroundColor;
-      style.backgroundImage = images.length ? images.join(", ") : null;
+      // The shorthand resets the longhands; only the final layer may carry a color.
+      const layers = splitTopLevel(value, ",").map(parseBackgroundLayer);
+      if (layers.some((layer) => !layer)) break;
+      style.backgroundColor = layers.at(-1).color
+        ? resolvedColor(layers.at(-1).color, style.colorScheme) ?? INITIAL.backgroundColor
+        : INITIAL.backgroundColor;
+      const hasImage = layers.some((layer) => layer.image !== "none");
+      style.backgroundImage = hasImage ? layers.map((layer) => layer.image).join(", ") : null;
+      const list = (field, initial) => layers.some((layer) => layer[field] !== initial)
+        ? layers.map((layer) => layer[field]).join(", ")
+        : null;
+      style.backgroundPosition = hasImage ? list("position", "0% 0%") : null;
+      style.backgroundSize = hasImage ? list("size", "auto") : null;
+      style.backgroundRepeat = hasImage ? list("repeat", "repeat") : null;
       break;
     }
     case "background-image": {
       if (value === "none") style.backgroundImage = null;
       else {
-        const images = splitTopLevel(value, ",").filter((layer) => GRADIENT.test(layer));
-        if (images.length) style.backgroundImage = images.join(", ");
+        const images = splitTopLevel(value, ",").map((layer) => BACKGROUND_IMAGE.test(layer) || layer === "none" ? layer : null);
+        if (images.every(Boolean) && images.some((layer) => layer !== "none")) style.backgroundImage = images.join(", ");
       }
       break;
     }
+    case "background-position":
+    case "background-size":
+    case "background-repeat": {
+      const field = { "background-position": "backgroundPosition", "background-size": "backgroundSize", "background-repeat": "backgroundRepeat" }[name];
+      style[field] = value.toLowerCase().replace(/\s+/g, " ");
+      break;
+    }
     case "box-shadow": {
       const shadows = value === "none" ? null : parseBoxShadows(value, style.fontSize);
       if (value === "none" || shadows) style.boxShadow = shadows;
@@ -1229,10 +1279,13 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "transform": {
-      const transform = value === "none" ? null : parseTranslate(value, style.fontSize);
+      const transform = value === "none" ? null : parseTransform(value, style.fontSize);
       if (transform !== undefined) style.transform = transform;
       break;
     }
+    case "transform-origin":
+      style.transformOrigin = value.toLowerCase().replace(/\s+/g, " ");
+      break;
     case "content": {
       const content = parseContent(value);
       if (content !== undefined) style.content = content;
@@ -1296,12 +1349,15 @@ function setProperty(style, name, value, parentStyle = null) {
       if (value === "normal") {
         style.lineHeight = null;
         style.lineHeightFactor = null;
-      } else if (Number.isFinite(numeric) && numeric > 0) {
+      } else if (value !== "" && Number.isFinite(numeric) && numeric >= 0) {
         style.lineHeight = numeric * style.fontSize;
         style.lineHeightFactor = numeric;
       } else {
-        const length = computedLength(value, style.fontSize);
-        if (length > 0) {
+        // Non-negative, so 0 is valid (icon buttons set line-height: 0); a
+        // percentage computes to a length against this element's font size.
+        const percentage = /^(\d+\.?\d*|\.\d+)%$/.exec(value);
+        const length = percentage ? Number(percentage[1]) / 100 * style.fontSize : computedLength(value, style.fontSize);
+        if (length >= 0) {
           style.lineHeight = length;
           style.lineHeightFactor = null;
         }
@@ -1878,6 +1934,32 @@ function pseudoElement(pseudo) {
  * percentages of the element's own border box). Other functions are ignored
  * until transforms are painted with matrices.
  */
+/**
+ * The translation (layout moves the box) and scale (paint scales it about
+ * transform-origin) of a transform list; other functions are ignored.
+ */
+function parseTransform(value, fontSize) {
+  const translation = parseTranslate(value, fontSize);
+  if (translation === undefined) return undefined;
+  let scaleX = 1;
+  let scaleY = 1;
+  let found = false;
+  for (const match of value.matchAll(/\b(scale|scaleX|scaleY|scale3d)\(([^)]*)\)/gi)) {
+    const args = splitTopLevel(match[2], ",").map((part) => part.endsWith("%") ? Number(part.slice(0, -1)) / 100 : Number(part));
+    if (!args.length || args.some((part) => !Number.isFinite(part))) return undefined;
+    const kind = match[1].toLowerCase();
+    if (kind === "scalex") scaleX *= args[0];
+    else if (kind === "scaley") scaleY *= args[0];
+    else {
+      scaleX *= args[0];
+      scaleY *= args[1] ?? args[0];
+    }
+    found = true;
+  }
+  if (!found || (scaleX === 1 && scaleY === 1)) return translation;
+  return Object.freeze({ x: translation?.x ?? 0, y: translation?.y ?? 0, scaleX, scaleY });
+}
+
 function parseTranslate(value, fontSize) {
   let x = 0;
   let y = 0;
@@ -1916,7 +1998,7 @@ function parseContent(value) {
  * undefined property without a fallback leaves nothing (the declaration then
  * has no effect).
  */
-function resolveVariables(value, customProperties, seen = new Set()) {
+export function resolveVariables(value, customProperties, seen = new Set()) {
   const text = String(value);
   // Most values use no custom properties; skip the parsing.
   if (!text.includes("var(")) return text.trim();
@@ -2317,6 +2399,64 @@ function resolvedColor(value, scheme) {
   return /^rgba\(/.test(color ?? "") ? color : null;
 }
 
+/**
+ * One layer of the background shorthand, its parts as text: the image, the
+ * position (before a slash) and size (after it), the repeat style and a color.
+ * Null when a token fits none of them.
+ */
+function parseBackgroundLayer(layer) {
+  const tokens = [];
+  let depth = 0;
+  let token = "";
+  for (const character of layer) {
+    if (depth === 0 && (/\s/.test(character) || character === "/")) {
+      if (token) tokens.push(token);
+      if (character === "/") tokens.push("/");
+      token = "";
+      continue;
+    }
+    if (character === "(") depth++;
+    else if (character === ")") depth--;
+    token += character;
+  }
+  if (token) tokens.push(token);
+  const result = { image: "none", position: "0% 0%", size: "auto", repeat: "repeat", color: null };
+  const position = [];
+  const size = [];
+  const repeat = [];
+  let afterSlash = false;
+  for (const raw of tokens) {
+    const lower = raw.toLowerCase();
+    if (raw === "/") afterSlash = true;
+    else if (BACKGROUND_IMAGE.test(raw)) result.image = raw;
+    else if (lower === "none") result.image = "none";
+    else if (BACKGROUND_REPEATS.has(lower)) repeat.push(lower);
+    else if (BACKGROUND_BOXES.has(lower) || BACKGROUND_ATTACHMENTS.has(lower)) continue;
+    else if (afterSlash && (lower === "cover" || lower === "contain" || lower === "auto" || /^-?[\d.]/.test(lower) || lower.startsWith("calc("))) size.push(lower);
+    else if (["left", "right", "top", "bottom", "center"].includes(lower) || /^-?[\d.]/.test(lower) || lower.startsWith("calc(")) {
+      afterSlash = false;
+      position.push(lower);
+    } else if (resolvedColor(raw, "light")) result.color = raw;
+    else return null;
+  }
+  if (position.length) result.position = position.join(" ");
+  if (size.length) result.size = size.join(" ");
+  if (repeat.length) result.repeat = repeat.join(" ");
+  return result;
+}
+
+/** A style sheet with each relative url() made absolute against the sheet's own URL. */
+export function absolutizeStyleSheetUrls(text, base) {
+  return text.replace(/url\(\s*(["']?)([^"')]*)\1\s*\)/gi, (whole, quote, url) => {
+    if (!url || /^(?:[a-z][a-z\d+.-]*:|#)/i.test(url)) return whole;
+    try {
+      return `url(${quote}${new URL(url, base).href}${quote})`;
+    } catch {
+      return whole;
+    }
+  });
+}
+
 function splitTopLevel(source, separator) {
   const parts = [];
   let depth = 0;

package/lib/user-agent.js

@@ -1,5 +1,12 @@
-// Chrome 154 stable for desktop (2026-09-22). Keep CDP discovery, page JS, and
-// HTTP requests on the same advertised version; casty reads /json/version.
+import packageInfo from "../package.json" with { type: "json" };
+
+export const BROWSER_PRODUCT = `Buninu/${packageInfo.version}`;
+// Compatibility identities, not the version of this engine. Bun runs
+// JavaScriptCore, so a WebKit profile can avoid a V8/JavaScriptCore mismatch.
+// Keep the complete profile together: changing just the UA leaves conflicting
+// vendor and User-Agent Client Hints exposed to scripts.
+export const WEBKIT_USER_AGENT = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15";
+// Chrome 154 compatibility profile (2026-09-22).
 export const CHROMIUM_VERSION = "154.0.8037.57";
 
 export function desktopUserAgent(platform = process.platform, arch = process.arch) {
@@ -10,3 +17,8 @@ export function desktopUserAgent(platform = process.platform, arch = process.arc
 }
 
 export const DESKTOP_USER_AGENT = desktopUserAgent();
+
+/** Desktop compatibility flags are last-wins; mobile presentation takes priority. */
+export function webkitFromArgs(args) {
+  return !args.includes("--mobile") && args.lastIndexOf("--webkit") >= args.lastIndexOf("--chromium");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",
@@ -32,6 +32,9 @@
   "bugs": {
     "url": "https://github.com/jjtseng93/buninu-browser/issues"
   },
+  "scripts": {
+    "test": "bun test --parallel"
+  },
   "license": "MIT",
   "engines": {
     "bun": ">=1.4.2"

package/patches/happy-dom/0002-use-bun-platform-adapters.patch

@@ -9,7 +9,7 @@ index 2de8270..0c5034b 100644
  import ProgressEvent from '../event/events/ProgressEvent.js';
  import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
 diff --git a/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts b/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts
-index f2c85d6..961edb1 100644
+index f2c85d6..dcef8e0 100644
 --- a/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts
 +++ b/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts
 @@ -4,7 +4,7 @@ import type ICanvasShape from '../../canvas/ICanvasShape.js';
@@ -21,39 +21,159 @@ index f2c85d6..961edb1 100644
  import type Response from '../../fetch/Response.js';
  import type Attr from '../attr/Attr.js';
  
-@@ -424,15 +424,18 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
- 			const buffer = Buffer.from(dataUrlMatch[2], 'base64');
+@@ -19,6 +19,8 @@ const DATA_URL_REGEX = /^\s*data:([^,]+)?,(.*)/;
+ export default class HTMLImageElement extends HTMLElement implements ICanvasShape {
+ 	public [PropertySymbol.tagName] = 'IMG';
+ 	public [PropertySymbol.complete] = true;
++	// Bumped whenever src changes: an image decoded for an earlier src is dropped.
++	#loadGeneration = 0;
+ 	public [PropertySymbol.naturalHeight] = 0;
+ 	public [PropertySymbol.naturalWidth] = 0;
+ 	public [PropertySymbol.loading] = 'auto';
+@@ -357,6 +359,7 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 		super[PropertySymbol.onSetAttribute](attribute, replacedAttribute);
+ 
+ 		if (attribute[PropertySymbol.name] === 'src') {
++			const generation = ++this.#loadGeneration;
+ 			const url = this.#parseUrl(attribute[PropertySymbol.value]);
+ 
+ 			if (!url) {
+@@ -367,13 +370,13 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 				return;
+ 			}
+ 
+-			if (this.#loadDataUrl(url)) {
++			if (this.#loadDataUrl(url, generation)) {
+ 				return;
+ 			}
+ 
+ 			const settings = new WindowBrowserContext(this[PropertySymbol.window]).getSettings();
+ 			if (settings?.enableImageFileLoading) {
+-				this.#loadUrlSource(this.src);
++				this.#loadUrlSource(this.src, generation);
+ 			}
+ 		}
+ 	}
+@@ -385,6 +388,7 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 		super[PropertySymbol.onRemoveAttribute](removedAttribute);
+ 
+ 		if (removedAttribute[PropertySymbol.name] === 'src') {
++			this.#loadGeneration++;
  			this[PropertySymbol.complete] = true;
+ 			this[PropertySymbol.naturalHeight] = 0;
+ 			this[PropertySymbol.naturalWidth] = 0;
+@@ -415,24 +419,37 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 	 * Loads the image from the given data URL.
+ 	 *
+ 	 * @param src Source.
++	 * @param generation The load this is (see #loadGeneration).
+ 	 * @returns True if the image was loaded, false otherwise.
+ 	 */
+-	#loadDataUrl(src: string): boolean {
++	#loadDataUrl(src: string, generation: number): boolean {
+ 		const dataUrlMatch = src.match(DATA_URL_REGEX);
+ 
+ 		if (dataUrlMatch) {
+ 			const buffer = Buffer.from(dataUrlMatch[2], 'base64');
+-			this[PropertySymbol.complete] = true;
  			this[PropertySymbol.buffer] = buffer;
 -			try {
 -				const dimensions = BufferImageSize(buffer);
-+			this[PropertySymbol.complete] = false;
-+			ImageSize(buffer).then((dimensions) => {
- 				this[PropertySymbol.naturalHeight] = dimensions.height;
- 				this[PropertySymbol.naturalWidth] = dimensions.width;
+-				this[PropertySymbol.naturalHeight] = dimensions.height;
+-				this[PropertySymbol.naturalWidth] = dimensions.width;
 -			} catch (e) {
-+				this[PropertySymbol.complete] = true;
-+				this.dispatchEvent(new this[PropertySymbol.window].Event('load'));
-+			}).catch(() => {
- 				this[PropertySymbol.naturalHeight] = 0;
- 				this[PropertySymbol.naturalWidth] = 0;
+-				this[PropertySymbol.naturalHeight] = 0;
+-				this[PropertySymbol.naturalWidth] = 0;
 -			}
 -			this.dispatchEvent(new this[PropertySymbol.window].Event('load'));
-+				this[PropertySymbol.complete] = true;
-+				this.dispatchEvent(new this[PropertySymbol.window].Event('error'));
-+			});
++			this[PropertySymbol.complete] = false;
++			// The size is read asynchronously; a src set meanwhile wins.
++			ImageSize(buffer).then(
++				(dimensions) => {
++					if (generation !== this.#loadGeneration) {
++						return;
++					}
++					this[PropertySymbol.naturalHeight] = dimensions.height;
++					this[PropertySymbol.naturalWidth] = dimensions.width;
++					this[PropertySymbol.complete] = true;
++					this.dispatchEvent(new this[PropertySymbol.window].Event('load'));
++				},
++				() => {
++					if (generation !== this.#loadGeneration) {
++						return;
++					}
++					this[PropertySymbol.naturalHeight] = 0;
++					this[PropertySymbol.naturalWidth] = 0;
++					this[PropertySymbol.complete] = true;
++					this.dispatchEvent(new this[PropertySymbol.window].Event('error'));
++				}
++			);
  			return true;
  		}
  		return false;
-@@ -484,7 +487,7 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+@@ -442,8 +459,9 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 	 * Loads the image from the given source.
+ 	 *
+ 	 * @param src Source.
++	 * @param generation The load this is (see #loadGeneration).
+ 	 */
+-	async #loadUrlSource(src: string): Promise<void> {
++	async #loadUrlSource(src: string, generation: number): Promise<void> {
+ 		this[PropertySymbol.complete] = false;
+ 		this[PropertySymbol.naturalHeight] = 0;
+ 		this[PropertySymbol.naturalWidth] = 0;
+@@ -457,6 +475,10 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 			error = <Error>e;
+ 		}
+ 
++		if (generation !== this.#loadGeneration) {
++			return;
++		}
++
+ 		if (error || !response?.ok) {
+ 			this[PropertySymbol.complete] = true;
+ 			this.dispatchEvent(new this[PropertySymbol.window].Event('error'));
+@@ -475,23 +497,34 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 		try {
+ 			buffer = await response.buffer();
+ 		} catch (e) {
++			if (generation !== this.#loadGeneration) {
++				return;
++			}
+ 			this[PropertySymbol.complete] = true;
+ 			this.dispatchEvent(new this[PropertySymbol.window].Event('error'));
+ 			return;
+ 		}
+ 
+-		this[PropertySymbol.complete] = true;
++		if (generation !== this.#loadGeneration) {
++			return;
++		}
++
  		this[PropertySymbol.buffer] = buffer;
  
++		let dimensions = { width: 0, height: 0 };
  		try {
 -			const dimensions = BufferImageSize(buffer);
-+			const dimensions = await ImageSize(buffer);
- 			this[PropertySymbol.naturalHeight] = dimensions.height;
- 			this[PropertySymbol.naturalWidth] = dimensions.width;
+-			this[PropertySymbol.naturalHeight] = dimensions.height;
+-			this[PropertySymbol.naturalWidth] = dimensions.width;
++			dimensions = await ImageSize(buffer);
  		} catch (e) {
+-			this[PropertySymbol.naturalHeight] = 0;
+-			this[PropertySymbol.naturalWidth] = 0;
++			// Undecodable: no natural size.
+ 		}
+ 
++		if (generation !== this.#loadGeneration) {
++			return;
++		}
++
++		this[PropertySymbol.naturalHeight] = dimensions.height;
++		this[PropertySymbol.naturalWidth] = dimensions.width;
++		this[PropertySymbol.complete] = true;
+ 		this.dispatchEvent(new this[PropertySymbol.window].Event('load'));
+ 	}
+ }
 diff --git a/packages/happy-dom/src/web-socket/WebSocket.ts b/packages/happy-dom/src/web-socket/WebSocket.ts
 index 3075e3a..bea5f97 100644
 --- a/packages/happy-dom/src/web-socket/WebSocket.ts

package/patches/happy-dom/0006-parse-css-escapes-in-selectors.patch

@@ -0,0 +1,115 @@
+diff --git a/packages/happy-dom/src/query-selector/SelectorParser.ts b/packages/happy-dom/src/query-selector/SelectorParser.ts
+index 60cc951..62cf4b9 100644
+--- a/packages/happy-dom/src/query-selector/SelectorParser.ts
++++ b/packages/happy-dom/src/query-selector/SelectorParser.ts
+@@ -12,10 +12,11 @@ import type { TGlobalMatchFunction } from './TGlobalMatchFunction.js';
+ /**
+  * Selector group RegExp.
+  *
+- * Group 1: Combinator (" ", ",", "+", ">", "̣~")
+- * Group 2: Parentheses or brackets.
++ * Group 1: An escaped character (e.g. "\:", "\31 "), skipped.
++ * Group 2: Combinator (" ", ",", "+", ">", "̣~")
++ * Group 3: Parentheses, brackets or quotes.
+  */
+-const SELECTOR_GROUP_REGEXP = /(\s*[\s,+>~]\s*)|([\[\]\(\)"'])/g;
++const SELECTOR_GROUP_REGEXP = /(\\[0-9a-fA-F]{1,6}\s?|\\[\s\S])|(\s*[\s,+>~]\s*)|([\[\]\(\)"'])/g;
+ 
+ /**
+  * Selector RegExp.
+@@ -45,7 +46,7 @@ const SELECTOR_GROUP_REGEXP = /(\s*[\s,+>~]\s*)|([\[\]\(\)"'])/g;
+  * Group 23: Pseudo element (e.g. "::after", "::-webkit-inner-spin-button").
+  */
+ const SELECTOR_REGEXP =
+-	/(\*)|([a-zA-Z0-9\u00A0-\uFFFF-]+)|#(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\.)+)|\.(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\.)+)|\[(([a-zA-Z0-9-_]|\\.)+)\]|\[(([a-zA-Z0-9-_]|\\.)+)\s*([~|^$*]{0,1})\s*=\s*("([^"]*)"|'([^']*)')\s*(s|i){0,1}\]|\[(([a-zA-Z0-9-_]|\\.)+)\s*([~|^$*]{0,1})\s*=\s*(([a-zA-Z0-9\u00A0-\uFFFF_¤£-]|\\.)+)\]|:([a-zA-Z-]+)\s*\(.+\)|:([a-zA-Z-]+)|::([a-zA-Z-]+)/g;
++	/(\*)|((?:[a-zA-Z0-9\u00A0-\uFFFF-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)|#(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)|\.(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)|\[(([a-zA-Z0-9-_]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\]|\[(([a-zA-Z0-9-_]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\s*([~|^$*]{0,1})\s*=\s*("((?:[^"\\]|\\[\s\S])*)"|'((?:[^'\\]|\\[\s\S])*)')\s*(s|i){0,1}\]|\[(([a-zA-Z0-9-_]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\s*([~|^$*]{0,1})\s*=\s*(([a-zA-Z0-9\u00A0-\uFFFF_¤£-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\]|:([a-zA-Z-]+)\s*\(.+\)|:([a-zA-Z-]+)|::([a-zA-Z-]+)/g;
+ 
+ /**
+  * Selector pseudo RegExp.
+@@ -55,11 +56,6 @@ const SELECTOR_REGEXP =
+  */
+ const SELECTOR_PSEUDO_REGEXP = /:([a-zA-Z-]+)|([()])/g;
+ 
+-/**
+- * Escaped Character RegExp.
+- */
+-const ESCAPED_CHARACTER_REGEXP = /\\/g;
+-
+ /**
+  * CSS Escape RegExp.
+  *
+@@ -187,6 +183,11 @@ export default class SelectorParser {
+ 
+ 		while ((match = regExp.exec(selector))) {
+ 			if (match[1]) {
++				// An escaped character (CSS Syntax §4.3.7) is part of the selector it is in,
++				// never a combinator, bracket or quote.
++				continue;
++			}
++			if (match[2]) {
+ 				// Matches combinator (" ", ",", "+", ">", "̣~")
+ 				// We should ignore combinators that are inside parentheses, brackets or apostrophes
+ 
+@@ -198,7 +199,7 @@ export default class SelectorParser {
+ 				) {
+ 					const childSelector = selector.substring(lastIndex, match.index).trim();
+ 
+-					switch (match[1].trim()) {
++					switch (match[2].trim()) {
+ 						case ',':
+ 							selectorItem = this.getSelectorGroupItem(childSelector, combinator);
+ 							if (!selectorItem) {
+@@ -262,7 +263,7 @@ export default class SelectorParser {
+ 			} else {
+ 				// Matches parentheses or brackets.
+ 
+-				switch (match[2]) {
++				switch (match[3]) {
+ 					case '(':
+ 						if (depth.singleApostrophe === 0 && depth.doubleApostrophe === 0) {
+ 							depth.parentheses++;
+@@ -365,22 +366,22 @@ export default class SelectorParser {
+ 			} else if (match[2]) {
+ 				// Matches tag name, e.g. "div"
+ 
+-				selectorItem.tagName = match[2].toUpperCase();
++				selectorItem.tagName = SelectorParser.cssUnescape(match[2]).toUpperCase();
+ 			} else if (match[3]) {
+ 				// Matches ID, e.g. "#id"
+ 
+-				selectorItem.id = match[3].replace(ESCAPED_CHARACTER_REGEXP, '');
++				selectorItem.id = SelectorParser.cssUnescape(match[3]);
+ 			} else if (match[5]) {
+ 				// Matches class names, e.g. ".class1"
+ 
+ 				selectorItem.classNames = selectorItem.classNames || [];
+-				selectorItem.classNames.push(match[5].replace(ESCAPED_CHARACTER_REGEXP, ''));
++				selectorItem.classNames.push(SelectorParser.cssUnescape(match[5]));
+ 			} else if (match[7]) {
+ 				// Matches attributes without value, e.g. [attr]
+ 
+ 				selectorItem.attributes = selectorItem.attributes || [];
+ 				selectorItem.attributes.push({
+-					name: match[7].replace(ESCAPED_CHARACTER_REGEXP, ''),
++					name: SelectorParser.cssUnescape(match[7]),
+ 					operator: null,
+ 					value: null,
+ 					modifier: null,
+@@ -393,7 +394,7 @@ export default class SelectorParser {
+ 				const unescapedValue = SelectorParser.cssUnescape(value);
+ 				selectorItem.attributes = selectorItem.attributes || [];
+ 				selectorItem.attributes.push({
+-					name: match[9].replace(ESCAPED_CHARACTER_REGEXP, ''),
++					name: SelectorParser.cssUnescape(match[9]),
+ 					operator: match[11] || null,
+ 					value: unescapedValue,
+ 					modifier: <'s'>match[15] || null,
+@@ -409,7 +410,7 @@ export default class SelectorParser {
+ 				const unescapedValue = SelectorParser.cssUnescape(match[19]);
+ 				selectorItem.attributes = selectorItem.attributes || [];
+ 				selectorItem.attributes.push({
+-					name: match[16].replace(ESCAPED_CHARACTER_REGEXP, ''),
++					name: SelectorParser.cssUnescape(match[16]),
+ 					operator: match[18] || null,
+ 					value: unescapedValue,
+ 					modifier: null,