buninu-browser 0.0.2 → 0.2.0

package/lib/screenshot-cli.js

@@ -0,0 +1,61 @@
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { createBrowser } from "./headless-shell.js";
+
+export function screenshotTargetUrl(input, { platform = process.platform, resolvePath = resolve, fileURL = pathToFileURL } = {}) {
+  const windowsPath = platform === "win32" && (/^[a-z]:/i.test(input) || input.startsWith("\\\\") || input.startsWith("//"));
+  if (windowsPath) return fileURL(resolvePath(input)).href;
+  if (/^[a-z][a-z\d+.-]*:/i.test(input)) return input;
+  if (input.includes("/") || input.startsWith(".") || (platform === "win32" && input.includes("\\"))) {
+    return fileURL(resolvePath(input)).href;
+  }
+  return `https://${input}`;
+}
+
+/** Chromium-style one-shot PNG capture, using the same renderer as CDP. */
+export async function runScreenshot(args) {
+  const screenshot = args.find((arg) => arg === "--screenshot" || arg.startsWith("--screenshot="));
+  const filename = screenshot === "--screenshot" ? "screenshot.png" : screenshot.slice("--screenshot=".length);
+  const extension = filename.match(/\.(png|jpe?g|webp)$/i)?.[1]?.toLowerCase();
+  if (!extension) throw new Error("--screenshot filename must end in .png, .jpg, .jpeg, or .webp");
+  const format = extension === "jpg" ? "jpeg" : extension;
+
+  const size = args.find((arg) => arg.startsWith("--window-size="))?.slice("--window-size=".length);
+  const waitArg = args.find((arg) => arg.startsWith("--screenshot-wait="))?.slice("--screenshot-wait=".length);
+  const waitMs = waitArg === undefined ? 0 : Number(waitArg);
+  if (waitArg !== undefined && (!/^\d+$/.test(waitArg) || !Number.isSafeInteger(waitMs))) {
+    throw new Error("--screenshot-wait must be a nonnegative number of milliseconds");
+  }
+  const match = size?.match(/^(\d+)[,x](\d+)$/i);
+  if (size && (!match || !Number.isSafeInteger(Number(match[1])) || !Number.isSafeInteger(Number(match[2]))
+    || Number(match[1]) < 1 || Number(match[2]) < 1)) {
+    throw new Error("--window-size must be WIDTH,HEIGHT with positive integers");
+  }
+
+  const urlArg = args.find((arg) => !arg.startsWith("-"));
+  if (!urlArg) throw new Error("--screenshot requires a URL");
+  const url = screenshotTargetUrl(urlArg);
+
+  const browser = await createBrowser({
+    allowHostJs: args.includes("--dangerously-allow-host-js"),
+    mobile: args.includes("--mobile"),
+    spareRenderer: false,
+  });
+  try {
+    if (match) await browser.context.resize(Number(match[1]), Number(match[2]));
+    await browser.context.navigate(url);
+    if (!browser.context.lifecycleState().includes("load")) {
+      await new Promise((done) => {
+        const unsubscribe = browser.context.onLifecycle((name) => {
+          if (name === "load") { unsubscribe(); done(); }
+        });
+      });
+    }
+    if (waitMs) await Bun.sleep(waitMs);
+    const data = await browser.context.screenshot({ format });
+    await Bun.write(filename, Buffer.from(data, "base64"));
+    console.error(`Screenshot saved to ${resolve(filename)}`);
+  } finally {
+    browser.close();
+  }
+}

package/lib/style/computed-style.js

