buninu-browser 0.2.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/package.json

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

package/test/computed-style.test.js

@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
-import { computeElementStyle, parseDeclarations, StyleEngine } from "../lib/style/computed-style.js";
+import { computeElementStyle, matchSelectors, parseDeclarations, StyleEngine } from "../lib/style/computed-style.js";
 
 test("computes the initial UA and inherited style subset", () => {
   const { document, window } = parseHTMLDocument(`<body>
@@ -381,6 +381,50 @@ test("cascade layers: unlayered beats layered, later layers win, !important reve
   window.happyDOM.abort();
 });
 
+test("sheets parsed once keep layer order and cascade when the sheet list changes or repeats", () => {
+  const { document, window } = parseHTMLDocument(`<p id="a" class="x">t</p><p id="b" class="y">u</p>`);
+  const base = `@layer one, two; @layer two { .x { color: blue } } @layer one { .x { color: red; display: flex } }`;
+  const anonymous = `@layer { .y { color: green !important } } .y { display: inline }`;
+  const later = `@layer three { .x { display: block } } .y { color: black }`;
+  const lists = [
+    [base, later],
+    [base, later, base], // a repeated sheet: its earlier copy still declares the layers first
+    [later, base],
+    [anonymous, later, anonymous], // anonymous layers: both copies count under !important
+    [later, `@layer two { .x { display: grid } }`, base],
+  ];
+  const engine = new StyleEngine();
+  for (const sheets of lists) {
+    engine.compute(document, sheets, {}, new Set([document.body]), null);
+    const fresh = new StyleEngine().compute(document, sheets.map((sheet) => `${sheet} `));
+    for (const id of ["a", "b"]) expect(engine.get(document.getElementById(id))).toEqual(fresh.get(document.getElementById(id)));
+  }
+  engine.compute(document, [base, later, base]);
+  expect(engine.get(document.getElementById("a")).color).toBe("rgba(0, 0, 255, 1)");
+  expect(engine.get(document.getElementById("a")).display).toBe("block");
+  window.happyDOM.abort();
+});
+
+test("matchSelectors finds what querySelectorAll finds, in one walk", () => {
+  const { document, window } = parseHTMLDocument(`<main><ul><li class="a">1</li><li id="i">2</li><li class="a b">3</li></ul>
+    <p>x</p><p class="a"><span>y</span></p><div><span hidden>z</span></div></main>`);
+  const selectors = ["li:first-child", ".a + li", "li ~ .b", "p:has(span)", ":is(ul, div) > *", "#i", "[hidden]", "*", ":root", "main span", "1x", "li:nth-child(2n+1)"];
+  // Elements compared as sets of document positions (deep equality of DOM
+  // nodes is slow, and querySelectorAll() may list an element twice).
+  const all = [...document.querySelectorAll("*")];
+  const positions = (elements) => [...new Set(elements)].map((element) => all.indexOf(element)).sort((x, y) => x - y);
+  const matched = matchSelectors(document, selectors);
+  for (const selector of selectors) {
+    let expected = null;
+    try { expected = positions(document.querySelectorAll(selector)); } catch {}
+    expect(matched.has(selector) ? positions(matched.get(selector)) : null).toEqual(expected);
+  }
+  // From an element: its descendants and the element itself.
+  const ul = document.querySelector("ul");
+  expect(positions(matchSelectors(ul, [":is(ul, li)"]).get(":is(ul, li)"))).toEqual(positions([ul, ...ul.children]));
+  window.happyDOM.abort();
+});
+
 test("the font shorthand resets its parts and competes with font-size in the cascade", () => {
   const { document, window } = parseHTMLDocument(`<h2 id="a" style="font-size:32px;line-height:3">t</h2><h2 id="b">x</h2>
     <p id="c" style="font:italic small-caps bold 12px/1.5 Georgia, serif">u</p><p id="d" style="font-size:large">v</p>`);
@@ -455,6 +499,22 @@ test("the font shorthand allows spaces around the line-height slash", () => {
   }
 });
 
+test("incremental restyling retains equal computed-style identities", () => {
+  const { document, window } = parseHTMLDocument(`<body><div><span>same</span></div></body>`);
+  const div = document.querySelector("div");
+  const span = document.querySelector("span");
+  const engine = new StyleEngine().compute(document, [".active { color: red }"]);
+  const before = [engine.get(div), engine.get(span)];
+  // Visiting this subtree is conservative: the class changes, but neither
+  // element's final values change.
+  div.className = "unmatched";
+  engine.compute(document, [".active { color: red }"], {}, new Set([div]));
+  expect([engine.get(div), engine.get(span)]).toEqual(before);
+  expect(engine.get(div)).toBe(before[0]);
+  expect(engine.get(span)).toBe(before[1]);
+  window.happyDOM.abort();
+});
+
 test("incremental restyles of changed subtrees and added sheets equal a full restyle", () => {
   const { document, window } = parseHTMLDocument(`<body><div id="a" class="x"><p>one</p><p>two</p></div><div id="b"><span>s</span></div></body>`);
   const sheets = [".x p { color: red } .y p { color: blue; font-size: 20px } #b span { font-weight: 700 }"];

package/test/headless-shell.test.js

@@ -1,4 +1,5 @@
 import { expect, test } from "bun:test";
+import { createBrowser } from "../lib/headless-shell.js";
 
 async function readDevToolsUrl(stream, timeout = 15_000) {
   const reader = stream.getReader();
@@ -343,3 +344,31 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
     await browser.exited;
   }
 }, 30_000);
+
+test("a client may set up and navigate before the first renderer is up", async () => {
+  let fetched = 0;
+  const site = Bun.serve({ port: 0, fetch() {
+    fetched++;
+    return new Response("<!doctype html><title>early</title><p>x</p>", { headers: { "content-type": "text/html" } });
+  } });
+  const browser = await createBrowser({ spareRenderer: false, waitForRenderer: false });
+  let ready = false;
+  browser.ready.then(() => { ready = true; });
+  try {
+    // Viewport and user agent are recorded at once, not after the renderer starts.
+    await browser.context.resize(321, 234, 1);
+    await browser.context.setUserAgent("EarlyAgent/1");
+    expect(ready).toBe(false);
+    // The document is fetched meanwhile; it commits once the renderer is up.
+    const navigation = browser.context.navigate(`http://127.0.0.1:${site.port}/`);
+    while (!fetched) await Bun.sleep(5);
+    expect(ready).toBe(false);
+    await navigation;
+    expect(fetched).toBe(1);
+    expect(await browser.context.title()).toBe("early");
+    expect(await browser.context.evaluate("innerWidth + 'x' + innerHeight + ' ' + navigator.userAgent")).toBe("321x234 EarlyAgent/1");
+  } finally {
+    browser.close();
+    site.stop(true);
+  }
+}, 30_000);