buninu-browser 0.1.0 → 0.2.1

package/lib/style/selector-keys.js

@@ -0,0 +1,302 @@
+/**
+ * The keys a stylesheet selector is indexed by (see RuleIndex in
+ * computed-style.js): the subject compound's bucket keys, and the keys its
+ * ancestors must carry for the ancestor filter.
+ *
+ * Selectors are scanned by character code and position: names are cut out
+ * of the selector only for the keys returned, without regular expressions or
+ * intermediate substrings, as tens of thousands of selectors are indexed for
+ * every new document.
+ */
+
+const BACKSLASH = 0x5c, QUOTE = 0x22, APOSTROPHE = 0x27, OPEN_PAREN = 0x28, CLOSE_PAREN = 0x29;
+const OPEN_BRACKET = 0x5b, CLOSE_BRACKET = 0x5d, SPACE = 0x20, TAB = 0x09, LINE_FEED = 0x0a, CARRIAGE_RETURN = 0x0d;
+const FORM_FEED = 0x0c, GREATER = 0x3e, PLUS = 0x2b, TILDE = 0x7e, HASH = 0x23, PERIOD = 0x2e, COLON = 0x3a;
+const COMMA = 0x2c, PIPE = 0x7c, HYPHEN = 0x2d, UNDERSCORE = 0x5f;
+
+// The selector being analyzed; the functions below take positions in it.
+let text = "";
+
+// Scratch results, reused instead of allocated per selector and compound:
+// one per level of :is() nesting, as an outer result stays in use while the
+// alternatives inside it are analyzed.
+const partsPool = [];
+const keysPool = [];
+
+function scratchParts(level) {
+  const parts = partsPool[level] ??= { starts: [], ends: [], combinators: [] };
+  parts.starts.length = parts.ends.length = parts.combinators.length = 0;
+  return parts;
+}
+
+function scratchKeys(level) {
+  const keys = keysPool[level] ??= { ids: [], classes: [], attrs: [], tag: [], pseudo: [] };
+  keys.ids.length = keys.classes.length = keys.attrs.length = keys.tag.length = keys.pseudo.length = 0;
+  return keys;
+}
+
+/**
+ * A selector's index keys. `subject` is null when the selector is not
+ * understood or its subject has no key (the rule then goes to the universal
+ * bucket); `ancestors` lists filter keys: "tag", "#id", ".class", "[attr".
+ * @returns {{ subject: { kind: "id" | "class" | "attr" | "tag", name: string }[] | null, ancestors: string[] }}
+ */
+export function selectorKeys(selector) {
+  text = selector;
+  const parts = selectorParts(0, selector.length, 0);
+  if (!parts) return { subject: null, ancestors: [] };
+  const last = parts.starts.length - 1;
+  const subject = subjectKeys(parts.starts[last], parts.ends[last], 1);
+  const ancestors = new Set();
+  for (let index = 0; index < last; index++) {
+    // Only compounds whose right-hand combinator is descendant or child are
+    // ancestors of the subject (a sibling's parent is the subject's parent).
+    const combinator = parts.combinators[index];
+    if (combinator !== SPACE && combinator !== GREATER) continue;
+    const keys = compoundKeys(parts.starts[index], parts.ends[index], 0);
+    if (keys.tag.length) ancestors.add(name(keys.tag, true));
+    for (let at = 0; at < keys.ids.length; at += 3) ancestors.add(`#${name(keys.ids, false, at)}`);
+    for (let at = 0; at < keys.classes.length; at += 3) ancestors.add(`.${name(keys.classes, false, at)}`);
+    for (let at = 0; at < keys.attrs.length; at += 3) ancestors.add(`[${name(keys.attrs, true, at)}`);
+  }
+  return { subject, ancestors: [...ancestors] };
+}
+
+/**
+ * Splits [start, end) into compounds and the combinators between them (" ",
+ * ">", "+", "~"), ignoring anything inside (), [] and quotes. Returns null
+ * for selectors this does not understand. As before this module existed, an
+ * escape or a quoted string does not take a pending combinator, so
+ * `combinators` may be shorter than `starts` minus one.
+ */
+function selectorParts(start, end, level) {
+  const parts = scratchParts(level);
+  const { starts, ends, combinators } = parts;
+  let current = -1;
+  let pending = 0;
+  let depth = 0;
+  for (let index = start; index < end; index++) {
+    const code = text.charCodeAt(index);
+    if (code === BACKSLASH) {
+      if (current < 0) current = index;
+      index++;
+      continue;
+    }
+    if (code === QUOTE || code === APOSTROPHE) {
+      const close = text.indexOf(text[index], index + 1);
+      if (close < 0 || close >= end) return null;
+      if (current < 0) current = index;
+      index = close;
+      continue;
+    }
+    if (code === OPEN_PAREN || code === OPEN_BRACKET) depth++;
+    else if (code === CLOSE_PAREN || code === CLOSE_BRACKET) depth--;
+    if (depth === 0 && (code === SPACE || code === GREATER || code === PLUS || code === TILDE
+      || code === TAB || code === LINE_FEED || code === CARRIAGE_RETURN || code === FORM_FEED)) {
+      if (current >= 0) {
+        starts.push(current);
+        ends.push(index);
+        current = -1;
+        pending = SPACE;
+      }
+      if (code === GREATER || code === PLUS || code === TILDE) {
+        if (pending === 0 && starts.length === 0) return null;
+        pending = code;
+      }
+      continue;
+    }
+    if (pending !== 0) {
+      combinators.push(pending);
+      pending = 0;
+    }
+    if (current < 0) current = index;
+  }
+  if (depth !== 0) return null;
+  if (current >= 0) {
+    starts.push(current);
+    ends.push(end);
+  } else if (pending !== 0 && starts.length) return null;
+  return starts.length ? parts : null;
+}
+
+/**
+ * Keys of the compound [start, end), from its parts outside (): ids,
+ * classes and attribute names as flat [start, end, escaped] triples, the
+ * type as one (empty when none), and pseudo-classes as [name start, name
+ * end, colon] triples.
+ */
+function compoundKeys(start, end, level) {
+  const keys = scratchKeys(level);
+  const pipe = text.indexOf("|", start);
+  if (pipe !== -1 && pipe < end) return keys;
+  if (start < end && isAlpha(text.charCodeAt(start))) {
+    let tagEnd = start + 1;
+    while (tagEnd < end && isNameCode(text.charCodeAt(tagEnd))) tagEnd++;
+    keys.tag.push(start, tagEnd, 0);
+  }
+  let depth = 0;
+  for (let index = start; index < end; index++) {
+    const code = text.charCodeAt(index);
+    if (code === BACKSLASH) {
+      index++;
+      continue;
+    }
+    if (code === OPEN_PAREN) {
+      depth++;
+      continue;
+    }
+    if (code === CLOSE_PAREN) {
+      depth--;
+      continue;
+    }
+    if (depth > 0) continue;
+    if (code === OPEN_BRACKET) {
+      let nameStart = index + 1;
+      while (nameStart < end && isSpace(text.charCodeAt(nameStart))) nameStart++;
+      let nameEnd = nameStart;
+      while (nameEnd < end && isNameCode(text.charCodeAt(nameEnd))) nameEnd++;
+      if (nameEnd > nameStart) keys.attrs.push(nameStart, nameEnd, 0);
+      // Skip to the closing bracket; quoted values may contain "]", "#" or ".".
+      let quote = 0;
+      for (index++; index < end; index++) {
+        const inner = text.charCodeAt(index);
+        if (inner === BACKSLASH) index++;
+        else if (quote) {
+          if (inner === quote) quote = 0;
+        } else if (inner === QUOTE || inner === APOSTROPHE) quote = inner;
+        else if (inner === CLOSE_BRACKET) break;
+      }
+    } else if (code === HASH || code === PERIOD) {
+      const identifier = leadingIdentifier(index + 1, end);
+      const first = text.charCodeAt(index + 1);
+      // A class name cannot start with a digit; an id may.
+      if (identifier && !(code === PERIOD && first >= 0x30 && first <= 0x39)) {
+        (code === HASH ? keys.ids : keys.classes).push(index + 1, identifier.end, identifier.escaped);
+      }
+    } else if (code === COLON) {
+      let nameStart = index + 1;
+      if (nameStart < end && text.charCodeAt(nameStart) === COLON) nameStart++;
+      let nameEnd = nameStart;
+      while (nameEnd < end && isNameCode(text.charCodeAt(nameEnd))) nameEnd++;
+      if (nameEnd > nameStart) keys.pseudo.push(nameStart, nameEnd, index);
+    }
+  }
+  return keys;
+}
+
+/**
+ * The identifier at `start` (word characters, "-", non-ASCII, and escapes
+ * other than hex ones), or null when absent or followed by a hex escape.
+ */
+function leadingIdentifier(start, end) {
+  let index = start;
+  let escaped = 0;
+  while (index < end) {
+    const code = text.charCodeAt(index);
+    if (isNameCode(code) || code >= 0x80) index++;
+    else if (code === BACKSLASH && index + 1 < end && !isHexDigit(text.charCodeAt(index + 1)) && !isSpace(text.charCodeAt(index + 1))) {
+      index += 2;
+      escaped = 1;
+    } else break;
+  }
+  if (index === start || (index < end && text.charCodeAt(index) === BACKSLASH)) return null;
+  return { end: index, escaped };
+}
+
+/**
+ * Bucket keys for the subject compound: one id, class, attribute or type key,
+ * or one per alternative of an :is()/:where() whose alternatives all have one.
+ */
+function subjectKeys(start, end, level) {
+  const keys = compoundKeys(start, end, level);
+  if (keys.ids.length) return [{ kind: "id", name: name(keys.ids, false) }];
+  if (keys.classes.length) return [{ kind: "class", name: name(keys.classes, false) }];
+  if (keys.attrs.length) return [{ kind: "attr", name: name(keys.attrs, true) }];
+  if (keys.tag.length) return [{ kind: "tag", name: name(keys.tag, true) }];
+  const pseudo = keys.pseudo;
+  for (let at = 0; at < pseudo.length; at += 3) {
+    if (equalsLowerCase(pseudo[at], pseudo[at + 1], "root")) return [{ kind: "tag", name: "html" }];
+  }
+  for (let at = 0; at < pseudo.length; at += 3) {
+    const nameStart = pseudo[at];
+    const nameEnd = pseudo[at + 1];
+    if (!equalsLowerCase(nameStart, nameEnd, "is") && !equalsLowerCase(nameStart, nameEnd, "where")
+      && !equalsLowerCase(nameStart, nameEnd, "matches") && !equalsLowerCase(nameStart, nameEnd, "-webkit-any")) continue;
+    const open = text.indexOf("(", pseudo[at + 2]);
+    const close = open < 0 || open >= end ? -1 : matchingParenthesis(open, end);
+    if (close < 0) return null;
+    const result = [];
+    let depth = 0;
+    let from = open + 1;
+    for (let index = open + 1; index <= close; index++) {
+      // The closing parenthesis ends the last alternative.
+      const code = index < close ? text.charCodeAt(index) : COMMA;
+      if (index < close && code === OPEN_PAREN) depth++;
+      else if (index < close && code === CLOSE_PAREN) depth--;
+      else if (code === COMMA && (depth === 0 || index === close)) {
+        let alternativeStart = from;
+        let alternativeEnd = index;
+        from = index + 1;
+        while (alternativeStart < alternativeEnd && isSpace(text.charCodeAt(alternativeStart))) alternativeStart++;
+        while (alternativeEnd > alternativeStart && isSpace(text.charCodeAt(alternativeEnd - 1))) alternativeEnd--;
+        if (alternativeStart === alternativeEnd) continue;
+        // Only simple alternatives: complex ones inside :is() are left to the
+        // selector engine unindexed, so indexing never changes a result.
+        const parts = selectorParts(alternativeStart, alternativeEnd, level);
+        const inner = parts?.starts.length === 1 ? subjectKeys(parts.starts[0], parts.ends[0], level + 1) : null;
+        if (!inner) return null;
+        result.push(...inner);
+      }
+    }
+    return result.length ? result : null;
+  }
+  return null;
+}
+
+function matchingParenthesis(open, end) {
+  let depth = 0;
+  for (let index = open; index < end; index++) {
+    const code = text.charCodeAt(index);
+    if (code === BACKSLASH) index++;
+    else if (code === OPEN_PAREN) depth++;
+    else if (code === CLOSE_PAREN && --depth === 0) return index;
+  }
+  return -1;
+}
+
+/** The name of a [start, end, escaped] triple at `at`: unescaped, lowercased for types and attributes. */
+function name(triple, lowerCase, at = 0) {
+  let value = text.slice(triple[at], triple[at + 1]);
+  if (triple[at + 2]) value = value.replace(/\\(.)/g, "$1");
+  return lowerCase ? value.toLowerCase() : value;
+}
+
+function equalsLowerCase(start, end, expected) {
+  if (end - start !== expected.length) return false;
+  for (let index = 0; index < expected.length; index++) {
+    let code = text.charCodeAt(start + index);
+    if (code >= 0x41 && code <= 0x5a) code += 0x20;
+    if (code !== expected.charCodeAt(index)) return false;
+  }
+  return true;
+}
+
+function isAlpha(code) {
+  return (code >= 0x61 && code <= 0x7a) || (code >= 0x41 && code <= 0x5a);
+}
+
+/** [\w-]: ASCII letters, digits, "_" and "-". */
+function isNameCode(code) {
+  return isAlpha(code) || (code >= 0x30 && code <= 0x39) || code === UNDERSCORE || code === HYPHEN;
+}
+
+function isHexDigit(code) {
+  return (code >= 0x30 && code <= 0x39) || (code >= 0x61 && code <= 0x66) || (code >= 0x41 && code <= 0x46);
+}
+
+/** JavaScript white space: what /\s/ matches and trim() removes. */
+function isSpace(code) {
+  return code === SPACE || (code >= TAB && code <= CARRIAGE_RETURN) || code === 0xa0 || code === 0x1680
+    || (code >= 0x2000 && code <= 0x200a) || code === 0x2028 || code === 0x2029 || code === 0x202f
+    || code === 0x205f || code === 0x3000 || code === 0xfeff;
+}

