buninu-browser 0.5.1 → 0.7.0

package/lib/style/computed-style.js

@@ -14,6 +14,7 @@ const BLOCK_TAGS = new Set([
   "HEADER", "HR", "HTML", "LI", "MAIN", "NAV", "OL", "P", "PRE", "SECTION", "UL",
 ]);
 const NONE_TAGS = new Set(["HEAD", "LINK", "META", "NOFRAMES", "SCRIPT", "STYLE", "TEMPLATE", "TITLE"]);
+const HIDDEN_EAGER_TAGS = new Set(["HTML", "BODY", "BASE", "BASEFONT", "BGSOUND", "NOSCRIPT", "BR", "IMG", "CANVAS", "VIDEO", "AUDIO", "IFRAME", "OBJECT", "EMBED", "INPUT", "TEXTAREA", "SELECT"]);
 const INHERITED = new Set([
   "color", "color-scheme", "font-family", "font-size", "font-weight", "font-style", "font-stretch", "line-height", "list-style-type", "text-align", "white-space",
   "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse", "pointer-events", "direction",
@@ -106,6 +107,14 @@ const PROPERTY_FIELDS = Object.freeze({
   top: ["inset"], right: ["inset"], bottom: ["inset"], left: ["inset"],
 });
 const BORDER_FIELDS = Object.freeze(["borderSpecifiedWidths", "borderStyles", "borderColors", "borderWidths"]);
+// Inputs read from a parent even without an explicit `inherit` declaration.
+// Display affects flex/grid item floats; text decorations propagate separately
+// from the ordinary inherited properties. Root font changes also affect rem.
+const CHILD_STYLE_INPUTS = [...new Set([
+  ...[...INHERITED].flatMap(name => PROPERTY_FIELDS[name]
+    ?? [INHERITED_FIELDS.get(name) ?? name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())]),
+  "display", "textDecorations",
+])];
 
 const INITIAL = Object.freeze({
   display: "inline",
@@ -323,9 +332,16 @@ let environment = DEFAULT_ENVIRONMENT;
 
 export class StyleEngine {
   #measureText;
+  #deferHidden;
+  #hiddenRoots = new WeakSet();
+  #hiddenAncestors = new WeakMap();
+  #ensured = null;
+  #queryContext = null;
+  #usesFontMetrics = false;
   #styles = new WeakMap();
   #customProperties = new WeakMap();
   #pseudoStyles = new WeakMap();
+  #parentDependencies = new WeakMap();
   #document = null;
   #sheetChanges = null;
   /** Elements computed by the last compute(), and whether it was incremental. */
@@ -338,10 +354,20 @@ export class StyleEngine {
   #parsedSheets = new Map();
   #parsedSheetsKey = "";
 
-  constructor({ measureText = null } = {}) {
-    this.#measureText = measureText;
+  // Renderers may defer invisible descendants; standalone callers remain eager.
+  constructor({ measureText = null, deferHidden = false } = {}) {
+    this.#deferHidden = deferHidden;
+    this.#measureText = measureText && ((text, style) => {
+      this.#usesFontMetrics = true;
+      return measureText(text, style);
+    });
   }
 
+  // Font-relative computed lengths (currently ch) depend on loaded typefaces.
+  // Keep this conservative across incremental passes, including var()/pseudo
+  // values and a root font-size which can change descendants' rem lengths.
+  get usesFontMetrics() { return this.#usesFontMetrics; }
+
   /**
    * Computes the document's styles. With `dirty` (elements whose subtree's
    * styles may have changed), only those subtrees are restyled and every
@@ -350,6 +376,7 @@ export class StyleEngine {
    * `restyled` afterwards counts the elements this call computed.
    */
   compute(document, styleSheets = [], viewport = {}, dirty = null, selfOnly = null) {
+    if (this.#document !== document) this.#usesFontMetrics = false;
     const previous = environment;
     environment = {
       viewportWidth: viewport.width ?? DEFAULT_ENVIRONMENT.viewportWidth,
@@ -359,9 +386,16 @@ export class StyleEngine {
       measureText: this.#measureText,
     };
     this.restyled = 0;
+    let queryRules = null, failed = false;
+    if (this.#deferHidden) {
+      this.#hiddenAncestors = new WeakMap();
+      this.#ensured = { styles: new WeakMap(), customProperties: new WeakMap(),
+        pseudoStyles: new WeakMap(), pending: new WeakSet() };
+      this.#queryContext = null;
+    }
     try {
       const before = this.#ruleCache.index;
-      const rules = this.#rulesFor(styleSheets);
+      const rules = queryRules = this.#rulesFor(styleSheets);
       const root = document.documentElement;
       if (dirty !== null && rules !== before) {
         const affected = this.#elementsForSheetChanges(document);
@@ -371,11 +405,20 @@ export class StyleEngine {
         && Boolean(root) && this.#styles.has(root) && !dirty.has(root);
       this.incremental = incremental;
       if (!incremental) {
+        // Recompute every element into fresh maps so detached nodes lose their
+        // styles. On the same document, the prior pass can supply equal immutable
+        // identities for render/layout reuse. Keep this fallback local to the
+        // traversal, including when a callback starts another compute().
+        const previousMaps = this.#document === document ? {
+          styles: this.#styles, customProperties: this.#customProperties, pseudoStyles: this.#pseudoStyles,
+        } : null;
         this.#styles = new WeakMap();
         this.#customProperties = new WeakMap();
         this.#pseudoStyles = new WeakMap();
+        this.#parentDependencies = new WeakMap();
+        if (this.#deferHidden) this.#hiddenRoots = new WeakSet();
         this.#document = document;
-        if (root) this.#visit(root, null, null, rules);
+        if (root) this.#visit(root, null, null, rules, undefined, previousMaps);
         return this;
       }
       // rem units resolve against the root's font size, which is unchanged.
@@ -388,13 +431,24 @@ export class StyleEngine {
         while (start !== root && !this.#styles.has(start.parentElement)) start = start.parentElement;
         starts.add(start);
       }
-      if (starts.has(root) || selfOnly?.has(root)) {
+      if (starts.has(root)) {
         this.#visit(root, null, null, rules);
         return this;
       }
+      if (selfOnly?.has(root)) {
+        // A root-only selector/attribute change may leave its computed values
+        // unchanged. Check it like other self-only elements before cascading
+        // through the document; other dirty subtrees still need their pass.
+        // The root's own font-size rem units use the initial font size, not
+        // the previous generation's root size. #styleOne then sets the basis
+        // used by descendants, including a necessary full subtree restyle.
+        environment = { ...environment, rootFontSize: DEFAULT_ENVIRONMENT.rootFontSize };
+        if (this.#restyleSelf(root, rules)) return this;
+      }
       const topmost = topmostConnected(starts, root);
       for (const start of topmost) {
         const parent = start.parentElement;
+        if (this.#deferHidden && this.#hiddenBoundary(parent)) continue;
         const ancestors = this.#ancestorsOf(start);
         this.#visit(start, this.#styles.get(parent), this.#customProperties.get(parent) ?? EMPTY_MAP, rules, ancestors);
       }
@@ -407,7 +461,14 @@ export class StyleEngine {
         for (let node = element; node && !inside; node = node.parentElement) inside = covered.has(node);
         if (!inside) this.#restyleSelf(element, rules);
       }
+    } catch (error) {
+      failed = true;
+      throw error;
     } finally {
+      if (this.#deferHidden && !failed && this.#document === document) {
+        this.#queryContext = { rules: queryRules, environment: { ...environment,
+          rootFontSize: this.#styles.get(document.documentElement)?.fontSize ?? DEFAULT_ENVIRONMENT.rootFontSize } };
+      }
       environment = previous;
     }
     return this;
@@ -502,29 +563,106 @@ export class StyleEngine {
   }
 
   get(element) {
-    return this.#styles.get(element) ?? INITIAL;
+    return (this.#ensureHidden(element)?.styles ?? 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;
+    return (this.#ensureHidden(element)?.customProperties ?? 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;
+    return (this.#ensureHidden(element)?.pseudoStyles ?? this.#pseudoStyles).get(element)?.[pseudo] ?? null;
+  }
+
+  // Only descendants are deferred: the boundary itself must remain styled so
+  // its display/inherited/custom values can be observed or reveal its children.
+  #canDefer(element, style) {
+    return style.display === "none" && element.namespaceURI === "http://www.w3.org/1999/xhtml"
+      && element !== this.#document.documentElement && element !== this.#document.body
+      && !NONE_TAGS.has(element.tagName)
+      && !HIDDEN_EAGER_TAGS.has(element.tagName);
+  }
+
+  // Inclusive outermost hidden boundary. Nested old boundaries can have stale
+  // base styles after their ancestor hides, so queries begin at the outermost.
+  // Cache ancestor paths per compute pass;
+  // changing a boundary clears them before any later traversal/query can use it.
+  #hiddenBoundary(element) {
+    const path = [];
+    let node = element;
+    while (node && !this.#hiddenAncestors.has(node)) { path.push(node); node = node.parentElement; }
+    let boundary = node ? this.#hiddenAncestors.get(node) : null;
+    for (let index = path.length - 1; index >= 0; index--) {
+      const current = path[index];
+      if (!boundary && this.#hiddenRoots.has(current)) boundary = current;
+      this.#hiddenAncestors.set(current, boundary);
+    }
+    return boundary;
+  }
+
+  #ensureHidden(element) {
+    if (!this.#deferHidden || !this.#queryContext || !element?.isConnected
+      || element.ownerDocument !== this.#document) return null;
+    const boundary = this.#hiddenBoundary(element.parentElement);
+    if (!boundary) return null;
+    const target = this.#ensured, context = this.#queryContext;
+    // Font measurement may synchronously read styles. Do not restart an
+    // unfinished chain. During pseudo computation the principal style is
+    // already available, while pseudo reads still see the prior generation.
+    if (target.pending.has(element)) return target.styles.has(element)
+      ? { styles: target.styles, customProperties: target.customProperties, pseudoStyles: this.#pseudoStyles }
+      : null;
+    if (target.styles.has(element)) return target;
+    const chain = [];
+    let parent = element;
+    while (parent && parent !== boundary && !target.styles.has(parent)) {
+      if (target.pending.has(parent)) return null;
+      chain.push(parent); parent = parent.parentElement;
+    }
+    if (!parent || target.pending.has(parent)) return null;
+    const parentMaps = parent === boundary ? { styles: this.#styles, customProperties: this.#customProperties } : target;
+    let style = parentMaps.styles.get(parent), custom = parentMaps.customProperties.get(parent) ?? EMPTY_MAP;
+    for (const node of chain) target.pending.add(node);
+    const previous = environment;
+    environment = context.environment;
+    try {
+      const ancestors = this.#ancestorsOf(chain.at(-1));
+      const previousMaps = { styles: this.#styles, customProperties: this.#customProperties, pseudoStyles: this.#pseudoStyles };
+      for (let index = chain.length - 1; index >= 0; index--) {
+        const node = chain[index], keys = elementKeys(node);
+        try {
+          const result = this.#styleOne(node, style, custom, context.rules, keys, ancestors, previousMaps, target);
+          style = result.style; custom = result.customProperties;
+        } catch (error) {
+          // A pseudo can fail after principal values were stored. Retain only
+          // complete ancestors; the failed node must be recomputed on retry.
+          target.styles.delete(node); target.customProperties.delete(node); target.pseudoStyles.delete(node);
+          throw error;
+        } finally { target.pending.delete(node); }
+        ancestors.push(keys);
+      }
+    } finally {
+      for (const node of chain) target.pending.delete(node);
+      environment = previous;
+    }
+    return target;
   }
 
   /** 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);
+  #styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors, previousMaps = null, target = null) {
+    const styles = target?.styles ?? this.#styles, customMap = target?.customProperties ?? this.#customProperties;
+    const pseudoMap = target?.pseudoStyles ?? this.#pseudoStyles;
+    const previousStyle = styles.get(element) ?? previousMaps?.styles.get(element);
+    const previousCustom = customMap.get(element) ?? previousMaps?.customProperties.get(element);
+    const previousPseudo = pseudoMap.get(element) ?? previousMaps?.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));
     let customProperties = withCustomProperties(parentCustomProperties ?? EMPTY_MAP, declarations);
-    let style = computeElementStyle(element, parentStyle, declarations, customProperties);
+    const dependencies = { inheritsParent: false };
+    let style = computeElementStyle(element, parentStyle, declarations, customProperties, dependencies, true);
     // 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.
@@ -532,36 +670,49 @@ export class StyleEngine {
     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);
+    styles.set(element, style);
+    customMap.set(element, customProperties);
     let pseudoStyles = {};
     for (const pseudo of ["before", "after"]) {
       const pseudoDeclarations = cascadeDeclarations(element, rules, pseudo, keys, ancestors);
       if (!pseudoDeclarations.has("content")) continue;
       const pseudoCustom = withCustomProperties(customProperties, pseudoDeclarations);
-      const pseudoStyle = computeElementStyle(pseudoElement(pseudo), style, pseudoDeclarations, pseudoCustom);
+      const pseudoStyle = computeElementStyle(pseudoElement(pseudo), style, pseudoDeclarations, pseudoCustom, dependencies);
       // `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++;
+    if (pseudoStyles.before || pseudoStyles.after) pseudoMap.set(element, pseudoStyles);
+    else pseudoMap.delete(element);
+    // Dependencies can change without changing computed values, for example
+    // width:100px -> width:inherit while the parent is already 100px wide.
+    if (!target) {
+      this.#parentDependencies.set(element, dependencies.inheritsParent);
+      if (this.#deferHidden) {
+        const hidden = this.#canDefer(element, style);
+        if (hidden !== this.#hiddenRoots.has(element)) {
+          if (hidden) this.#hiddenRoots.add(element); else this.#hiddenRoots.delete(element);
+          this.#hiddenAncestors = new WeakMap();
+        }
+      }
+      this.restyled++;
+    }
     return { style, customProperties };
   }
 
-  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new AncestorFilter()) {
+  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new AncestorFilter(), previousMaps = null) {
     const keys = elementKeys(element);
-    const { style, customProperties } = this.#styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors);
-    this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
+    const { style, customProperties } = this.#styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors, previousMaps);
+    this.#visitChildren(element, keys, style, customProperties, rules, ancestors, previousMaps);
   }
 
-  #visitChildren(element, keys, style, customProperties, rules, ancestors) {
+  #visitChildren(element, keys, style, customProperties, rules, ancestors, previousMaps = null) {
+    if (this.#deferHidden && this.#hiddenRoots.has(element)) return;
     // The element is an ancestor of everything below it.
     const own = ancestors.push(keys);
-    for (const child of element.children) this.#visit(child, style, customProperties, rules, ancestors);
+    for (const child of element.children) this.#visit(child, style, customProperties, rules, ancestors, previousMaps);
     ancestors.pop(own);
   }
 
@@ -573,32 +724,59 @@ export class StyleEngine {
   }
 
   /**
-   * Restyles one element; only when its style (or ::before/::after, or the
-   * custom properties it passes down) changed does its subtree follow.
+   * Restyles one element and propagates changed parent inputs. Returns true
+   * only when every descendant was visited, so a root-only update cannot
+   * swallow independently dirty subtrees after a partial propagation.
    */
-  #restyleSelf(element, rules) {
+  #restyleSelf(element, rules, ancestors = this.#ancestorsOf(element)) {
     const parent = element.parentElement;
+    if (this.#deferHidden && this.#hiddenBoundary(parent)) return false;
     const before = { style: this.#styles.get(element), pseudo: this.#pseudoStyles.get(element), custom: this.#customProperties.get(element) };
     const keys = elementKeys(element);
-    const ancestors = this.#ancestorsOf(element);
     const { style, customProperties } = this.#styleOne(element, this.#styles.get(parent), this.#customProperties.get(parent) ?? EMPTY_MAP, rules, keys, ancestors);
+    if (this.#deferHidden && this.#hiddenRoots.has(element)) return true;
     const pseudo = this.#pseudoStyles.get(element);
     if (sameValue(before.style, style) && sameValue(before.pseudo ?? null, pseudo ?? null) && sameCustom(before.custom, customProperties)) {
       // Unchanged: keep the previous objects so later comparisons stay cheap.
       this.#styles.set(element, before.style);
-      return;
+      return false;
     }
-    this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
+    if (!sameChildStyleInputs(before.style, style) || !sameCustom(before.custom, customProperties)) {
+      this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
+      return true;
+    }
+    // The parent's ordinary inherited inputs did not change. Only immediate
+    // children with explicit inheritance can observe its other properties;
+    // an unchanged child also shields its descendants from those changes.
+    const own = ancestors.push(keys);
+    try {
+      for (const child of element.children) {
+        if (!this.#styles.has(child) || !this.#parentDependencies.has(child)) {
+          this.#visit(child, style, customProperties, rules, ancestors);
+        } else if (before.style !== style && this.#parentDependencies.get(child)) {
+          this.#restyleSelf(child, rules, ancestors);
+        }
+      }
+    } finally { ancestors.pop(own); }
+    return false;
   }
 }
 
+function sameChildStyleInputs(before, after) {
+  return Boolean(before && after) && CHILD_STYLE_INPUTS.every(field => sameValue(before[field], after[field]));
+}
+
 /** Structural equality of computed style values (frozen objects and arrays). */
 function sameValue(left, right) {
   if (left === right) return true;
   if (!left || !right || typeof left !== "object" || typeof right !== "object") return false;
   const keys = Object.keys(left);
   if (keys.length !== Object.keys(right).length) return false;
-  return keys.every((key) => sameValue(left[key], right[key]));
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index], a = left[key], b = right[key];
+    if (a !== b && !sameValue(a, b)) return false;
+  }
+  return true;
 }
 
 function sameCustom(left, right) {
@@ -684,7 +862,7 @@ function withCustomProperties(inherited, declarations) {
   return result;
 }
 
-export function computeElementStyle(element, parentStyle = null, authorDeclarations = null, customProperties = new Map()) {
+export function computeElementStyle(element, parentStyle = null, authorDeclarations = null, customProperties = new Map(), dependencies = null, inlineCascaded = false) {
   const values = { ...INITIAL };
   if (parentStyle) {
     for (const property of INHERITED) {
@@ -742,14 +920,18 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
       declarations.set(declaration.name, { ...declaration, specificity: -1, order: -1, layer: -Infinity });
     }
   }
-  for (const declaration of parseDeclarations(element.getAttribute("style") ?? "").values()) {
+  // StyleEngine already merged inline declarations before resolving custom
+  // properties. Direct callers still need the ordinary inline cascade here.
+  for (const declaration of inlineCascaded ? [] : parseDeclarations(element.getAttribute("style") ?? "").values()) {
     const current = declarations.get(declaration.name);
     if (!current?.important || declaration.important) {
       declarations.set(declaration.name, { ...declaration, specificity: 1_000_000, order: Infinity });
     }
   }
   const reset = declarations.get("all");
-  if (reset && CSS_WIDE_KEYWORDS.has(resolveVariables(reset.value, customProperties))) {
+  const resetValue = reset && resolveVariables(reset.value, customProperties);
+  if (reset && CSS_WIDE_KEYWORDS.has(resetValue)) {
+    if (dependencies && resetValue === "inherit") dependencies.inheritsParent = true;
     // Expand before resolving font prerequisites. Competing declarations
     // keep their normal importance, specificity and source-order priority.
     for (const name of ALL_PROPERTIES) {
@@ -763,17 +945,18 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   const font = declarations.get("font");
   if (font && (!fontSize || compareDeclarations(font, fontSize) > 0)) {
     const fontValue = resolveVariables(font.value, customProperties);
+    if (dependencies && fontValue === "inherit") dependencies.inheritsParent = true;
     const parsed = parseFontShorthand(fontValue);
     if (CSS_WIDE_KEYWORDS.has(fontValue)) setProperty(values, "font-size", fontValue, parentStyle);
     else if (parsed) setProperty(values, "font-size", parsed.size, parentStyle);
   } else if (fontSize) {
-    applyDeclaration(values, fontSize, customProperties, parentStyle);
+    applyDeclaration(values, fontSize, customProperties, parentStyle, dependencies);
   }
   // light-dark() depends on the used scheme regardless of declaration order.
   const colorScheme = declarations.get("color-scheme");
-  if (colorScheme) applyDeclaration(values, colorScheme, customProperties, parentStyle);
+  if (colorScheme) applyDeclaration(values, colorScheme, customProperties, parentStyle, dependencies);
   const directionDeclaration = declarations.get("direction");
-  if (directionDeclaration) applyDeclaration(values, directionDeclaration, customProperties, parentStyle);
+  if (directionDeclaration) applyDeclaration(values, directionDeclaration, customProperties, parentStyle, dependencies);
   // Apply in cascade order so a later shorthand overrides earlier longhands and vice versa.
   const ordered = [...declarations.values()].sort(compareDeclarations);
   // Font-relative lengths such as ch use this element's final font, even
@@ -781,6 +964,7 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   for (const declaration of ordered) {
     if (declaration.name === "font") {
       const fontValue = resolveVariables(declaration.value, customProperties);
+      if (dependencies && fontValue === "inherit") dependencies.inheritsParent = true;
       const parsed = parseFontShorthand(fontValue);
       if (CSS_WIDE_KEYWORDS.has(fontValue)) {
         setProperty(values, "font-family", fontValue, parentStyle);
@@ -795,13 +979,13 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
         setProperty(values, "font-stretch", parsed.stretch ?? "normal", parentStyle);
       }
     } else if (["font-family", "font-weight", "font-style", "font-stretch", "font-width"].includes(declaration.name)) {
-      applyDeclaration(values, declaration, customProperties, parentStyle);
+      applyDeclaration(values, declaration, customProperties, parentStyle, dependencies);
     }
   }
   for (const declaration of ordered) {
     if (declaration.name.startsWith("--") || ["font-size", "font-family", "font-weight", "font-style", "font-stretch", "font-width", "color-scheme", "direction"].includes(declaration.name)) continue;
     // The shorthand's size was settled above; its other parts apply in order.
-    applyDeclaration(values, declaration.name === "font" ? { ...declaration, name: "font-parts" } : declaration, customProperties, parentStyle);
+    applyDeclaration(values, declaration.name === "font" ? { ...declaration, name: "font-parts" } : declaration, customProperties, parentStyle, dependencies);
   }
   // Floats (approximation): laid out as atomic inlines in the line, left floats
   // in order and right floats at the line's end. Absolutely positioned boxes
@@ -817,8 +1001,10 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   values.borderWidths = Object.freeze(values.borderSpecifiedWidths.map((width, index) =>
     ["none", "hidden"].includes(values.borderStyles[index]) ? 0 : width));
   values.borderColors = Object.freeze(values.borderColors.map((color) => color ?? values.color));
-  values.borderStyles = Object.freeze([...values.borderStyles]);
-  values.borderSpecifiedWidths = Object.freeze([...values.borderSpecifiedWidths]);
+  // Initial/inherited arrays are already immutable. Setters use copy-on-write;
+  // retain those arrays, but still isolate any mutable caller-owned values.
+  values.borderStyles = Object.isFrozen(values.borderStyles) ? values.borderStyles : Object.freeze([...values.borderStyles]);
+  values.borderSpecifiedWidths = Object.isFrozen(values.borderSpecifiedWidths) ? values.borderSpecifiedWidths : Object.freeze([...values.borderSpecifiedWidths]);
   // A unitless line-height inherits as a factor of each element's own font size.
   if (values.lineHeightFactor != null) values.lineHeight = values.lineHeightFactor * values.fontSize;
   if (values.color === "rgba(0, 0, 0, 0)" && values.backgroundClip === "text" && values.backgroundImage) {
@@ -838,7 +1024,7 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   values.textDecorations = decorations;
   if (control === "textarea" || control === "text") applyControlSize(element, control, values);
   values.margin = Object.freeze(values.margin);
-  values.inset = Object.freeze([...values.inset]);
+  values.inset = Object.isFrozen(values.inset) ? values.inset : Object.freeze([...values.inset]);
   values.padding = Object.freeze(values.padding);
   return Object.freeze(values);
 }
@@ -1298,9 +1484,11 @@ const reportedDeclarationErrors = new Set();
  * Applies one cascaded declaration. A declaration the engine cannot handle is
  * dropped, as an invalid declaration would be, instead of failing the page.
  */
-function applyDeclaration(style, declaration, customProperties, parentStyle) {
+function applyDeclaration(style, declaration, customProperties, parentStyle, dependencies = null) {
   try {
-    setProperty(style, declaration.name, resolveVariables(declaration.value, customProperties), parentStyle);
+    const value = resolveVariables(declaration.value, customProperties);
+    if (dependencies && value === "inherit") dependencies.inheritsParent = true;
+    setProperty(style, declaration.name, value, parentStyle);
   } catch (error) {
     const key = `${declaration.name}: ${declaration.value}`;
     if (reportedDeclarationErrors.size < 100 && !reportedDeclarationErrors.has(key)) {
@@ -2130,7 +2318,11 @@ export function matchSelectors(root, selectors, compiledSelectors = new Map()) {
 function elementKeys(element) {
   const id = element.getAttribute?.("id") || null;
   const className = element.getAttribute?.("class");
-  const classes = className ? [...new Set(className.split(/\s+/))].filter(Boolean) : [];
+  // Candidate stamps deduplicate rules/selectors, and ancestor counts balance
+  // repeated keys. Deduplicate long lists to bound repeated bucket walks while
+  // avoiding a Set allocation for the usual short class attribute.
+  let classes = className ? className.split(/\s+/).filter(Boolean) : [];
+  if (classes.length > 16) classes = [...new Set(classes)];
   const attrs = [];
   for (const attribute of element.attributes ?? []) attrs.push(String(attribute.name).toLowerCase());
   const tag = element.localName ?? element.tagName;
@@ -2509,23 +2701,27 @@ function copyProperty(style, name, source) {
   }
 }
 
+// Most inheritance asks for one value (often line-height). Do not serialize
+// unrelated font families and numeric properties for every element.
 function cssValue(style, name) {
-  return ({
-    "background-color": style.backgroundColor,
-    "font-family": style.fontFamily.map((family) => JSON.stringify(family)).join(", "),
-    "font-size": `${style.fontSize}px`,
-    "font-weight": String(style.fontWeight),
-    "font-style": style.fontStyle,
-    "font-stretch": `${style.fontStretch}%`,
-    "font-width": `${style.fontStretch}%`,
-    "line-height": style.lineHeightFactor != null ? String(style.lineHeightFactor)
-      : style.lineHeight == null ? "normal" : `${style.lineHeight}px`,
-    "list-style-type": style.listStyleType,
-    "pointer-events": style.pointerEvents,
-    "user-select": style.userSelect,
-    "text-align": style.textAlign,
-    "white-space": style.whiteSpace,
-  })[name] ?? style[name];
+  let value;
+  switch (name) {
+    case "background-color": value = style.backgroundColor; break;
+    case "font-family": value = style.fontFamily.map((family) => JSON.stringify(family)).join(", "); break;
+    case "font-size": value = `${style.fontSize}px`; break;
+    case "font-weight": value = String(style.fontWeight); break;
+    case "font-style": value = style.fontStyle; break;
+    case "font-stretch":
+    case "font-width": value = `${style.fontStretch}%`; break;
+    case "line-height": value = style.lineHeightFactor != null ? String(style.lineHeightFactor)
+      : style.lineHeight == null ? "normal" : `${style.lineHeight}px`; break;
+    case "list-style-type": value = style.listStyleType; break;
+    case "pointer-events": value = style.pointerEvents; break;
+    case "user-select": value = style.userSelect; break;
+    case "text-align": value = style.textAlign; break;
+    case "white-space": value = style.whiteSpace; break;
+  }
+  return value ?? style[name];
 }
 
 function pixelLength(value) {

package/package.json

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

package/test/animation-frames.test.js

@@ -0,0 +1,67 @@
+import { expect, test } from "bun:test";
+import { createAnimationFrames, supportsFrameCheckpoint } from "../lib/renderer/animation-frames.js";
+
+// Bun.version hides the suffix of unsafe 1.4.3 canaries. Require the later
+// 1.4.4 branch and retain timers for unknown prerelease channels.
+test("animation batching requires a microtask-only Bun checkpoint", () => {
+  for (const version of ["1.4.2", "1.4.3", "1.4.3-canary.1", "1.4.4-dev.1", "1.4.4+local", "v1.4.4", "unknown", null]) {
+    expect(supportsFrameCheckpoint(version)).toBe(false);
+  }
+  for (const version of ["1.4.4", "1.4.4-canary", "1.4.4-canary.1", "1.5.0"]) expect(supportsFrameCheckpoint(version)).toBe(true);
+});
+
+const frameTest = supportsFrameCheckpoint() ? test : test.skip;
+frameTest("frame snapshots preserve timestamps, checkpoints, cancellation and disposal", () => {
+  let now = 0, nextWake = 0;
+  const pending = new Map(), events = [], timestamps = [], errors = [];
+  const timers = {
+    schedule(callback, delay, repeat, timerTask) {
+      expect([repeat, timerTask]).toEqual([false, false]);
+      pending.set(++nextWake, { callback, delay });
+      return nextWake;
+    },
+    cancel(id) { pending.delete(id); },
+    dispose() { pending.clear(); },
+  };
+  const fire = () => {
+    const [id, entry] = pending.entries().next().value;
+    pending.delete(id); now += entry.delay; entry.callback();
+  };
+  const frames = createAnimationFrames({ now: () => now, frameTimers: timers,
+    invoke(callback, time) { try { callback(time); } catch (error) { errors.push(error.message); } },
+  });
+  let cancelled;
+  frames.request(time => {
+    timestamps.push(time); events.push("first"); now += 40;
+    Promise.resolve().then(() => events.push("microtask-one")).then(() => {
+      events.push("microtask-two"); frames.cancel(cancelled);
+      frames.request(time => {
+        events.push("nested"); timestamps.push(time);
+        Promise.resolve().then(() => frames.dispose());
+      });
+      frames.request(() => events.push("disposed"));
+    });
+  });
+  cancelled = frames.request(() => events.push("cancelled"));
+  frames.request(time => { timestamps.push(time); throw new Error("expected"); });
+  frames.request(time => { events.push("last"); timestamps.push(time); });
+  expect(pending.size).toBe(1); fire();
+  expect(events).toEqual(["first", "microtask-one", "microtask-two", "last"]);
+  expect(timestamps).toEqual([16, 16, 16]);
+  expect(errors).toEqual(["expected"]);
+  expect(pending.size).toBe(1); fire();
+  expect(events.at(-1)).toBe("nested");
+  expect(timestamps.at(-1)).toBe(56);
+  expect(pending.size).toBe(0);
+});
+
+test("actual SES frame callbacks match the browser callback order and lifecycle", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/animation-frames.js", import.meta.url).pathname], {
+    stdout: "pipe", stderr: "pipe",
+  });
+  const [out, error, code] = await Promise.all([
+    new Response(child.stdout).text(), new Response(child.stderr).text(), child.exited,
+  ]);
+  expect({ code, error }).toEqual({ code: 0, error: "" });
+  expect(out).toContain("animation frame ordering and lifecycle passed");
+}, 15000);