buninu-browser 0.2.0 → 0.2.1

package/lib/style/computed-style.js

@@ -4,6 +4,9 @@
  * model and parser here are project-owned and intentionally cover only the
  * properties the current pixel renderer consumes.
  */
+import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
+import { selectorKeys } from "./selector-keys.js";
+
 
 const BLOCK_TAGS = new Set([
   "ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "BODY", "DD", "DETAILS", "DIV", "DL", "DT",
@@ -253,6 +256,9 @@ export class StyleEngine {
   // 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 };
+  // Parsed rules by sheet text, for the viewport in #parsedSheetsKey.
+  #parsedSheets = new Map();
+  #parsedSheetsKey = "";
 
   /**
    * Computes the document's styles. With `dirty` (elements whose subtree's
@@ -306,10 +312,7 @@ export class StyleEngine {
       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);
-        }
+        const ancestors = this.#ancestorsOf(start);
         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,
@@ -332,10 +335,8 @@ export class StyleEngine {
     const cache = this.#ruleCache;
     this.#sheetChanges = null;
     if (cache.styleSheets !== styleSheets || cache.key !== key || cache.length !== styleSheets.length) {
-      const counter = { order: 0 };
-      const perSheet = styleSheets.map((source) => parseStyleSheet(source, environment, counter));
+      const perSheet = this.#parseSheets(styleSheets, key);
       const rules = perSheet.flat();
-      if (counter.layers) rankLayers(counter.layers, 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.
@@ -345,6 +346,62 @@ export class StyleEngine {
     return this.#ruleCache.index;
   }
 
+  /**
+   * Each sheet's rules, in cascade order. A sheet is parsed once per text
+   * (and viewport) with layers of its own; putting a list together only
+   * renumbers the rules and merges the sheets' layer trees in order, so a
+   * script adding one <style> does not re-parse every other sheet. Of
+   * identical sheets only the last copy's rules are kept, as each beats the
+   * same rule of an earlier copy (the earlier copy still declares its layers
+   * first); a sheet with anonymous layers is kept in every copy, since under
+   * !important an earlier anonymous layer wins.
+   */
+  #parseSheets(styleSheets, key) {
+    if (this.#parsedSheetsKey !== key) {
+      this.#parsedSheets = new Map();
+      this.#parsedSheetsKey = key;
+    }
+    const parsed = this.#parsedSheets;
+    const entries = styleSheets.map((source) => {
+      let entry = parsed.get(source);
+      if (entry) parsed.delete(source);
+      else {
+        const counter = { order: 0 };
+        const rules = parseStyleSheet(source, environment, counter);
+        entry = { rules, layers: counter.layers.children.size ? counter.layers : null };
+        entry.anonymousLayers = entry.layers !== null && hasAnonymousLayer(entry.layers);
+      }
+      parsed.set(source, entry); // most recently used last
+      return entry;
+    });
+    for (const source of parsed.keys()) {
+      if (parsed.size <= MAX_PARSED_SHEETS + styleSheets.length) break;
+      parsed.delete(source);
+    }
+    const last = new Map();
+    entries.forEach((entry, index) => last.set(entry, index));
+    const root = newLayer(null);
+    const layerOf = new Map();
+    let order = 0;
+    const perSheet = entries.map((entry, index) => {
+      if (entry.layers) mergeLayers(entry.layers, root, layerOf);
+      const lastCopy = last.get(entry) === index;
+      if (!lastCopy && !entry.anonymousLayers) return [];
+      // Each kept copy but the last gets rule objects of its own.
+      const rules = lastCopy ? entry.rules : entry.rules.map((rule) => rule.copy());
+      for (const rule of rules) {
+        rule.order = order++;
+        rule.layer = rule.layerNode ? layerOf.get(rule.layerNode) : Infinity;
+      }
+      return rules;
+    });
+    if (root.children.size) {
+      rankLayerTree(root);
+      for (const rules of perSheet) for (const rule of rules) if (rule.layerNode) rule.layer = rule.layer.rank;
+    }
+    return perSheet;
+  }
+
   /** Elements matched by the rules of added or removed sheets, or null when that is unknown. */
   #elementsForSheetChanges(document) {
     const changes = this.#sheetChanges;
@@ -372,16 +429,24 @@ export class StyleEngine {
 
   /** Computes and stores one element's style and ::before/::after styles. */
   #styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors) {
+    const previousStyle = this.#styles.get(element);
+    const previousCustom = this.#customProperties.get(element);
+    const previousPseudo = this.#pseudoStyles.get(element);
     // 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));
-    const customProperties = withCustomProperties(parentCustomProperties ?? EMPTY_MAP, declarations);
-    const style = computeElementStyle(element, parentStyle, declarations, customProperties);
+    let customProperties = withCustomProperties(parentCustomProperties ?? EMPTY_MAP, declarations);
+    let style = computeElementStyle(element, parentStyle, declarations, customProperties);
+    // A descendant may be visited because an ancestor's selector state
+    // changed even though its final computed values did not. Preserve the
+    // immutable identities so retained render and layout subtrees survive.
+    if (sameValue(previousStyle, style)) style = previousStyle;
+    if (sameCustom(previousCustom, customProperties)) customProperties = previousCustom;
     // rem units resolve against the root element's computed font size.
     if (!parentStyle) environment = { ...environment, rootFontSize: style.fontSize };
     this.#styles.set(element, style);
     this.#customProperties.set(element, customProperties);
-    const pseudoStyles = {};
+    let pseudoStyles = {};
     for (const pseudo of ["before", "after"]) {
       const pseudoDeclarations = cascadeDeclarations(element, rules, pseudo, keys, ancestors);
       if (!pseudoDeclarations.has("content")) continue;
@@ -390,13 +455,16 @@ export class StyleEngine {
       // `content: none | normal` generates no box (CSS Pseudo 4 §2.3).
       if (pseudoStyle.content != null && pseudoStyle.display !== "none") pseudoStyles[pseudo] = pseudoStyle;
     }
+    if (sameValue(previousPseudo ?? null, (pseudoStyles.before || pseudoStyles.after) ? pseudoStyles : null)) {
+      pseudoStyles = previousPseudo ?? {};
+    }
     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()) {
+  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new AncestorFilter()) {
     const keys = elementKeys(element);
     const { style, customProperties } = this.#styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors);
     this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
@@ -404,22 +472,15 @@ export class StyleEngine {
 
   #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);
+    const own = ancestors.push(keys);
     for (const child of element.children) this.#visit(child, style, customProperties, rules, ancestors);
-    for (const key of own) {
-      const count = ancestors.get(key) - 1;
-      if (count) ancestors.set(key, count);
-      else ancestors.delete(key);
-    }
+    ancestors.pop(own);
   }
 
   /** 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);
-    }
+    const ancestors = new AncestorFilter();
+    for (let node = element.parentElement; node; node = node.parentElement) ancestors.push(elementKeys(node));
     return ancestors;
   }
 
@@ -461,6 +522,8 @@ function sameCustom(left, right) {
 
 const EMPTY_MAP = new Map();
 const MAX_SHEET_CHANGE_RULES = 300;
+// Parsed sheets kept for reuse beyond those in use (sheets that come and go).
+const MAX_PARSED_SHEETS = 64;
 
 /**
  * Rules from sheets present in only one of two sheet lists (by text), or null
@@ -571,8 +634,7 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   // font-size and the font shorthand wins the cascade.
   const fontSize = declarations.get("font-size");
   const font = declarations.get("font");
-  const cascadeKey = (declaration) => ({ important: false, specificity: 0, order: 0, ...declaration, important: Boolean(declaration.important) });
-  if (font && (!fontSize || compareCascade(cascadeKey(font), cascadeKey(fontSize)) > 0)) {
+  if (font && (!fontSize || compareDeclarations(font, fontSize) > 0)) {
     const parsed = parseFontShorthand(resolveVariables(font.value, customProperties));
     if (parsed) setProperty(values, "font-size", parsed.size, parentStyle);
   } else if (fontSize) {
@@ -582,10 +644,7 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   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) },
-  ));
+  const ordered = [...declarations.values()].sort(compareDeclarations);
   for (const declaration of ordered) {
     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.
@@ -706,6 +765,13 @@ class StyleRule {
   get hasCustomProperties() {
     return this.#block.hasCustomProperties;
   }
+
+  /** The same rule as a separate object (its own order and layer). */
+  copy() {
+    const rule = new StyleRule(this.selector, this.#selectorText, this.pseudo, this.#block, this.order);
+    rule.layerNode = this.layerNode;
+    return rule;
+  }
 }
 
 /**
@@ -744,7 +810,7 @@ export function parseStyleSheet(source, viewport = environment, counter = { orde
         if (name === "layer") {
           // A named layer block, or an anonymous one (a layer of its own).
           const parent = layer ?? counter.layers;
-          const inner = condition ? declareLayer(parent, condition) : declareLayer(parent, `\0anonymous${counter.order}`);
+          const inner = condition ? declareLayer(parent, condition) : declareLayer(parent, `${ANONYMOUS_LAYER}${counter.order}`);
           parseBlock(open + 1, close, inner);
         } else if ((name === "media" && mediaQueryMatches(condition, viewport)) || name === "supports") {
           parseBlock(open + 1, close, layer);
@@ -771,6 +837,28 @@ function newLayer(parent) {
   return { parent, children: new Map(), rank: Infinity };
 }
 
+const ANONYMOUS_LAYER = "\0anonymous";
+
+function hasAnonymousLayer(node) {
+  for (const [name, child] of node.children) if (name.startsWith(ANONYMOUS_LAYER) || hasAnonymousLayer(child)) return true;
+  return false;
+}
+
+/**
+ * Adds one sheet's layer tree to the layers of a sheet list, in first-seen
+ * order; `layerOf` maps each of the sheet's layers to the list's. Every
+ * anonymous layer is a layer of its own.
+ */
+function mergeLayers(node, target, layerOf) {
+  for (const [name, child] of node.children) {
+    const anonymous = name.startsWith(ANONYMOUS_LAYER);
+    let merged = anonymous ? null : target.children.get(name);
+    if (!merged) target.children.set(anonymous ? `${name}\0${target.children.size}` : name, merged = newLayer(target));
+    layerOf.set(child, merged);
+    mergeLayers(child, merged, layerOf);
+  }
+}
+
 /** Finds or creates a (possibly dotted) layer name under `parent`, in first-seen order. */
 function declareLayer(parent, name) {
   let node = parent;
@@ -787,12 +875,16 @@ function declareLayer(parent, name) {
  * layer's sublayers before its own rules; unlayered rules rank highest.
  */
 export function rankLayers(root, rules) {
+  rankLayerTree(root);
+  for (const rule of rules) rule.layer = rule.layerNode ? rule.layerNode.rank : Infinity;
+}
+
+function rankLayerTree(root) {
   let next = 0;
   (function visit(node) {
     for (const child of node.children.values()) visit(child);
     if (node !== root) node.rank = next++;
   })(root);
-  for (const rule of rules) rule.layer = rule.layerNode ? rule.layerNode.rank : Infinity;
 }
 
 /** Splits a `font` shorthand value into size, line height, weight and family. */
@@ -823,34 +915,38 @@ function parseFontShorthand(value) {
   return null;
 }
 
+// Character codes for the scanners below, which run over whole style sheets.
+const QUOTE = 0x22, APOSTROPHE = 0x27, BACKSLASH = 0x5c, OPEN_PAREN = 0x28, CLOSE_PAREN = 0x29, OPEN_BRACE = 0x7b, CLOSE_BRACE = 0x7d;
+
 function findTopLevel(source, character, start, end) {
-  let quote = "";
+  const target = character.charCodeAt(0);
+  let quote = 0;
   let depth = 0;
   for (let index = start; index < end; index++) {
-    const current = source[index];
+    const current = source.charCodeAt(index);
     if (quote) {
-      if (current === "\\") index++;
-      else if (current === quote) quote = "";
-    } else if (current === '"' || current === "'") quote = current;
-    else if (current === "(") depth++;
-    else if (current === ")") depth = Math.max(0, depth - 1);
-    else if (current === character && depth === 0) return index;
-    else if (current === "{" || current === "}") return character === current ? index : -1;
+      if (current === BACKSLASH) index++;
+      else if (current === quote) quote = 0;
+    } else if (current === QUOTE || current === APOSTROPHE) quote = current;
+    else if (current === OPEN_PAREN) depth++;
+    else if (current === CLOSE_PAREN) depth = Math.max(0, depth - 1);
+    else if (current === target && depth === 0) return index;
+    else if (current === OPEN_BRACE || current === CLOSE_BRACE) return target === current ? index : -1;
   }
   return -1;
 }
 
 function matchingBrace(source, open, end) {
   let depth = 0;
-  let quote = "";
+  let quote = 0;
   for (let index = open; index < end; index++) {
-    const current = source[index];
+    const current = source.charCodeAt(index);
     if (quote) {
-      if (current === "\\") index++;
-      else if (current === quote) quote = "";
-    } else if (current === '"' || current === "'") quote = current;
-    else if (current === "{") depth++;
-    else if (current === "}" && --depth === 0) return index;
+      if (current === BACKSLASH) index++;
+      else if (current === quote) quote = 0;
+    } else if (current === QUOTE || current === APOSTROPHE) quote = current;
+    else if (current === OPEN_BRACE) depth++;
+    else if (current === CLOSE_BRACE && --depth === 0) return index;
   }
   return end;
 }
@@ -1452,10 +1548,14 @@ class RuleIndex {
         buckets = { id: new Map(), class: new Map(), attr: new Map(), tag: new Map(), universal: [] };
         this.#byPseudo.set(rule.pseudo, buckets);
       }
-      const parts = selectorParts(rule.selector);
-      rule.ancestorKeys = parts ? ancestorKeys(parts) : [];
+      // Kept on the rule: a parsed sheet's rules are indexed again whenever the sheet list changes.
+      if (rule.subjectKeys === undefined) {
+        const { subject, ancestors } = selectorKeys(rule.selector);
+        rule.ancestorIds = Int32Array.from(ancestors, filterKeyId);
+        rule.subjectKeys = subject;
+      }
       rule.seen = 0;
-      const keys = parts ? subjectKeys(parts.compounds.at(-1)) : null;
+      const keys = rule.subjectKeys;
       if (!keys) {
         buckets.universal.push(rule);
         continue;
@@ -1472,7 +1572,7 @@ class RuleIndex {
   /**
    * Rules that may match `element` for `pseudo`, in cascade order.
    * @param {ReturnType<typeof elementKeys>} keys the element's own keys
-   * @param {Map<string, number>} ancestors keys present on its ancestors
+   * @param {AncestorFilter} ancestors keys present on its ancestors
    */
   candidates(keys, pseudo, ancestors) {
     const buckets = this.#byPseudo.get(pseudo);
@@ -1490,7 +1590,7 @@ class RuleIndex {
       for (const rule of list) {
         if (rule.seen === stamp) continue;
         rule.seen = stamp;
-        if (rule.ancestorKeys.every((key) => ancestors.has(key))) result.push(rule);
+        if (ancestors.hasAll(rule.ancestorIds)) result.push(rule);
       }
     }
     if (lists.length > 1) result.sort((left, right) => left.order - right.order);
@@ -1498,6 +1598,72 @@ class RuleIndex {
   }
 }
 
+/**
+ * The elements that match each selector among `root`'s descendants and, for
+ * an element, `root` itself (querySelectorAll() plus matches()), in one walk: selectors are bucketed by their subject's keys like
+ * rules, so each element is only tested against selectors it may match.
+ * Invalid selectors are left out of the result.
+ * @param {Element | Document} root
+ * @param {Iterable<string>} selectors
+ * @param {Map<string, object | null>} [compiledSelectors] compiled selectors to reuse and add to
+ * @returns {Map<string, Set<Element>>}
+ */
+export function matchSelectors(root, selectors, compiledSelectors = new Map()) {
+  const result = new Map();
+  const buckets = { id: new Map(), class: new Map(), attr: new Map(), tag: new Map(), universal: [] };
+  const sample = root.nodeType === 9 ? root.documentElement : root;
+  for (const selector of selectors) {
+    if (result.has(selector)) continue;
+    // :scope means the root to querySelectorAll() but the element to matches().
+    let compiled;
+    if (sample && !selector.includes(":scope")) {
+      compiled = compiledSelectors.get(selector);
+      if (compiled === undefined) {
+        compiled = compileSelector(sample, selector);
+        if (compiled !== undefined) compiledSelectors.set(selector, compiled);
+      }
+    }
+    if (compiled === null) continue;
+    if (compiled === undefined) {
+      try { result.set(selector, new Set(root.querySelectorAll(selector))); } catch { /* invalid */ }
+      continue;
+    }
+    const entry = { compiled, matched: new Set(), seen: 0 };
+    result.set(selector, entry.matched);
+    const keys = selectorKeys(selector).subject;
+    if (!keys) {
+      buckets.universal.push(entry);
+      continue;
+    }
+    for (const key of keys) {
+      const list = buckets[key.kind].get(key.name);
+      if (list) list.push(entry); else buckets[key.kind].set(key.name, [entry]);
+    }
+  }
+  let stamp = 0;
+  const test = (element, list) => {
+    if (!list) return;
+    for (const entry of list) {
+      if (entry.seen === stamp) continue;
+      entry.seen = stamp;
+      if (matchesCompiled(element, entry.compiled)) entry.matched.add(element);
+    }
+  };
+  const visit = (element) => {
+    stamp++;
+    const keys = elementKeys(element);
+    test(element, buckets.universal);
+    if (keys.id) test(element, buckets.id.get(keys.id));
+    for (const name of keys.classes) test(element, buckets.class.get(name));
+    for (const name of keys.attrs) test(element, buckets.attr.get(name));
+    if (keys.tag) test(element, buckets.tag.get(keys.tag));
+    for (const child of element.children) visit(child);
+  };
+  if (root.nodeType === 1) visit(root);
+  else for (const child of root.children ?? []) visit(child);
+  return result;
+}
+
 /** The keys an element offers to selectors: id, classes, attribute names, type. */
 function elementKeys(element) {
   const id = element.getAttribute?.("id") || null;
@@ -1509,203 +1675,102 @@ function elementKeys(element) {
   return { id, classes, attrs, tag: tag ? String(tag).toLowerCase() : null };
 }
 
-/** Ancestor filter keys for an element: "tag", "#id", ".class", "[attr". */
-function ancestorFilterKeys(keys) {
-  const result = [];
-  if (keys.tag) result.push(keys.tag);
-  if (keys.id) result.push(`#${keys.id}`);
-  for (const name of keys.classes) result.push(`.${name}`);
-  for (const name of keys.attrs) result.push(`[${name}`);
-  return result;
+// Ancestor filter keys that some rule requires, numbered for AncestorFilter.
+const FILTER_KEY_IDS = new Map();
+
+function filterKeyId(key) {
+  let id = FILTER_KEY_IDS.get(key);
+  if (id === undefined) FILTER_KEY_IDS.set(key, id = FILTER_KEY_IDS.size);
+  return id;
 }
 
 /**
- * Splits a complex selector into compounds and the combinators between them
- * (" ", ">", "+", "~"), ignoring anything inside (), [] and quotes. Returns
- * null for selectors this does not understand, which are then left unindexed.
+ * Counts of the filter keys on the elements above the one being styled (a
+ * counting filter, like Blink's ancestor Bloom filter but exact). Keys no
+ * rule requires are not counted. Created after the rules are indexed.
  */
-function selectorParts(selector) {
-  const compounds = [];
-  const combinators = [];
-  let current = "";
-  let pending = null;
-  let depth = 0;
-  for (let index = 0; index < selector.length; index++) {
-    const character = selector[index];
-    if (character === "\\") {
-      current += character + (selector[++index] ?? "");
-      continue;
-    }
-    if (character === "\"" || character === "'") {
-      const close = selector.indexOf(character, index + 1);
-      if (close < 0) return null;
-      current += selector.slice(index, close + 1);
-      index = close;
-      continue;
-    }
-    if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    if (depth === 0 && (character === " " || character === ">" || character === "+" || character === "~"
-      || character === "\t" || character === "\n" || character === "\r" || character === "\f")) {
-      if (current) {
-        compounds.push(current);
-        current = "";
-        pending = " ";
-      }
-      if (character === ">" || character === "+" || character === "~") {
-        if (pending === null && compounds.length === 0) return null;
-        pending = character;
-      }
-      continue;
-    }
-    if (pending !== null) {
-      combinators.push(pending);
-      pending = null;
-    }
-    current += character;
-  }
-  if (depth !== 0) return null;
-  if (current) compounds.push(current);
-  else if (pending !== null && compounds.length) return null;
-  return compounds.length ? { compounds, combinators } : null;
-}
-
-const IDENTIFIER = /^(?:[\w-]|\\[^0-9a-fA-F\s]|[^\x00-\x7f])+/;
-
-/** An identifier at the start of `text`, unescaped; null when absent or hex-escaped. */
-function leadingIdentifier(text) {
-  const match = IDENTIFIER.exec(text);
-  if (!match || text[match[0].length] === "\\") return null;
-  return match[0].replace(/\\(.)/g, "$1");
-}
+class AncestorFilter {
+  #counts = new Int32Array(Math.max(1, FILTER_KEY_IDS.size));
 
-/** Keys of one compound selector, from its parts outside () (ids, classes, attribute names, type). */
-function compoundKeys(compound) {
-  const keys = { ids: [], classes: [], attrs: [], tag: null, pseudo: [] };
-  if (compound.includes("|")) return keys;
-  const tag = /^[a-zA-Z][\w-]*/.exec(compound)?.[0];
-  if (tag) keys.tag = 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 > 0) continue;
-    if (character === "[") {
-      const name = /^\s*([\w-]+)/.exec(compound.slice(index + 1))?.[1];
-      if (name) keys.attrs.push(name.toLowerCase());
-      // Skip to the closing bracket; quoted values may contain "]", "#" or ".".
-      let quote = null;
-      for (index++; index < compound.length; index++) {
-        const inner = compound[index];
-        if (inner === "\\") index++;
-        else if (quote) {
-          if (inner === quote) quote = null;
-        } else if (inner === "\"" || inner === "'") quote = inner;
-        else if (inner === "]") break;
-      }
-    } else if (character === "#" || character === ".") {
-      const name = leadingIdentifier(compound.slice(index + 1));
-      if (name && !(character === "." && /^\d/.test(name))) (character === "#" ? keys.ids : keys.classes).push(name);
-    } else if (character === ":") {
-      const name = /^:?([\w-]+)/.exec(compound.slice(index + 1))?.[1];
-      if (name) keys.pseudo.push({ name: name.toLowerCase(), start: index });
+  /** Adds an element's keys; returns what pop() takes to remove them. */
+  push(keys) {
+    const ids = [];
+    for (const key of ancestorFilterKeys(keys)) {
+      const id = FILTER_KEY_IDS.get(key);
+      if (id === undefined || id >= this.#counts.length) continue;
+      this.#counts[id]++;
+      ids.push(id);
     }
+    return ids;
   }
-  return keys;
-}
 
-/**
- * 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(compound) {
-  const keys = compoundKeys(compound);
-  if (keys.ids.length) return [{ kind: "id", name: keys.ids[0] }];
-  if (keys.classes.length) return [{ kind: "class", name: keys.classes[0] }];
-  if (keys.attrs.length) return [{ kind: "attr", name: keys.attrs[0] }];
-  if (keys.tag) return [{ kind: "tag", name: keys.tag }];
-  if (keys.pseudo.some(({ name }) => name === "root")) return [{ kind: "tag", name: "html" }];
-  for (const { name, start } of keys.pseudo) {
-    if (!["is", "where", "matches", "-webkit-any"].includes(name)) continue;
-    const open = compound.indexOf("(", start);
-    const close = open < 0 ? -1 : matchingParenthesis(compound, open);
-    if (close < 0) return null;
-    const alternatives = splitTopLevel(compound.slice(open + 1, close), ",").filter(Boolean);
-    const result = [];
-    for (const alternative of alternatives) {
-      // Only simple alternatives: complex ones inside :is() are left to the
-      // selector engine unindexed, so indexing never changes a result.
-      const parts = selectorParts(alternative.trim());
-      const inner = parts?.compounds.length === 1 ? subjectKeys(parts.compounds[0]) : null;
-      if (!inner) return null;
-      result.push(...inner);
-    }
-    return result.length ? result : null;
+  pop(ids) {
+    for (const id of ids) this.#counts[id]--;
   }
-  return null;
-}
 
-/** Keys that must be present on some ancestor for the selector to match. */
-function ancestorKeys(parts) {
-  const keys = new Set();
-  for (let index = 0; index < parts.compounds.length - 1; 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).
-    if (parts.combinators[index] !== " " && parts.combinators[index] !== ">") continue;
-    const compound = compoundKeys(parts.compounds[index]);
-    if (compound.tag) keys.add(compound.tag);
-    for (const id of compound.ids) keys.add(`#${id}`);
-    for (const name of compound.classes) keys.add(`.${name}`);
-    for (const name of compound.attrs) keys.add(`[${name}`);
+  hasAll(ids) {
+    for (let index = 0; index < ids.length; index++) if (!(this.#counts[ids[index]] > 0)) return false;
+    return true;
   }
-  return [...keys];
 }
 
-function matchingParenthesis(text, open) {
-  let depth = 0;
-  for (let index = open; index < text.length; index++) {
-    if (text[index] === "\\") index++;
-    else if (text[index] === "(") depth++;
-    else if (text[index] === ")" && --depth === 0) return index;
-  }
-  return -1;
+/** Ancestor filter keys for an element: "tag", "#id", ".class", "[attr". */
+function ancestorFilterKeys(keys) {
+  const result = [];
+  if (keys.tag) result.push(keys.tag);
+  if (keys.id) result.push(`#${keys.id}`);
+  for (const name of keys.classes) result.push(`.${name}`);
+  for (const name of keys.attrs) result.push(`[${name}`);
+  return result;
 }
 
-function cascadeDeclarations(element, rules, pseudo = null, keys = elementKeys(element), ancestors = new Map()) {
+function cascadeDeclarations(element, rules, pseudo = null, keys = elementKeys(element), ancestors = new AncestorFilter()) {
   const result = new Map();
   result.hasCustomProperties = false;
   for (const rule of rules.candidates(keys, pseudo, ancestors)) {
     if (!matchesSelector(element, rule)) continue;
     if (rule.hasCustomProperties) result.hasCustomProperties = true;
+    const { specificity, order } = rule;
+    const layer = rule.layer ?? Infinity;
     for (const declaration of rule.declarationList) {
-      const candidate = { ...declaration, specificity: rule.specificity, order: rule.order, layer: rule.layer ?? Infinity };
-      const current = result.get(candidate.name);
-      if (!current || compareCascade(candidate, current) >= 0) result.set(candidate.name, candidate);
+      const current = result.get(declaration.name);
+      if (current && compareCascadeParts(declaration.important, layer, specificity, order, current) < 0) continue;
+      result.set(declaration.name, { name: declaration.name, value: declaration.value, important: declaration.important, specificity, order, layer });
     }
   }
   return result;
 }
 
 function compareCascade(left, right) {
-  if (left.important !== right.important) return left.important ? 1 : -1;
+  return compareCascadeParts(left.important, left.layer ?? Infinity, left.specificity, left.order, right);
+}
+
+/** compareCascade() for a left side given as its parts (no object for it). */
+function compareCascadeParts(important, layer, specificity, order, right) {
+  if (important !== right.important) return important ? 1 : -1;
   // Cascade layers: later layers and unlayered styles win for normal
   // declarations; for !important the order is reversed.
+  const rightLayer = right.layer ?? Infinity;
+  if (layer !== rightLayer) return (layer > rightLayer ? 1 : -1) * (important ? -1 : 1);
+  if (specificity !== right.specificity) return specificity - right.specificity;
+  return order - right.order;
+}
+
+/**
+ * compareCascade() for declarations that may lack cascade fields (user-agent
+ * and inline ones): absent means normal importance, specificity and order 0.
+ */
+function compareDeclarations(left, right) {
+  const leftImportant = Boolean(left.important);
+  const rightImportant = Boolean(right.important);
+  if (leftImportant !== rightImportant) return leftImportant ? 1 : -1;
   const leftLayer = left.layer ?? Infinity;
   const rightLayer = right.layer ?? Infinity;
-  if (leftLayer !== rightLayer) return (leftLayer > rightLayer ? 1 : -1) * (left.important ? -1 : 1);
-  if (left.specificity !== right.specificity) return left.specificity - right.specificity;
-  return left.order - right.order;
+  if (leftLayer !== rightLayer) return (leftLayer > rightLayer ? 1 : -1) * (leftImportant ? -1 : 1);
+  const leftSpecificity = "specificity" in left ? left.specificity : 0;
+  const rightSpecificity = "specificity" in right ? right.specificity : 0;
+  if (leftSpecificity !== rightSpecificity) return leftSpecificity - rightSpecificity;
+  return ("order" in left ? left.order : 0) - ("order" in right ? right.order : 0);
 }
 
 const PSEUDO_ELEMENT = /(?:::?(before|after)|::([\w-]+))$/i;
@@ -1716,9 +1781,14 @@ const PSEUDO_ELEMENT = /(?:::?(before|after)|::([\w-]+))$/i;
  * pseudo-elements that are not rendered (::placeholder, ::selection, ...).
  */
 function splitPseudoElement(selectorText) {
-  const match = PSEUDO_ELEMENT.exec(selectorText);
+  // A trailing pseudo-element starts at the last colon (or the one before
+  // it): only the tail needs the regular expression.
+  const colon = selectorText.lastIndexOf(":");
+  if (colon < 0) return { selector: selectorText, pseudo: null };
+  const offset = Math.max(0, colon - 1);
+  const match = PSEUDO_ELEMENT.exec(offset ? selectorText.slice(offset) : selectorText);
   if (!match) return { selector: selectorText, pseudo: null };
-  const selector = selectorText.slice(0, match.index).trim() || "*";
+  const selector = selectorText.slice(0, offset + match.index).trim() || "*";
   return { selector, pseudo: match[1] ? match[1].toLowerCase() : undefined };
 }
 
@@ -1780,7 +1850,18 @@ function addSpecificity(left, right) {
 function matchesSelector(element, rule) {
   if (rule.invalid || typeof element.matches !== "function") return false;
   try {
-    return element.matches(rule.selector);
+    // Compiled once per rule; objects other than Happy DOM elements use matches().
+    let compiled = rule.compiled;
+    if (compiled === undefined) {
+      compiled = compileSelector(element, rule.selector);
+      if (compiled === undefined) return element.matches(rule.selector);
+      rule.compiled = compiled;
+    }
+    if (compiled === null) {
+      rule.invalid = true;
+      return false;
+    }
+    return matchesCompiled(element, compiled);
   } catch {
     rule.invalid = true;
     return false;