buninu-browser 0.2.0 → 0.2.2

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",
@@ -47,13 +50,21 @@ const VERTICAL_ALIGNS = new Set(["baseline", "top", "middle", "bottom", "text-to
 const AUTO_TRACK = Object.freeze({ min: "auto", max: "auto" });
 const FLEX_ALIGNMENT = Object.freeze({ "flex-start": "start", "flex-end": "end", left: "start", right: "end" });
 const GRADIENT = /^\s*(?:repeating-)?(?:linear|radial)-gradient\(/i;
+// A background layer's image: a URL or a gradient.
+const BACKGROUND_IMAGE = /^(?:url\(|(?:repeating-)?(?:linear|radial)-gradient\()/i;
+const BACKGROUND_REPEATS = new Set(["repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"]);
+const BACKGROUND_BOXES = new Set(["border-box", "padding-box", "content-box"]);
+const BACKGROUND_ATTACHMENTS = new Set(["scroll", "fixed", "local"]);
 const BOX_SIDES = Object.freeze(["top", "right", "bottom", "left"]);
 const WHITE_SPACES = new Set(["normal", "nowrap", "pre", "pre-wrap"]);
 // CSS Cascade 4 §7.3 CSS-wide keywords; revert is treated as unset (no user/UA origin split).
 const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
 // Computed-style fields a shorthand (or a property not named after its field) covers.
 const PROPERTY_FIELDS = Object.freeze({
-  background: ["backgroundColor", "backgroundImage"],
+  overflow: ["overflowX", "overflowY", "overflowScrollX", "overflowScrollY"],
+  "overflow-x": ["overflowX", "overflowScrollX"],
+  "overflow-y": ["overflowY", "overflowScrollY"],
+  background: ["backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat"],
   flex: ["flexGrow", "flexShrink", "flexBasis"],
   "flex-flow": ["flexDirection", "flexWrap"],
   gap: ["rowGap", "columnGap", "gap"],
@@ -86,6 +97,10 @@ const INITIAL = Object.freeze({
   colorScheme: "light",
   backgroundColor: "rgba(0, 0, 0, 0)",
   backgroundImage: null,
+  // Comma-separated, one entry per background-image layer (repeated as needed); null is the initial value.
+  backgroundPosition: null,
+  backgroundSize: null,
+  backgroundRepeat: null,
   backgroundClip: "border-box",
   boxShadow: null,
   fontFamily: Object.freeze(["sans-serif"]),
@@ -130,6 +145,8 @@ const INITIAL = Object.freeze({
   inset: Object.freeze(["auto", "auto", "auto", "auto"]),
   zIndex: "auto",
   transform: null,
+  // Raw text (default "50% 50%"); paint resolves it against the border box.
+  transformOrigin: null,
   justifyItems: "normal",
   justifySelf: "auto",
   gridTemplateColumns: null,
@@ -158,6 +175,10 @@ const INITIAL = Object.freeze({
   opacity: 1,
   overflowX: "visible",
   overflowY: "visible",
+  // Scroll containers (CSS Overflow 3 §3): "auto" for auto/scroll/overlay,
+  // which the user scrolls; "hidden", which only scripts scroll; else null.
+  overflowScrollX: null,
+  overflowScrollY: null,
   textOverflow: "clip",
   clip: null,
   clipPath: null,
@@ -184,6 +205,7 @@ const UA_DECLARATIONS = new Map(Object.entries({
   FIGURE: "margin: 1em 40px",
   PRE: "margin: 1em 0; font-family: monospace",
   CODE: "font-family: monospace",
+  IFRAME: "border: 2px inset",
   KBD: "font-family: monospace",
   SAMP: "font-family: monospace",
   TT: "font-family: monospace",
@@ -234,6 +256,8 @@ export function controlKind(element) {
 }
 
 /** HTML §15.3.4: :link (visited links are not tracked). */
+// <iframe frameborder="0"> (or "no"): no border in place of the default one.
+const UA_FRAMELESS_DECLARATIONS = parseDeclarations("border: none");
 const UA_LINK_DECLARATIONS = parseDeclarations("color: #0000EE; text-decoration: underline; cursor: pointer");
 const DECORATION_LINES = new Set(["underline", "overline", "line-through"]);
 const DECORATION_STYLES = new Set(["solid", "double", "dotted", "dashed", "wavy"]);
@@ -253,6 +277,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 +333,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 +356,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 +367,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;
@@ -365,6 +443,11 @@ export class StyleEngine {
     return this.#styles.get(element) ?? INITIAL;
   }
 
+  /** An element's custom properties (--*), name to value text, inherited ones included. */
+  customPropertiesOf(element) {
+    return this.#customProperties.get(element) ?? EMPTY_MAP;
+  }
+
   /** The computed style of an element's ::before/::after box, or null when it generates none. */
   getPseudo(element, pseudo) {
     return this.#pseudoStyles.get(element)?.[pseudo] ?? null;
@@ -372,16 +455,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 +481,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 +498,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 +548,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
@@ -555,7 +644,9 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   const isLink = (element.tagName === "A" || element.tagName === "AREA") && element.hasAttribute("href");
   const control = controlKind(element);
   if (control === "hidden") values.display = "none";
-  for (const declaration of [...(UA_DECLARATIONS.get(element.tagName)?.values() ?? []),
+  const frameless = element.tagName === "IFRAME" && ["0", "no"].includes(element.getAttribute("frameborder")?.trim().toLowerCase());
+  const uaDeclarations = frameless ? UA_FRAMELESS_DECLARATIONS : UA_DECLARATIONS.get(element.tagName);
+  for (const declaration of [...(uaDeclarations?.values() ?? []),
     ...(isLink ? UA_LINK_DECLARATIONS.values() : []), ...(UA_CONTROL_DECLARATIONS[control]?.values() ?? [])]) {
     if (!declarations.has(declaration.name)) {
       declarations.set(declaration.name, { ...declaration, specificity: -1, order: -1, layer: -Infinity });
@@ -571,8 +662,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 +672,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 +793,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 +838,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 +865,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 +903,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 +943,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;
 }
@@ -1016,13 +1140,22 @@ function setProperty(style, name, value, parentStyle = null) {
     case "overflow":
     case "overflow-x":
     case "overflow-y": {
-      // Scrolling boxes are not implemented: every non-visible value clips.
+      // Every non-visible value clips; all but clip also make a scroll container.
       const parts = value.split(/\s+/);
       const clips = (part) => (["hidden", "clip", "auto", "scroll", "overlay"].includes(part) ? "clip" : part === "visible" ? "visible" : null);
-      const x = clips(parts[0]);
-      const y = clips(parts[1] ?? parts[0]);
-      if (name !== "overflow-y" && x) style.overflowX = x;
-      if (name !== "overflow-x" && (name === "overflow" ? y : x)) style.overflowY = name === "overflow" ? y : x;
+      const scrolls = (part) => (["auto", "scroll", "overlay"].includes(part) ? "auto" : part === "hidden" ? "hidden" : null);
+      const xPart = parts[0];
+      const yPart = name === "overflow" ? parts[1] ?? parts[0] : parts[0];
+      const x = clips(xPart);
+      const y = clips(yPart);
+      if (name !== "overflow-y" && x) {
+        style.overflowX = x;
+        style.overflowScrollX = scrolls(xPart);
+      }
+      if (name !== "overflow-x" && y) {
+        style.overflowY = y;
+        style.overflowScrollY = scrolls(yPart);
+      }
       break;
     }
     case "text-overflow":
@@ -1061,24 +1194,37 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "background": {
-      // The shorthand resets both longhands; only the final layer may carry a color.
-      const layers = splitTopLevel(value, ",");
-      const images = layers.filter((layer) => GRADIENT.test(layer));
-      const color = splitTopLevel(layers.at(-1) ?? "", " ")
-        .map((token) => resolvedColor(token, style.colorScheme))
-        .find(Boolean);
-      style.backgroundColor = color ?? INITIAL.backgroundColor;
-      style.backgroundImage = images.length ? images.join(", ") : null;
+      // The shorthand resets the longhands; only the final layer may carry a color.
+      const layers = splitTopLevel(value, ",").map(parseBackgroundLayer);
+      if (layers.some((layer) => !layer)) break;
+      style.backgroundColor = layers.at(-1).color
+        ? resolvedColor(layers.at(-1).color, style.colorScheme) ?? INITIAL.backgroundColor
+        : INITIAL.backgroundColor;
+      const hasImage = layers.some((layer) => layer.image !== "none");
+      style.backgroundImage = hasImage ? layers.map((layer) => layer.image).join(", ") : null;
+      const list = (field, initial) => layers.some((layer) => layer[field] !== initial)
+        ? layers.map((layer) => layer[field]).join(", ")
+        : null;
+      style.backgroundPosition = hasImage ? list("position", "0% 0%") : null;
+      style.backgroundSize = hasImage ? list("size", "auto") : null;
+      style.backgroundRepeat = hasImage ? list("repeat", "repeat") : null;
       break;
     }
     case "background-image": {
       if (value === "none") style.backgroundImage = null;
       else {
-        const images = splitTopLevel(value, ",").filter((layer) => GRADIENT.test(layer));
-        if (images.length) style.backgroundImage = images.join(", ");
+        const images = splitTopLevel(value, ",").map((layer) => BACKGROUND_IMAGE.test(layer) || layer === "none" ? layer : null);
+        if (images.every(Boolean) && images.some((layer) => layer !== "none")) style.backgroundImage = images.join(", ");
       }
       break;
     }
+    case "background-position":
+    case "background-size":
+    case "background-repeat": {
+      const field = { "background-position": "backgroundPosition", "background-size": "backgroundSize", "background-repeat": "backgroundRepeat" }[name];
+      style[field] = value.toLowerCase().replace(/\s+/g, " ");
+      break;
+    }
     case "box-shadow": {
       const shadows = value === "none" ? null : parseBoxShadows(value, style.fontSize);
       if (value === "none" || shadows) style.boxShadow = shadows;
@@ -1133,10 +1279,13 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "transform": {
-      const transform = value === "none" ? null : parseTranslate(value, style.fontSize);
+      const transform = value === "none" ? null : parseTransform(value, style.fontSize);
       if (transform !== undefined) style.transform = transform;
       break;
     }
+    case "transform-origin":
+      style.transformOrigin = value.toLowerCase().replace(/\s+/g, " ");
+      break;
     case "content": {
       const content = parseContent(value);
       if (content !== undefined) style.content = content;
@@ -1200,12 +1349,15 @@ function setProperty(style, name, value, parentStyle = null) {
       if (value === "normal") {
         style.lineHeight = null;
         style.lineHeightFactor = null;
-      } else if (Number.isFinite(numeric) && numeric > 0) {
+      } else if (value !== "" && Number.isFinite(numeric) && numeric >= 0) {
         style.lineHeight = numeric * style.fontSize;
         style.lineHeightFactor = numeric;
       } else {
-        const length = computedLength(value, style.fontSize);
-        if (length > 0) {
+        // Non-negative, so 0 is valid (icon buttons set line-height: 0); a
+        // percentage computes to a length against this element's font size.
+        const percentage = /^(\d+\.?\d*|\.\d+)%$/.exec(value);
+        const length = percentage ? Number(percentage[1]) / 100 * style.fontSize : computedLength(value, style.fontSize);
+        if (length >= 0) {
           style.lineHeight = length;
           style.lineHeightFactor = null;
         }
@@ -1452,10 +1604,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 +1628,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 +1646,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 +1654,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 +1731,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])+/;
+class AncestorFilter {
+  #counts = new Int32Array(Math.max(1, FILTER_KEY_IDS.size));
 
-/** 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");
-}
-
-/** 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 +1837,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 +1906,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;
@@ -1797,6 +1934,32 @@ function pseudoElement(pseudo) {
  * percentages of the element's own border box). Other functions are ignored
  * until transforms are painted with matrices.
  */
+/**
+ * The translation (layout moves the box) and scale (paint scales it about
+ * transform-origin) of a transform list; other functions are ignored.
+ */
+function parseTransform(value, fontSize) {
+  const translation = parseTranslate(value, fontSize);
+  if (translation === undefined) return undefined;
+  let scaleX = 1;
+  let scaleY = 1;
+  let found = false;
+  for (const match of value.matchAll(/\b(scale|scaleX|scaleY|scale3d)\(([^)]*)\)/gi)) {
+    const args = splitTopLevel(match[2], ",").map((part) => part.endsWith("%") ? Number(part.slice(0, -1)) / 100 : Number(part));
+    if (!args.length || args.some((part) => !Number.isFinite(part))) return undefined;
+    const kind = match[1].toLowerCase();
+    if (kind === "scalex") scaleX *= args[0];
+    else if (kind === "scaley") scaleY *= args[0];
+    else {
+      scaleX *= args[0];
+      scaleY *= args[1] ?? args[0];
+    }
+    found = true;
+  }
+  if (!found || (scaleX === 1 && scaleY === 1)) return translation;
+  return Object.freeze({ x: translation?.x ?? 0, y: translation?.y ?? 0, scaleX, scaleY });
+}
+
 function parseTranslate(value, fontSize) {
   let x = 0;
   let y = 0;
@@ -1835,7 +1998,7 @@ function parseContent(value) {
  * undefined property without a fallback leaves nothing (the declaration then
  * has no effect).
  */
-function resolveVariables(value, customProperties, seen = new Set()) {
+export function resolveVariables(value, customProperties, seen = new Set()) {
   const text = String(value);
   // Most values use no custom properties; skip the parsing.
   if (!text.includes("var(")) return text.trim();
@@ -2236,6 +2399,64 @@ function resolvedColor(value, scheme) {
   return /^rgba\(/.test(color ?? "") ? color : null;
 }
 
+/**
+ * One layer of the background shorthand, its parts as text: the image, the
+ * position (before a slash) and size (after it), the repeat style and a color.
+ * Null when a token fits none of them.
+ */
+function parseBackgroundLayer(layer) {
+  const tokens = [];
+  let depth = 0;
+  let token = "";
+  for (const character of layer) {
+    if (depth === 0 && (/\s/.test(character) || character === "/")) {
+      if (token) tokens.push(token);
+      if (character === "/") tokens.push("/");
+      token = "";
+      continue;
+    }
+    if (character === "(") depth++;
+    else if (character === ")") depth--;
+    token += character;
+  }
+  if (token) tokens.push(token);
+  const result = { image: "none", position: "0% 0%", size: "auto", repeat: "repeat", color: null };
+  const position = [];
+  const size = [];
+  const repeat = [];
+  let afterSlash = false;
+  for (const raw of tokens) {
+    const lower = raw.toLowerCase();
+    if (raw === "/") afterSlash = true;
+    else if (BACKGROUND_IMAGE.test(raw)) result.image = raw;
+    else if (lower === "none") result.image = "none";
+    else if (BACKGROUND_REPEATS.has(lower)) repeat.push(lower);
+    else if (BACKGROUND_BOXES.has(lower) || BACKGROUND_ATTACHMENTS.has(lower)) continue;
+    else if (afterSlash && (lower === "cover" || lower === "contain" || lower === "auto" || /^-?[\d.]/.test(lower) || lower.startsWith("calc("))) size.push(lower);
+    else if (["left", "right", "top", "bottom", "center"].includes(lower) || /^-?[\d.]/.test(lower) || lower.startsWith("calc(")) {
+      afterSlash = false;
+      position.push(lower);
+    } else if (resolvedColor(raw, "light")) result.color = raw;
+    else return null;
+  }
+  if (position.length) result.position = position.join(" ");
+  if (size.length) result.size = size.join(" ");
+  if (repeat.length) result.repeat = repeat.join(" ");
+  return result;
+}
+
+/** A style sheet with each relative url() made absolute against the sheet's own URL. */
+export function absolutizeStyleSheetUrls(text, base) {
+  return text.replace(/url\(\s*(["']?)([^"')]*)\1\s*\)/gi, (whole, quote, url) => {
+    if (!url || /^(?:[a-z][a-z\d+.-]*:|#)/i.test(url)) return whole;
+    try {
+      return `url(${quote}${new URL(url, base).href}${quote})`;
+    } catch {
+      return whole;
+    }
+  });
+}
+
 function splitTopLevel(source, separator) {
   const parts = [];
   let depth = 0;