@@ -12,8 +12,17 @@ const BLOCK_TAGS = new Set([
 ]);
 const NONE_TAGS = new Set(["HEAD", "LINK", "META", "NOFRAMES", "SCRIPT", "STYLE", "TEMPLATE", "TITLE"]);
 const INHERITED = new Set([
-  "color", "font-family", "font-size", "font-weight", "line-height", "list-style-type", "text-align", "white-space",
-  "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse",
+  "color", "color-scheme", "font-family", "font-size", "font-weight", "line-height", "list-style-type", "text-align", "white-space",
+  "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse", "pointer-events",
+]);
+// Inherited properties whose computed value is copied from the parent as is.
+// line-height is not: a unitless factor resolves against each element's own
+// font size, so it goes through its specified form (copyProperty).
+const INHERITED_FIELDS = new Map([
+  ["color", "color"], ["font-family", "fontFamily"], ["font-size", "fontSize"], ["font-weight", "fontWeight"],
+  ["list-style-type", "listStyleType"], ["text-align", "textAlign"], ["white-space", "whiteSpace"],
+  ["visibility", "visibility"], ["overflow-wrap", "overflowWrap"], ["word-break", "wordBreak"],
+  ["border-spacing", "borderSpacing"], ["border-collapse", "borderCollapse"], ["pointer-events", "pointerEvents"],
 ]);
 const LIST_STYLE_TYPES = new Set([
   "none", "disc", "circle", "square", "decimal", "decimal-leading-zero",
@@ -53,6 +62,9 @@ const PROPERTY_FIELDS = Object.freeze({
   "grid-row": ["gridRowStart", "gridRowEnd"],
   "grid-column": ["gridColumnStart", "gridColumnEnd"],
   "grid-template": ["gridTemplateColumns", "gridTemplateRows"],
+  "place-content": ["alignContent", "justifyContent"],
+  "place-items": ["alignItems", "justifyItems"],
+  "place-self": ["alignSelf", "justifySelf"],
   "line-height": ["lineHeight", "lineHeightFactor"],
   "list-style": ["listStyleType"],
   "border-radius": ["borderRadius"],
@@ -71,6 +83,7 @@ const INITIAL = Object.freeze({
   textDecorationColor: null,
   textDecorations: null,
   color: "rgba(0, 0, 0, 1)",
+  colorScheme: "light",
   backgroundColor: "rgba(0, 0, 0, 0)",
   backgroundImage: null,
   backgroundClip: "border-box",
@@ -102,6 +115,7 @@ const INITIAL = Object.freeze({
   flexDirection: "row",
   flexWrap: "nowrap",
   justifyContent: "normal",
+  alignContent: "normal",
   alignItems: "normal",
   alignSelf: "auto",
   gap: 0,
@@ -136,6 +150,8 @@ const INITIAL = Object.freeze({
   tableLayout: "auto",
   verticalAlign: "baseline",
   visibility: "visible",
+  // Hit testing only (inherited): "none" lets clicks pass through.
+  pointerEvents: "auto",
   // Breaking inside words (CSS Text 3 §5): only with these set.
   overflowWrap: "normal",
   wordBreak: "normal",
@@ -229,14 +245,23 @@ export class StyleEngine {
   #styles = new WeakMap();
   #customProperties = new WeakMap();
   #pseudoStyles = new WeakMap();
+  #document = null;
+  #sheetChanges = null;
+  /** Elements computed by the last compute(), and whether it was incremental. */
+  restyled = 0;
+  incremental = false;
   // Parsed and indexed rules for the last style sheet list and viewport:
   // restyles after script changes reuse them instead of re-parsing.
   #ruleCache = { styleSheets: null, key: "", index: null };
 
-  compute(document, styleSheets = [], viewport = {}) {
-    this.#styles = new WeakMap();
-    this.#customProperties = new WeakMap();
-    this.#pseudoStyles = new WeakMap();
+  /**
+   * Computes the document's styles. With `dirty` (elements whose subtree's
+   * styles may have changed), only those subtrees are restyled and every
+   * other element keeps the style it had: unchanged rules and viewport, the
+   * same document, and a styled root are required, else it restyles fully.
+   * `restyled` afterwards counts the elements this call computed.
+   */
+  compute(document, styleSheets = [], viewport = {}, dirty = null, selfOnly = null) {
     const previous = environment;
     environment = {
       viewportWidth: viewport.width ?? DEFAULT_ENVIRONMENT.viewportWidth,
@@ -244,9 +269,58 @@ export class StyleEngine {
       rootFontSize: DEFAULT_ENVIRONMENT.rootFontSize,
       mobile: viewport.mobile === true,
     };
+    this.restyled = 0;
     try {
+      const before = this.#ruleCache.index;
       const rules = this.#rulesFor(styleSheets);
-      if (document.documentElement) this.#visit(document.documentElement, null, null, rules);
+      const root = document.documentElement;
+      if (dirty !== null && rules !== before) {
+        const affected = this.#elementsForSheetChanges(document);
+        dirty = affected ? new Set([...dirty, ...affected]) : null;
+      }
+      const incremental = dirty !== null && this.#document === document
+        && Boolean(root) && this.#styles.has(root) && !dirty.has(root);
+      this.incremental = incremental;
+      if (!incremental) {
+        this.#styles = new WeakMap();
+        this.#customProperties = new WeakMap();
+        this.#pseudoStyles = new WeakMap();
+        this.#document = document;
+        if (root) this.#visit(root, null, null, rules);
+        return this;
+      }
+      // rem units resolve against the root's font size, which is unchanged.
+      environment = { ...environment, rootFontSize: this.#styles.get(root).fontSize };
+      // Restyle from the nearest ancestor that has a style (new subtrees have
+      // none); many roots inside one new subtree share that start.
+      const starts = new Set();
+      for (const element of topmostConnected(dirty, root)) {
+        let start = element;
+        while (start !== root && !this.#styles.has(start.parentElement)) start = start.parentElement;
+        starts.add(start);
+      }
+      if (starts.has(root) || selfOnly?.has(root)) {
+        this.#visit(root, null, null, rules);
+        return this;
+      }
+      const topmost = topmostConnected(starts, root);
+      for (const start of topmost) {
+        const parent = start.parentElement;
+        const ancestors = new Map();
+        for (let node = parent; node; node = node.parentElement) {
+          for (const key of ancestorFilterKeys(elementKeys(node))) ancestors.set(key, (ancestors.get(key) ?? 0) + 1);
+        }
+        this.#visit(start, this.#styles.get(parent), this.#customProperties.get(parent) ?? EMPTY_MAP, rules, ancestors);
+      }
+      // Elements whose own matches may have changed (:empty, :first-child,
+      // ...) and that no restyled subtree covered.
+      const covered = new Set(topmost);
+      for (const element of selfOnly ?? []) {
+        if (!element || element.nodeType !== 1 || !root.contains(element) || !this.#styles.has(element.parentElement)) continue;
+        let inside = false;
+        for (let node = element; node && !inside; node = node.parentElement) inside = covered.has(node);
+        if (!inside) this.#restyleSelf(element, rules);
+      }
     } finally {
       environment = previous;
     }
@@ -256,15 +330,37 @@ export class StyleEngine {
   #rulesFor(styleSheets) {
     const key = `${environment.viewportWidth}x${environment.viewportHeight}${environment.mobile ? ":mobile" : ""}`;
     const cache = this.#ruleCache;
+    this.#sheetChanges = null;
     if (cache.styleSheets !== styleSheets || cache.key !== key || cache.length !== styleSheets.length) {
       const counter = { order: 0 };
-      const rules = styleSheets.flatMap((source) => parseStyleSheet(source, environment, counter));
+      const perSheet = styleSheets.map((source) => parseStyleSheet(source, environment, counter));
+      const rules = perSheet.flat();
       if (counter.layers) rankLayers(counter.layers, rules);
-      this.#ruleCache = { styleSheets, key, length: styleSheets.length, index: new RuleIndex(rules) };
+      // Sheets added or removed since the last list (same viewport): only the
+      // elements their rules match can change style, every other element
+      // keeps the same rules in the same relative order.
+      if (cache.index && cache.key === key) this.#sheetChanges = diffSheets(cache, styleSheets, perSheet);
+      this.#ruleCache = { styleSheets, key, length: styleSheets.length, index: new RuleIndex(rules), perSheet };
     }
     return this.#ruleCache.index;
   }
 
+  /** Elements matched by the rules of added or removed sheets, or null when that is unknown. */
+  #elementsForSheetChanges(document) {
+    const changes = this.#sheetChanges;
+    // Each selector is a document-wide search: past a few hundred, a full
+    // restyle is cheaper (a large stylesheet arriving late, for example).
+    if (!changes || changes.rules.length > MAX_SHEET_CHANGE_RULES) return null;
+    const elements = new Set();
+    const selectors = new Set(changes.rules.map((rule) => rule.selector));
+    for (const selector of selectors) {
+      let matched;
+      try { matched = document.querySelectorAll(selector); } catch { continue; } // invalid: matches nothing
+      for (const element of matched) elements.add(element);
+    }
+    return elements;
+  }
+
   get(element) {
     return this.#styles.get(element) ?? INITIAL;
   }
@@ -274,8 +370,8 @@ export class StyleEngine {
     return this.#pseudoStyles.get(element)?.[pseudo] ?? null;
   }
 
-  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new Map()) {
-    const keys = elementKeys(element);
+  /** Computes and stores one element's style and ::before/::after styles. */
+  #styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors) {
     // Inline style takes part in the cascade before custom properties are
     // resolved: style="--x: ..." must win over stylesheet values of --x.
     const declarations = withInlineStyle(element, cascadeDeclarations(element, rules, null, keys, ancestors));
@@ -295,6 +391,18 @@ export class StyleEngine {
       if (pseudoStyle.content != null && pseudoStyle.display !== "none") pseudoStyles[pseudo] = pseudoStyle;
     }
     if (pseudoStyles.before || pseudoStyles.after) this.#pseudoStyles.set(element, pseudoStyles);
+    else this.#pseudoStyles.delete(element);
+    this.restyled++;
+    return { style, customProperties };
+  }
+
+  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new Map()) {
+    const keys = elementKeys(element);
+    const { style, customProperties } = this.#styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors);
+    this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
+  }
+
+  #visitChildren(element, keys, style, customProperties, rules, ancestors) {
     // The element is an ancestor of everything below it.
     const own = ancestorFilterKeys(keys);
     for (const key of own) ancestors.set(key, (ancestors.get(key) ?? 0) + 1);
@@ -305,9 +413,94 @@ export class StyleEngine {
       else ancestors.delete(key);
     }
   }
+
+  /** Ancestor filter counts for the elements above `element`. */
+  #ancestorsOf(element) {
+    const ancestors = new Map();
+    for (let node = element.parentElement; node; node = node.parentElement) {
+      for (const key of ancestorFilterKeys(elementKeys(node))) ancestors.set(key, (ancestors.get(key) ?? 0) + 1);
+    }
+    return ancestors;
+  }
+
+  /**
+   * Restyles one element; only when its style (or ::before/::after, or the
+   * custom properties it passes down) changed does its subtree follow.
+   */
+  #restyleSelf(element, rules) {
+    const parent = element.parentElement;
+    const before = { style: this.#styles.get(element), pseudo: this.#pseudoStyles.get(element), custom: this.#customProperties.get(element) };
+    const keys = elementKeys(element);
+    const ancestors = this.#ancestorsOf(element);
+    const { style, customProperties } = this.#styleOne(element, this.#styles.get(parent), this.#customProperties.get(parent) ?? EMPTY_MAP, rules, keys, ancestors);
+    const pseudo = this.#pseudoStyles.get(element);
+    if (sameValue(before.style, style) && sameValue(before.pseudo ?? null, pseudo ?? null) && sameCustom(before.custom, customProperties)) {
+      // Unchanged: keep the previous objects so later comparisons stay cheap.
+      this.#styles.set(element, before.style);
+      return;
+    }
+    this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
+  }
+}
+
+/** Structural equality of computed style values (frozen objects and arrays). */
+function sameValue(left, right) {
+  if (left === right) return true;
+  if (!left || !right || typeof left !== "object" || typeof right !== "object") return false;
+  const keys = Object.keys(left);
+  if (keys.length !== Object.keys(right).length) return false;
+  return keys.every((key) => sameValue(left[key], right[key]));
+}
+
+function sameCustom(left, right) {
+  if (left === right) return true;
+  if (!left || !right || left.size !== right.size) return false;
+  for (const [name, value] of left) if (right.get(name) !== value) return false;
+  return true;
 }
 
 const EMPTY_MAP = new Map();
+const MAX_SHEET_CHANGE_RULES = 300;
+
+/**
+ * Rules from sheets present in only one of two sheet lists (by text), or null
+ * when such a change can reorder other rules: @layer declarations rank
+ * layers by first appearance and @property changes inheritance.
+ */
+function diffSheets(previous, styleSheets, perSheet) {
+  const remaining = new Map();
+  previous.styleSheets.forEach((source, index) => {
+    const list = remaining.get(source);
+    if (list) list.push(previous.perSheet[index]); else remaining.set(source, [previous.perSheet[index]]);
+  });
+  const rules = [];
+  const risky = (source) => /@layer\b|@property\b/i.test(source);
+  for (let index = 0; index < styleSheets.length; index++) {
+    const source = styleSheets[index];
+    const list = remaining.get(source);
+    if (list?.length) { list.pop(); continue; }
+    if (risky(source)) return null;
+    rules.push(...perSheet[index]);
+  }
+  for (const [source, lists] of remaining) {
+    if (!lists.length) continue;
+    if (risky(source)) return null;
+    for (const list of lists) rules.push(...list);
+  }
+  return { rules };
+}
+
+/** The connected elements of `elements` that are not inside another of them. */
+export function topmostConnected(elements, root) {
+  const result = [];
+  for (const element of elements) {
+    if (!element || element.nodeType !== 1 || !root.contains(element)) continue;
+    let covered = false;
+    for (let node = element.parentElement; node && !covered; node = node.parentElement) covered = elements.has(node);
+    if (!covered) result.push(element);
+  }
+  return result;
+}
 
 /** The cascaded declarations with the element's style attribute applied on top. */
 function withInlineStyle(element, declarations) {
@@ -342,8 +535,12 @@ function withCustomProperties(inherited, declarations) {
 
 export function computeElementStyle(element, parentStyle = null, authorDeclarations = null, customProperties = new Map()) {
   const values = { ...INITIAL };
-  for (const property of INHERITED) {
-    if (parentStyle) copyProperty(values, property, parentStyle);
+  if (parentStyle) {
+    for (const property of INHERITED) {
+      const field = INHERITED_FIELDS.get(property);
+      if (field) values[field] = parentStyle[field];
+      else copyProperty(values, property, parentStyle);
+    }
   }
   // vertical-align is not inherited, except through the table UA rules' "inherit".
   values.verticalAlign = "baseline";
@@ -381,13 +578,16 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   } else if (fontSize) {
     applyDeclaration(values, fontSize, customProperties, parentStyle);
   }
+  // light-dark() depends on the used scheme regardless of declaration order.
+  const colorScheme = declarations.get("color-scheme");
+  if (colorScheme) applyDeclaration(values, colorScheme, customProperties, parentStyle);
   // Apply in cascade order so a later shorthand overrides earlier longhands and vice versa.
   const ordered = [...declarations.values()].sort((left, right) => compareCascade(
     { important: false, specificity: 0, order: 0, ...left, important: Boolean(left.important) },
     { important: false, specificity: 0, order: 0, ...right, important: Boolean(right.important) },
   ));
   for (const declaration of ordered) {
-    if (declaration.name.startsWith("--") || declaration.name === "font-size") continue;
+    if (declaration.name.startsWith("--") || declaration.name === "font-size" || declaration.name === "color-scheme") continue;
     // The shorthand's size was settled above; its other parts apply in order.
     applyDeclaration(values, declaration.name === "font" ? { ...declaration, name: "font-parts" } : declaration, customProperties, parentStyle);
   }
@@ -607,9 +807,16 @@ function parseFontShorthand(value) {
       weight = lower === "bolder" ? "700" : lower === "lighter" ? "300" : lower;
       continue;
     }
-    // The size, optionally with /line-height, then the family list.
-    const [size, lineHeight] = token.split("/");
-    const family = tokens.slice(index + 1).join(" ").trim();
+    // The size, optionally with /line-height (spaces around "/" allowed),
+    // then the family list.
+    let [size, lineHeight] = token.split("/");
+    let rest = index + 1;
+    if (lineHeight === "") lineHeight = tokens[rest++]; // "14px/ 1.5"
+    else if (lineHeight === undefined && tokens[rest] === "/") { // "14px / 1.5"
+      lineHeight = tokens[rest + 1];
+      rest += 2;
+    } else if (lineHeight === undefined && tokens[rest]?.startsWith("/")) lineHeight = tokens[rest++].slice(1); // "14px /1.5"
+    const family = tokens.slice(rest).join(" ").trim();
     if (!family || !(FONT_SIZE_KEYWORDS[size] || /^[\d.]/.test(size) || /^(?:calc|clamp|min|max)\(/.test(size))) return null;
     return { size, lineHeight: lineHeight || null, weight, family };
   }
@@ -751,6 +958,13 @@ function setProperty(style, name, value, parentStyle = null) {
   }
   if (typeof value !== "string") return;
   switch (name) {
+    case "color-scheme": {
+      const schemes = value.toLowerCase().split(/\s+/).filter((part) => part !== "only");
+      if (schemes.every((part) => ["normal", "light", "dark"].includes(part))) {
+        style.colorScheme = schemes.includes("light") || !schemes.includes("dark") ? "light" : "dark";
+      }
+      break;
+    }
     case "display": if (DISPLAYS.has(value)) style.display = value; break;
     case "text-decoration-line": {
       const lines = parseDecorationLines(value);
@@ -790,6 +1004,10 @@ function setProperty(style, name, value, parentStyle = null) {
     case "visibility":
       if (["visible", "hidden", "collapse"].includes(value)) style.visibility = value === "collapse" ? "hidden" : value;
       break;
+    // SVG-only values (visiblePainted, fill, ...) hit like auto for HTML boxes.
+    case "pointer-events":
+      if (/^[a-z]+$/i.test(value)) style.pointerEvents = value === "none" ? "none" : "auto";
+      break;
     case "opacity": {
       const number = /^([+-]?(?:\d+\.?\d*|\.\d+))(%?)$/.exec(value);
       if (number) style.opacity = Math.min(1, Math.max(0, Number(number[1]) / (number[2] ? 100 : 1)));
@@ -833,12 +1051,12 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "color": {
-      const color = Bun.color(value, "rgba");
+      const color = resolvedColor(value, style.colorScheme);
       if (color) style.color = color;
       break;
     }
     case "background-color": {
-      const color = Bun.color(value, "rgba");
+      const color = resolvedColor(value, style.colorScheme);
       if (color) style.backgroundColor = color;
       break;
     }
@@ -847,7 +1065,7 @@ function setProperty(style, name, value, parentStyle = null) {
       const layers = splitTopLevel(value, ",");
       const images = layers.filter((layer) => GRADIENT.test(layer));
       const color = splitTopLevel(layers.at(-1) ?? "", " ")
-        .map((token) => Bun.color(token, "rgba"))
+        .map((token) => resolvedColor(token, style.colorScheme))
         .find(Boolean);
       style.backgroundColor = color ?? INITIAL.backgroundColor;
       style.backgroundImage = images.length ? images.join(", ") : null;
@@ -1097,6 +1315,24 @@ function setProperty(style, name, value, parentStyle = null) {
       if (["normal", "start", "end", "center", "space-between", "space-around", "space-evenly"].includes(justify)) style.justifyContent = justify;
       break;
     }
+    case "align-content": {
+      const alignment = FLEX_ALIGNMENT[value] ?? value;
+      if (["normal", "stretch", "start", "end", "center", "space-between", "space-around", "space-evenly"].includes(alignment)) {
+        style.alignContent = alignment;
+      }
+      break;
+    }
+    // CSS Box Alignment 3 §5.1/§6.1/§6.2: <align> [<justify>]; one value sets both.
+    case "place-content":
+    case "place-items":
+    case "place-self": {
+      const [align, justify = align] = splitTopLevel(value, " ").filter(Boolean);
+      if (!align) break;
+      const part = name.slice("place-".length);
+      setProperty(style, `align-${part}`, align, parentStyle);
+      setProperty(style, `justify-${part}`, justify, parentStyle);
+      break;
+    }
     case "align-items": {
       const alignment = FLEX_ALIGNMENT[value] ?? value;
       if (["normal", "stretch", "start", "end", "center", "baseline"].includes(alignment)) style.alignItems = alignment;
@@ -1678,6 +1914,7 @@ function cssValue(style, name) {
     "line-height": style.lineHeightFactor != null ? String(style.lineHeightFactor)
       : style.lineHeight == null ? "normal" : `${style.lineHeight}px`,
     "list-style-type": style.listStyleType,
+    "pointer-events": style.pointerEvents,
     "text-align": style.textAlign,
     "white-space": style.whiteSpace,
   })[name] ?? style[name];
@@ -1988,6 +2225,17 @@ function flexShorthand(value, fontSize) {
   };
 }
 
+function resolvedColor(value, scheme) {
+  const match = /^light-dark\((.*)\)$/is.exec(value.trim());
+  if (match) {
+    const choices = splitTopLevel(match[1], ",");
+    if (choices.length !== 2) return null;
+    return resolvedColor(choices[scheme === "dark" ? 1 : 0], scheme);
+  }
+  const color = Bun.color(value, "rgba");
+  return /^rgba\(/.test(color ?? "") ? color : null;
+}
+
 function splitTopLevel(source, separator) {
   const parts = [];
   let depth = 0;

package/lib/user-agent.js

@@ -0,0 +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.
+export const CHROMIUM_VERSION = "154.0.8037.57";
+
+export function desktopUserAgent(platform = process.platform, arch = process.arch) {
+  const system = platform === "darwin" ? "Macintosh; Intel Mac OS X 10_15_7"
+    : platform === "win32" ? "Windows NT 10.0; Win64; x64"
+    : `X11; Linux ${arch === "arm64" ? "aarch64" : "x86_64"}`;
+  return `Mozilla/5.0 (${system}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36`;
+}
+
+export const DESKTOP_USER_AGENT = desktopUserAgent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",

package/patches/happy-dom/0003-defer-script-events-to-renderer.patch

@@ -0,0 +1,40 @@
+diff --git a/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts b/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts
+index f439646..ce2dbe5 100644
+--- a/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts
++++ b/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts
+@@ -566,16 +566,7 @@ export default class HTMLScriptElement extends HTMLElement {
+ 			browserSettings &&
+ 			(browserSettings.disableJavaScriptFileLoading || !browserSettings.enableJavaScriptEvaluation)
+ 		) {
+-			if (browserSettings.handleDisabledFileLoadingAsSuccess) {
+-				this.dispatchEvent(new Event('load'));
+-			} else {
+-				const error = new window.DOMException(
+-					`Failed to load module "${url}". JavaScript file loading is disabled.`,
+-					DOMExceptionNameEnum.notSupportedError
+-				);
+-				browserFrame.page.console.error(error);
+-				this.dispatchEvent(new Event('error'));
+-			}
++			// The renderer owns script fetching and dispatches load/error after execution.
+ 			return;
+ 		}
+ 
+@@ -647,16 +638,7 @@ export default class HTMLScriptElement extends HTMLElement {
+ 			browserSettings &&
+ 			(browserSettings.disableJavaScriptFileLoading || !browserSettings.enableJavaScriptEvaluation)
+ 		) {
+-			if (browserSettings.handleDisabledFileLoadingAsSuccess) {
+-				this.dispatchEvent(new Event('load'));
+-			} else {
+-				const error = new window.DOMException(
+-					`Failed to load script "${absoluteURL}". JavaScript file loading is disabled.`,
+-					DOMExceptionNameEnum.notSupportedError
+-				);
+-				browserFrame.page.console.error(error);
+-				this.dispatchEvent(new Event('error'));
+-			}
++			// The renderer owns script fetching and dispatches load/error after execution.
+ 			return;
+ 		}
+ 

package/patches/happy-dom/0004-insert-adjacent-html-in-order.patch

@@ -0,0 +1,19 @@
+diff --git a/packages/happy-dom/src/nodes/element/Element.ts b/packages/happy-dom/src/nodes/element/Element.ts
+--- a/packages/happy-dom/src/nodes/element/Element.ts
++++ b/packages/happy-dom/src/nodes/element/Element.ts
+@@ -706,12 +706,9 @@
+ 	 * @param text HTML string to insert.
+ 	 */
+ 	public insertAdjacentHTML(position: InsertAdjacentPosition, text: string): void {
+-		const childNodes = new HTMLParser(this[PropertySymbol.window]).parse(text)[
+-			PropertySymbol.nodeArray
+-		];
+-		while (childNodes.length) {
+-			this.insertAdjacentElement(position, childNodes[0]);
+-		}
++		// Insert the parsed fragment as a whole: inserting its nodes one at a
++		// time at "afterbegin" or "afterend" reversed their order.
++		this.insertAdjacentElement(position, new HTMLParser(this[PropertySymbol.window]).parse(text));
+ 	}
+ 
+ 	/**

package/patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch

@@ -0,0 +1,43 @@
+diff --git a/packages/happy-dom/src/query-selector/QuerySelector.ts b/packages/happy-dom/src/query-selector/QuerySelector.ts
+--- a/packages/happy-dom/src/query-selector/QuerySelector.ts
++++ b/packages/happy-dom/src/query-selector/QuerySelector.ts
+@@ -373,7 +373,10 @@ export default class QuerySelector {
+ 			);
+ 		}
+ 
+-		const cachedResult = element[PropertySymbol.cache].matches.get(selector);
++		// A :has() match depends on the whole subtree, which no affected-cache
++		// registration covers, so it is not cached.
++		const cacheable = !selector.includes(':has(');
++		const cachedResult = cacheable ? element[PropertySymbol.cache].matches.get(selector) : null;
+ 
+ 		if (cachedResult) {
+ 			if (cachedResult.result !== null) {
+@@ -386,9 +389,11 @@ export default class QuerySelector {
+ 			result: { match: null }
+ 		};
+ 
+-		element[PropertySymbol.cache].matches.set(selector, cachedItem);
++		if (cacheable) {
++			element[PropertySymbol.cache].matches.set(selector, cachedItem);
++		}
+ 
+-		if (element[PropertySymbol.isConnected]) {
++		if (cacheable && element[PropertySymbol.isConnected]) {
+ 			// Document is affected for the ":target" selector
+ 			(element[PropertySymbol.ownerDocument] || element)[PropertySymbol.affectsCache].push(
+ 				cachedItem
+@@ -462,6 +467,13 @@ export default class QuerySelector {
+ 			return null;
+ 		}
+ 
++		// Structural pseudo-classes and sibling combinators read the parent's
++		// child list, whose changes are reported on the parent.
++		const parent = element.parentNode;
++		if (parent) {
++			this.affectsCache(<Element>parent, cachedItem);
++		}
++
+ 		const result = selectorItem.match(scope, element, ignoreErrors);
+ 
+ 		if (result) {