package/lib/style/selector-traits.js

@@ -0,0 +1,240 @@
+/**
+ * What a style sheet's selectors make sensitive to DOM changes, for the
+ * renderer's style invalidation (see selectorTraitsFor in page-renderer.js).
+ */
+
+/** One sheet's selector traits (sibling combinators, :has(), structural pseudo-classes, invalidation features). */
+export function sheetTraits(sheet) {
+  const text = String(sheet).replace(/\/\*[\s\S]*?\*\//g, "");
+  const plain = text.replace(/\[[^\]]*\]/g, "[]").replace(/\{[^}]*\}/g, "{}");
+  const sibling = /[^\s~|^$*=\[]\s*[+~]\s*[^\s=]/.test(plain);
+  const hasCompounds = new Set();
+  let hasSiblings = false;
+  const selectorsOnly = text.replace(/\{[^}]*\}/g, "{}");
+  for (const block of hasBlocks(selectorsOnly)) {
+    for (const selector of splitTopLevelText(block.slice(0, -1), ",")) {
+      for (const compound of compoundsOf(selector)) {
+        if (!compound.includes(":has(")) continue;
+        hasCompounds.add(compound.replace(/::[\w-]+(\([^)]*\))?$/, ""));
+        if (/:has\(\s*[+~]/.test(compound)) hasSiblings = true;
+      }
+    }
+  }
+  // Structural pseudo-classes: which siblings a child list change can
+  // affect, and the compounds where they are not the subject (".a:last-child .b"),
+  // whose matches decide whether a sibling's subtree must restyle too.
+  const structural = /:(?:nth-child|nth-last-child|first-child|last-child|only-child|nth-of-type|nth-last-of-type|first-of-type|last-of-type|only-of-type)\b/;
+  const structuralCompounds = new Set();
+  for (const block of selectorsOnly.matchAll(/[^{}]*\{/g)) {
+    if (!structural.test(block[0])) continue;
+    for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
+      const compounds = compoundsOf(selector);
+      for (const compound of compounds.slice(0, -1)) if (structural.test(compound)) structuralCompounds.add(compound);
+    }
+  }
+  // Invalidation features (class ".x", id "#x", attribute "[x", tag "t:x",
+  // state ":state", anything "*") of compounds that are not a selector's
+  // subject: left of a descendant/child combinator, a change to them can
+  // restyle the element's subtree; left of + / ~, its later siblings.
+  const descendantFeatures = new Set();
+  const siblingFeatures = new Set();
+  const descendantStateCompounds = [];
+  // Selectors ending in a compound right of + / ~ that is not the subject
+  // (".a + .b" of ".a + .b .c"): a later sibling's subtree restyles only
+  // when its match of one of them changes.
+  const siblingTargetCompounds = new Set();
+  for (const block of selectorsOnly.matchAll(/[^{}@]*\{/g)) {
+    for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
+      const parts = complexParts(selector);
+      parts.forEach(({ compound, combinator }, index) => {
+        const nested = /\([^)]*[\s>+~][^)]*\)/.test(compound); // :is(.a .b) hides combinators
+        const previous = parts[index - 1]?.combinator;
+        if ((previous === "+" || previous === "~") && index < parts.length - 1) {
+          // With what is left of it ("li:first-child + li"): the relation to
+          // the earlier sibling can end while the compound still matches.
+          const left = parts.slice(0, index).map((part) => `${part.compound} ${part.combinator === " " ? "" : part.combinator + " "}`).join("");
+          siblingTargetCompounds.add(left + compound);
+        }
+        if (index === parts.length - 1 && !nested) return;
+        const features = compoundFeatures(compound);
+        if (nested || combinator === " " || combinator === ">") {
+          for (const feature of features) descendantFeatures.add(feature);
+          const states = features.filter((feature) => feature.startsWith(":"));
+          if (states.length) descendantStateCompounds.push({ states, required: positiveCompoundFeatures(compound) });
+        }
+        if (nested || combinator === "+" || combinator === "~") for (const feature of features) siblingFeatures.add(feature);
+      });
+    }
+  }
+  return {
+    sibling, hasCompounds, hasSiblings, structuralCompounds, descendantFeatures, siblingFeatures, descendantStateCompounds, siblingTargetCompounds,
+    forward: /:(?:nth-child|nth-of-type|first-of-type|only-of-type)\b/.test(selectorsOnly),
+    firstChild: /:(?:first-child|only-child)\b/.test(selectorsOnly),
+    backward: /:(?:nth-last-child|nth-last-of-type|last-of-type|only-of-type)\b/.test(selectorsOnly),
+    lastChild: /:(?:last-child|only-child)\b/.test(selectorsOnly),
+    defined: text.includes(":defined"), target: /:target\b/.test(text),
+  };
+}
+
+const HAS_BLOCK = /[^{}]*:has\([^{]*\{/y;
+
+/**
+ * The matches of /[^{}]*:has\([^{]*\{/g in `text`. Searched globally, that
+ * expression retries at every position of every brace-free run; a match can
+ * only start where such a run starts (after a brace, where the previous
+ * match ended) and contains ":has(", so only those runs are tried.
+ */
+function* hasBlocks(text) {
+  let end = 0;
+  for (let at = text.indexOf(":has("); at !== -1; at = text.indexOf(":has(", Math.max(at + 1, end))) {
+    const start = Math.max(text.lastIndexOf("{", at), text.lastIndexOf("}", at)) + 1;
+    if (start < end) continue;
+    HAS_BLOCK.lastIndex = start;
+    const match = HAS_BLOCK.exec(text);
+    if (!match) continue;
+    end = HAS_BLOCK.lastIndex;
+    yield match[0];
+  }
+}
+
+/** Splits at top-level `separator` (outside (), [] and quotes). */
+function splitTopLevelText(text, separator) {
+  const parts = [];
+  let depth = 0;
+  let quote = "";
+  let start = 0;
+  for (let index = 0; index < text.length; index++) {
+    const character = text[index];
+    if (quote) { if (character === "\\") index++; else if (character === quote) quote = ""; continue; }
+    if (character === '"' || character === "'") quote = character;
+    else if (character === "\\") index++;
+    else if (character === "(" || character === "[") depth++;
+    else if (character === ")" || character === "]") depth--;
+    else if (character === separator && depth === 0) { parts.push(text.slice(start, index).trim()); start = index + 1; }
+  }
+  parts.push(text.slice(start).trim());
+  return parts.filter(Boolean);
+}
+
+const STATE_PSEUDO = /:(?:checked|indeterminate|default|disabled|enabled|placeholder-shown|valid|invalid|in-range|out-of-range|required|optional|read-only|read-write|user-valid|user-invalid|autofill|open|popover-open|modal|target|focus|focus-visible|focus-within|hover|active|visited|link|any-link|defined|fullscreen)\b/g;
+
+/** CSS escapes in an identifier (".\\:popover-open", "\\31 a") resolved. */
+function cssUnescape(text) {
+  return text.replace(/\\([0-9a-fA-F]{1,6})\s?/g, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/\\(.)/g, "$1");
+}
+
+/** Invalidation features a compound selector mentions (see selectorTraitsFor). */
+function compoundFeatures(compound) {
+  const features = [];
+  const plain = compound.replace(/\[[^\]]*\]/g, (attribute) => {
+    const name = /^\[\s*([\w-]+)/.exec(attribute)?.[1];
+    if (name) features.push("[" + name.toLowerCase());
+    return "";
+  });
+  for (const match of plain.matchAll(/([.#])((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w\u00a0-\uffff-])+)/g)) features.push(match[1] + cssUnescape(match[2]));
+  const tag = /^(?:[a-zA-Z][\w-]*)/.exec(plain)?.[0];
+  if (tag) features.push("t:" + tag.toLowerCase());
+  for (const match of plain.matchAll(STATE_PSEUDO)) features.push(match[0]);
+  // Nothing but a universal selector or pseudo-classes: it can match anything.
+  if (!features.length || /^\*/.test(plain)) features.push("*");
+  return features;
+}
+
+/** Positive outer-compound requirements that must hold regardless of pseudo state. */
+function positiveCompoundFeatures(compound) {
+  const features = [];
+  const tag = /^[a-zA-Z][\w-]*/.exec(compound)?.[0];
+  if (tag) features.push("t:" + tag.toLowerCase());
+  let depth = 0;
+  for (let index = 0; index < compound.length; index++) {
+    const character = compound[index];
+    if (character === "\\") { index++; continue; }
+    if (character === "(") { depth++; continue; }
+    if (character === ")") { depth--; continue; }
+    if (depth) continue;
+    if (character === "[") {
+      const name = /^\s*([\w-]+)/.exec(compound.slice(index + 1))?.[1];
+      if (name) features.push("[" + name.toLowerCase());
+      let quote = "";
+      for (index++; index < compound.length; index++) {
+        const inner = compound[index];
+        if (inner === "\\") index++;
+        else if (quote) { if (inner === quote) quote = ""; }
+        else if (inner === '"' || inner === "'") quote = inner;
+        else if (inner === "]") break;
+      }
+    } else if (character === "." || character === "#") {
+      const match = /^((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w\u00a0-\uffff-])+)/.exec(compound.slice(index + 1));
+      if (match) features.push(character + cssUnescape(match[1]));
+    }
+  }
+  return features;
+}
+
+/** The features an element has (for a sibling it inserts next to, for example). */
+export function elementFeatures(element) {
+  const features = ["t:" + element.localName];
+  const id = element.getAttribute("id");
+  if (id) features.push("#" + id);
+  for (const name of element.classList) features.push("." + name);
+  for (const attribute of element.attributes) features.push("[" + attribute.name);
+  return features;
+}
+
+/** Whether a character code is JavaScript white space (what /\s/ matches and trim() removes). */
+function isSpace(code) {
+  return code === 0x20 || (code >= 0x09 && code <= 0x0d) || code === 0xa0 || code === 0x1680
+    || (code >= 0x2000 && code <= 0x200a) || code === 0x2028 || code === 0x2029 || code === 0x202f
+    || code === 0x205f || code === 0x3000 || code === 0xfeff;
+}
+
+const GREATER = 0x3e, PLUS = 0x2b, TILDE = 0x7e;
+
+/**
+ * Calls `separator(index, code)` at each top-level combinator character of
+ * a complex selector (white space, ">", "+", "~" outside (), [], quotes and
+ * escapes) and returns nothing; the text between separators is a compound.
+ */
+function forEachSeparator(selector, separator) {
+  let depth = 0;
+  let quote = 0;
+  for (let index = 0; index < selector.length; index++) {
+    const code = selector.charCodeAt(index);
+    if (quote) {
+      if (code === 0x5c) index++;
+      else if (code === quote) quote = 0;
+      continue;
+    }
+    if (code === 0x22 || code === 0x27) { quote = code; continue; }
+    if (code === 0x5c) { index++; continue; }
+    if (code === 0x28 || code === 0x5b) depth++;
+    else if (code === 0x29 || code === 0x5d) depth--;
+    else if (depth === 0 && (code === GREATER || code === PLUS || code === TILDE || isSpace(code))) separator(index, code);
+  }
+}
+
+/** A complex selector's compounds with the combinator after each (" ", ">", "+", "~", or null for the subject). */
+function complexParts(selector) {
+  const parts = [];
+  let start = 0;
+  forEachSeparator(selector, (index, code) => {
+    if (index > start) parts.push({ compound: selector.slice(start, index), combinator: null });
+    start = index + 1;
+    if (!isSpace(code) && parts.length) parts.at(-1).combinator = selector[index];
+    else if (parts.length && parts.at(-1).combinator === null) parts.at(-1).combinator = " ";
+  });
+  if (selector.length > start) parts.push({ compound: selector.slice(start), combinator: null });
+  return parts;
+}
+
+/** The compound selectors of a complex selector (split at top-level combinators). */
+function compoundsOf(selector) {
+  const compounds = [];
+  let start = 0;
+  forEachSeparator(selector, (index) => {
+    if (index > start) compounds.push(selector.slice(start, index));
+    start = index + 1;
+  });
+  if (selector.length > start) compounds.push(selector.slice(start));
+  return compounds;
+}

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.1.0",
+  "version": "0.2.1",
   "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) {