buninu-browser 0.2.1 → 0.2.3

package/lib/style/computed-style.js

@@ -32,6 +32,7 @@ const LIST_STYLE_TYPES = new Set([
   "lower-alpha", "upper-alpha", "lower-latin", "upper-latin", "lower-roman", "upper-roman",
 ]);
 const DISPLAYS = new Set([
+  "-webkit-box", "-webkit-inline-box",
   "none", "block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "list-item",
   "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
   "table-cell", "table-caption", "table-column", "table-column-group",
@@ -50,13 +51,23 @@ 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"],
+  "-webkit-line-clamp": ["webkitLineClamp"],
+  "-webkit-box-orient": ["webkitBoxOrient"],
+  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 +100,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"]),
@@ -99,6 +114,8 @@ const INITIAL = Object.freeze({
   lineHeightFactor: null,
   textAlign: "start",
   whiteSpace: "normal",
+  webkitLineClamp: null,
+  webkitBoxOrient: "horizontal",
   listStyleType: "disc",
   margin: Object.freeze([0, 0, 0, 0]),
   padding: Object.freeze([0, 0, 0, 0]),
@@ -133,6 +150,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 +180,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 +210,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 +261,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 +448,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 +649,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 });
@@ -1062,6 +1095,13 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "display": if (DISPLAYS.has(value)) style.display = value; break;
+    case "-webkit-line-clamp":
+      if (value === "none") style.webkitLineClamp = null;
+      else if (/^[1-9]\d*$/.test(value)) style.webkitLineClamp = Number(value);
+      break;
+    case "-webkit-box-orient":
+      if (["vertical", "horizontal"].includes(value)) style.webkitBoxOrient = value;
+      break;
     case "text-decoration-line": {
       const lines = parseDecorationLines(value);
       if (lines) style.textDecorationLine = lines;
@@ -1112,13 +1152,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 +1206,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;
@@ -1186,8 +1248,11 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     case "font-size": {
       const parentSize = parentStyle?.fontSize ?? INITIAL.fontSize;
+      const specified = computedLength(value, parentSize, true);
+      const relativeSize = specified?.unit === "%" ? parentSize * specified.value / 100
+        : specified?.unit === "math" && specified.kind === "calc" ? specified.px + parentSize * specified.percent / 100 : specified;
       const length = FONT_SIZE_KEYWORDS[value] ?? (value === "larger" ? parentSize * 1.2 : value === "smaller" ? parentSize / 1.2
-        : computedLength(value, parentSize));
+        : relativeSize);
       if (length > 0) style.fontSize = length;
       break;
     }
@@ -1229,10 +1294,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 +1364,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;
         }
@@ -1314,7 +1385,7 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "padding": {
-      const box = boxLengths(value, false, style.fontSize, false);
+      const box = boxLengths(value, false, style.fontSize, false, true);
       if (box) style.padding = box;
       break;
     }
@@ -1328,8 +1399,9 @@ function setProperty(style, name, value, parentStyle = null) {
     case "padding-left": {
       const [box, side] = name.split("-");
       const isMargin = box === "margin";
-      const length = isMargin && value === "auto" ? "auto" : computedLength(value, style.fontSize);
-      if (length === "auto" || (Number.isFinite(length) && (isMargin || length >= 0))) {
+      const length = isMargin && value === "auto" ? "auto" : computedLength(value, style.fontSize, !isMargin);
+      if (length === "auto" || (!isMargin && isLength(length) && typeof length === "object"
+        && (!isPercentage(length) || length.value >= 0)) || (Number.isFinite(length) && (isMargin || length >= 0))) {
         style[box] = style[box].with(BOX_SIDES.indexOf(side), length);
       }
       break;
@@ -1878,6 +1950,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 +2014,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 +2415,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;
@@ -2325,7 +2481,7 @@ function splitTopLevel(source, separator) {
     const character = source[index];
     if (character === "(") depth++;
     else if (character === ")") depth--;
-    else if (character === separator && depth === 0) {
+    else if ((character === separator || separator === " " && /\s/.test(character)) && depth === 0) {
       parts.push(source.slice(start, index).trim());
       start = index + 1;
     }
@@ -2335,10 +2491,11 @@ function splitTopLevel(source, separator) {
 }
 
 function boxLengths(value, allowNegative, emSize, allowAuto, allowPercentage = false) {
-  const parts = value.trim().split(/\s+/).map((part) =>
+  const parts = splitTopLevel(value.trim(), " ").filter(Boolean).map((part) =>
     allowAuto && part === "auto" ? "auto" : computedLength(part, emSize, allowPercentage));
   if (parts.length < 1 || parts.length > 4 || parts.some((part) =>
-    part !== "auto" && !isPercentage(part) && (!Number.isFinite(part) || (!allowNegative && part < 0)))) return null;
+    part !== "auto" && !(allowPercentage && isLength(part) && typeof part === "object"
+      && (allowNegative || !isPercentage(part) || part.value >= 0)) && (!Number.isFinite(part) || (!allowNegative && part < 0)))) return null;
   const [top, right = top, bottom = top, left = right] = parts.length === 3
     ? [parts[0], parts[1], parts[2], parts[1]]
     : parts.length === 2

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.3",
   "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