@miaskiewicz/turbo-dom 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Faster, more spec-correct DOM for test runners — native html5ever (Rust/WASM) parser + lazy copy-on-write DOM. A drop-in-style alternative to jsdom/happy-dom for vitest & jest.",
   "license": "MIT",
   "main": "index.js",

package/src/runtime/cascade.mjs

@@ -0,0 +1,182 @@
+// Partial computed-style cascade — resolves getComputedStyle from injected <style>
+// sheets (emotion/MUI `.css-HASH { … }`), inline styles, and specificity ordering.
+//
+// PERF: every hot path (parse, querySelectorAll, getElementsBy*, matching, events)
+// NEVER calls getComputedStyle — only test assertions do. So all work here is lazy,
+// gated behind getComputedStyle, and memoized on Document.__version. Zero bytes are
+// added to any benchmarked path.
+//
+// HONEST: this only ever returns values that come from a REAL matched rule or inline
+// style. A property no stylesheet/inline set still reads '' — it never invents
+// layout/cascade numbers. Out of scope (return ''): @media/@supports/@keyframes,
+// :hover & other stateful pseudo-classes, pseudo-elements, full inheritance,
+// CSS custom-property resolution, length normalization.
+
+import { matchesSelector } from './selectors.mjs';
+
+const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+
+// Longhand → shorthand fallback for single-token shorthands (mirrors dom.mjs styleGet).
+const SHORTHAND_OF = {
+  'background-color': 'background',
+  'margin-top': 'margin', 'margin-right': 'margin', 'margin-bottom': 'margin', 'margin-left': 'margin',
+  'padding-top': 'padding', 'padding-right': 'padding', 'padding-bottom': 'padding', 'padding-left': 'padding',
+};
+
+// Length properties whose bare `0` real browsers serialize as `0px` in computed style.
+const LENGTH_PROPS = new Set([
+  'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',
+  'top', 'right', 'bottom', 'left', 'flex-basis', 'gap', 'row-gap', 'column-gap',
+  'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+  'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+  'border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
+  'font-size', 'letter-spacing', 'word-spacing', 'text-indent',
+]);
+
+const BORDER_STYLES = new Set(['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']);
+
+// Expand the common shorthands into longhands so longhand computed getters resolve
+// (e.g. `border:1px solid` → borderWidth '1px'). Cheap, test-time only; later
+// declarations of the same longhand override naturally (cascade order preserved).
+function setProp(map, name, val) {
+  map.set(name, val);
+  if (name === 'margin' || name === 'padding') {
+    const t = val.trim().split(/\s+/);
+    const top = t[0], right = t[1] ?? top, bottom = t[2] ?? top, left = t[3] ?? right;
+    map.set(name + '-top', top); map.set(name + '-right', right);
+    map.set(name + '-bottom', bottom); map.set(name + '-left', left);
+  } else if (name === 'border') {
+    let width, style, color;
+    for (const p of val.trim().split(/\s+/)) {
+      if (BORDER_STYLES.has(p)) style = p;
+      else if (/^(thin|medium|thick)$/.test(p) || /^[\d.]+(px|em|rem|%|pt|vh|vw)?$/.test(p)) width = p;
+      else color = p;
+    }
+    if (width !== undefined) { map.set('border-width', width); for (const s of ['top', 'right', 'bottom', 'left']) map.set(`border-${s}-width`, width); }
+    if (style !== undefined) map.set('border-style', style);
+    if (color !== undefined) map.set('border-color', color);
+  } else if (name === 'background' && !/\s/.test(val.trim())) {
+    map.set('background-color', val.trim());
+  }
+}
+
+function parseDecls(text, into) {
+  const map = into || new Map();
+  for (const decl of text.split(';')) {
+    const c = decl.indexOf(':');
+    if (c === -1) continue;
+    const name = decl.slice(0, c).trim().toLowerCase();
+    if (!name) continue;
+    setProp(map, name, decl.slice(c + 1).trim().replace(/\s*!\s*important\s*$/i, ''));
+  }
+  return map;
+}
+
+// rough WHATWG specificity: a*10000 + b*100 + c (ids, classes/attrs/pseudos, types)
+function specificity(sel) {
+  const a = (sel.match(/#[\w-]+/g) || []).length;
+  const b = (sel.match(/\.[\w-]+|\[[^\]]*\]|:[\w-]+/g) || []).length;
+  const c = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
+  return a * 10000 + b * 100 + c;
+}
+
+// Brace-depth scan: emit only depth-1 rules whose selector isn't an at-rule; the
+// bodies of @media/@keyframes (nested braces) are skipped wholesale.
+function parseStylesheet(css, startOrder, rules) {
+  css = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  let order = startOrder, i = 0;
+  const n = css.length;
+  while (i < n) {
+    let j = i;
+    while (j < n && css[j] !== '{' && css[j] !== '}') j++;
+    if (j >= n) break;
+    if (css[j] === '}') { i = j + 1; continue; }
+    const sel = css.slice(i, j).trim();
+    let depth = 1, k = j + 1;
+    while (k < n && depth > 0) { const ch = css[k]; if (ch === '{') depth++; else if (ch === '}') depth--; k++; }
+    if (sel && sel[0] !== '@') {
+      const decls = parseDecls(css.slice(j + 1, k - 1));
+      if (decls.size) for (const part of sel.split(',')) {
+        const t = part.trim();
+        if (t) rules.push({ selector: t, decls, spec: specificity(t), order: order++ });
+      }
+    } else { order++; }
+    i = k;
+  }
+  return order;
+}
+
+function buildIndex(document) {
+  const styles = document.getElementsByTagName('style');
+  const rules = [];
+  let order = 0;
+  for (let i = 0; i < styles.length; i++) order = parseStylesheet(styles[i].textContent || '', order, rules);
+  return rules;
+}
+
+function getIndex(doc, v) {
+  const cached = doc.__styleIndex;
+  if (cached && cached.v === v) return cached.rules;
+  const rules = buildIndex(doc);
+  doc.__styleIndex = { v, rules };
+  return rules;
+}
+
+function resolve(el, rules) {
+  const out = new Map();
+  const matched = [];
+  for (let i = 0; i < rules.length; i++) {
+    const r = rules[i];
+    try { if (matchesSelector(el, r.selector)) matched.push(r); } catch { /* unsupported selector → skip */ }
+  }
+  matched.sort((x, y) => x.spec - y.spec || x.order - y.order);
+  for (const r of matched) for (const [k, val] of r.decls) out.set(k, val);
+  // inline style wins over stylesheet rules
+  const inline = el.getAttribute && el.getAttribute('style');
+  if (inline) parseDecls(inline, out);
+  return out;
+}
+
+function lookup(map, prop) {
+  let v = map.get(prop);
+  if (v === undefined) {
+    const sh = SHORTHAND_OF[prop];
+    if (sh) { const s = map.get(sh); if (s !== undefined && !/\s/.test(s.trim())) v = s; }
+  }
+  if (v === undefined) return '';
+  // px-normalize a bare `0` for length properties (browsers report `0px`)
+  if (v === '0' && LENGTH_PROPS.has(prop)) return '0px';
+  return v;
+}
+
+function makeProxy(map, v) {
+  return new Proxy({}, {
+    get(_t, key) {
+      if (key === '__v') return v;
+      if (key === '__honest') return 'computed style resolves injected <style> + inline; no layout/@media/state';
+      if (key === 'getPropertyValue') return (p) => lookup(map, String(p).toLowerCase());
+      if (key === 'getPropertyPriority') return () => '';
+      if (key === 'length') return map.size;
+      if (key === 'item') return (i) => [...map.keys()][i] ?? '';
+      if (key === Symbol.iterator) { const ks = [...map.keys()]; return ks[Symbol.iterator].bind(ks); }
+      if (typeof key !== 'string') return undefined;
+      return lookup(map, kebab(key));
+    },
+  });
+}
+
+// getComputedStyle(el): resolves cascade, memoized per element on the current
+// Document.__version (any style/DOM mutation bumps it → cache auto-invalidates).
+export function makeGetComputedStyle() {
+  return (el) => {
+    if (!el) return makeProxy(new Map(), -1);
+    const doc = el.ownerDocument;
+    const v = doc ? (doc.__version || 0) : 0;
+    const cached = el.__computedStyle;
+    if (cached && cached.__v === v) return cached;
+    const map = doc ? resolve(el, getIndex(doc, v)) : new Map();
+    const proxy = makeProxy(map, v);
+    el.__computedStyle = proxy;
+    return proxy;
+  };
+}

package/src/runtime/dom.mjs

@@ -191,15 +191,19 @@ export class Node extends EventTarget {
   }
   normalize() {
     const kids = this.__children();
+    let changed = false;
     for (let i = kids.length - 1; i > 0; i--) {
       if (kids[i].nodeType === TEXT_NODE && kids[i - 1].nodeType === TEXT_NODE) {
-        kids[i - 1]._data += kids[i].data; kids[i].parentNode = null; kids.splice(i, 1);
+        kids[i - 1]._data += kids[i].data; kids[i].parentNode = null; kids.splice(i, 1); changed = true;
       }
     }
     for (let i = kids.length - 1; i >= 0; i--) {
-      if (kids[i].nodeType === TEXT_NODE && kids[i].data === '') { kids[i].parentNode = null; kids.splice(i, 1); }
+      if (kids[i].nodeType === TEXT_NODE && kids[i].data === '') { kids[i].parentNode = null; kids.splice(i, 1); changed = true; }
       else if (kids[i].nodeType === ELEMENT_NODE) kids[i].normalize();
     }
+    // normalize mutates __kids in place — bump __version (invalidate cached queries)
+    // and feed MutationObservers, like every other childList mutation path.
+    if (changed) notifyMutation(this, { type: 'childList', target: this, addedNodes: [], removedNodes: [], nextSibling: null });
   }
   replaceChildren(...nodes) { this.__kids = []; this.__touch(); for (const n of nodes) this.appendChild(typeof n === 'string' ? this.ownerDocument.createTextNode(n) : n); }
   // bitmask: 1 DISCONNECTED, 2 PRECEDING, 4 FOLLOWING, 8 CONTAINS, 16 CONTAINED_BY
@@ -355,12 +359,14 @@ export class Element extends Node {
   // elements are inflated for traversal but never have attrs read).
   __buildAttrs() { const doc = this.ownerDocument, buf = doc && doc.__buf; return (this.__attrIdx >= 0 && buf) ? buf.attrs(this.__attrIdx) : []; }
   getAttribute(name) {
+    if (!this.__ns) name = ('' + name).toLowerCase(); // HTML attr names are ASCII-lowercased (SVG/MathML keep case)
     const at = this.__attrs;
     if (at !== undefined) { for (let i = 0; i < at.length; i++) if (at[i].name === name) return at[i].value; return null; }
     const doc = this.ownerDocument, buf = doc && doc.__buf;        // lazy: read column, don't materialize
     return (this.__attrIdx >= 0 && buf) ? buf.attrGet(this.__attrIdx, name) : null;
   }
   hasAttribute(name) {
+    if (!this.__ns) name = ('' + name).toLowerCase();
     const at = this.__attrs;
     if (at !== undefined) { for (let i = 0; i < at.length; i++) if (at[i].name === name) return true; return false; }
     const doc = this.ownerDocument, buf = doc && doc.__buf;
@@ -368,6 +374,7 @@ export class Element extends Node {
   }
   getAttributeNames() { return (this.__attrs ?? (this.__attrs = this.__buildAttrs())).map((a) => a.name); }
   setAttribute(name, value) {
+    if (!this.__ns) name = ('' + name).toLowerCase();
     if (this.__attrs === undefined) this.__attrs = this.__buildAttrs();
     const a = this.__attrs.find((x) => x.name === name);
     const old = a ? a.value : null;
@@ -376,6 +383,7 @@ export class Element extends Node {
     notifyMutation(this, { type: 'attributes', target: this, attributeName: name, oldValue: old, addedNodes: [], removedNodes: [] });
   }
   removeAttribute(name) {
+    if (!this.__ns) name = ('' + name).toLowerCase();
     if (this.__attrs === undefined) this.__attrs = this.__buildAttrs();
     const a = this.__attrs.find((x) => x.name === name);
     this.__attrs = this.__attrs.filter((x) => x.name !== name);
@@ -453,13 +461,13 @@ export class Element extends Node {
     const t = this.localName;
     if (t === 'select') { for (const o of this.getElementsByTagName('option')) o.selected = (o.value === String(x)); return; }
     if (t === 'option') { this.setAttribute('value', x); return; }
-    // typed <input> sanitizes per the value-sanitization algorithm: invalid
-    // values for date/time/number/etc are rejected (value left unchanged), so
-    // user-event typing them char-by-char doesn't emit bogus partial values.
+    // typed <input> runs the WHATWG value-sanitization algorithm: a value that
+    // isn't valid for date/time/number/etc becomes the EMPTY string (not the prior
+    // value). Matches real browsers — React's value tracker then sees the change and
+    // fires onChange, where retaining the old value would silently swallow it.
     if (t === 'input') {
       const sanitized = sanitizeInputValue((this.getAttribute('type') || 'text').toLowerCase(), String(x));
-      if (sanitized === null) return; // invalid → reject, keep current value
-      this.__value = sanitized;
+      this.__value = sanitized === null ? '' : sanitized;
     } else {
       this.__value = String(x);
     }
@@ -505,6 +513,33 @@ export class Element extends Node {
   set name(x) { this.setAttribute('name', x); }
   get placeholder() { return this.getAttribute('placeholder') ?? ''; }
   set placeholder(x) { this.setAttribute('placeholder', x); }
+  // IDL-attribute reflection: React assigns these as element PROPERTIES; without a
+  // reflecting setter the value never reaches a content attribute, so getAttribute/
+  // toHaveAttribute see nothing. Mirrors the canonical lowercased attribute name.
+  get inputMode() { return this.getAttribute('inputmode') ?? ''; }
+  set inputMode(x) { this.setAttribute('inputmode', x); }
+  get spellcheck() { const v = this.getAttribute('spellcheck'); return v == null ? true : v !== 'false'; }
+  set spellcheck(x) { this.setAttribute('spellcheck', x ? 'true' : 'false'); }
+  get autocomplete() { return this.getAttribute('autocomplete') ?? ''; }
+  set autocomplete(x) { this.setAttribute('autocomplete', x); }
+  get accept() { return this.getAttribute('accept') ?? ''; }
+  set accept(x) { this.setAttribute('accept', x); }
+  get min() { return this.getAttribute('min') ?? ''; }
+  set min(x) { this.setAttribute('min', x); }
+  get max() { return this.getAttribute('max') ?? ''; }
+  set max(x) { this.setAttribute('max', x); }
+  get step() { return this.getAttribute('step') ?? ''; }
+  set step(x) { this.setAttribute('step', x); }
+  get pattern() { return this.getAttribute('pattern') ?? ''; }
+  set pattern(x) { this.setAttribute('pattern', x); }
+  get maxLength() { return this.hasAttribute('maxlength') ? parseInt(this.getAttribute('maxlength'), 10) : -1; }
+  set maxLength(x) { this.setAttribute('maxlength', String(x)); }
+  get minLength() { return this.hasAttribute('minlength') ? parseInt(this.getAttribute('minlength'), 10) : -1; }
+  set minLength(x) { this.setAttribute('minlength', String(x)); }
+  get colSpan() { const v = parseInt(this.getAttribute('colspan'), 10); return v > 0 ? v : 1; }
+  set colSpan(x) { this.setAttribute('colspan', String(x)); }
+  get rowSpan() { const v = parseInt(this.getAttribute('rowspan'), 10); return v > 0 ? v : 1; }
+  set rowSpan(x) { this.setAttribute('rowspan', String(x)); }
   get href() { return this.getAttribute('href') ?? ''; }
   set href(x) { this.setAttribute('href', x); }
   get download() { return this.getAttribute('download') ?? ''; }
@@ -638,7 +673,7 @@ export class Element extends Node {
     // React's tracked value too, hiding the change and suppressing onChange.
     if (t === 'checkbox') {
       const old = this.checked; this.__checked = !old;
-      return { undo: () => { this.__checked = old; } };
+      return { undo: () => { this.__checked = old; }, fireChange: true };
     }
     if (t === 'radio') {
       if (this.checked) return null;
@@ -646,7 +681,7 @@ export class Element extends Node {
       const prev = group.find((r) => r.checked) || null;
       group.forEach((r) => { r.__checked = false; });
       this.__checked = true;
-      return { undo: () => { this.__checked = false; if (prev) prev.__checked = true; } };
+      return { undo: () => { this.__checked = false; if (prev) prev.__checked = true; }, fireChange: true };
     }
     return null;
   }
@@ -773,7 +808,20 @@ export class Element extends Node {
   requestSubmit() { this.submit(); }
   reset() {
     if (this.localName !== 'form') return;
-    this.dispatchEvent(new Event('reset', { bubbles: true, cancelable: true }));
+    // abortable: if a listener preventDefault()s the reset event, controls keep state
+    if (!this.dispatchEvent(new Event('reset', { bubbles: true, cancelable: true }))) return;
+    for (const el of this.elements) {
+      const tag = el.localName;
+      if (tag === 'input') {
+        const t = (el.getAttribute('type') || 'text').toLowerCase();
+        if (t === 'checkbox' || t === 'radio') el.__checked = el.hasAttribute('checked');
+        else el.__value = undefined; // fall back to the value attribute (defaultValue)
+      } else if (tag === 'textarea') {
+        el.__value = el.textContent;
+      } else if (tag === 'select') {
+        for (const o of el.getElementsByTagName('option')) o.__selected = o.hasAttribute('selected');
+      }
+    }
   }
 }
 
@@ -959,7 +1007,7 @@ function makeStyle(el) {
   };
   return new Proxy({}, {
     get(_t, key) {
-      if (key === 'getPropertyValue') return (p) => parse().values.get(p) ?? '';
+      if (key === 'getPropertyValue') return (p) => styleGet(parse().values, p);
       if (key === 'getPropertyPriority') return (p) => parse().prio.get(p) ?? '';
       if (key === 'setProperty') return (p, v, priority) => { const s = parse(); s.values.set(p, String(v)); if (priority) s.prio.set(p, 'important'); else s.prio.delete(p); write(s); };
       if (key === 'removeProperty') return (p) => { const s = parse(); const v = s.values.get(p) ?? ''; s.values.delete(p); s.prio.delete(p); write(s); return v; };
@@ -969,7 +1017,7 @@ function makeStyle(el) {
       if (key === 'cssFloat') return parse().values.get('float') ?? '';
       if (key === Symbol.iterator) { const keys = [...parse().values.keys()]; return keys[Symbol.iterator].bind(keys); }
       if (typeof key !== 'string') return undefined;
-      return parse().values.get(kebab(key)) ?? '';
+      return styleGet(parse().values, kebab(key));
     },
     set(_t, key, value) {
       if (key === 'cssText') { el.setAttribute('style', String(value)); return true; }
@@ -980,6 +1028,24 @@ function makeStyle(el) {
 }
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 
+// We store inline styles verbatim (no shorthand expansion). For the common case
+// `style.background='red'; style.backgroundColor` we let a longhand READ fall back
+// to its shorthand when the shorthand holds a single token (one value that applies
+// to all sides / the only sub-property). Multi-token shorthands stay honest: the
+// longhand reads '' rather than guessing which token maps where.
+const SHORTHAND_OF = {
+  'background-color': 'background',
+  'margin-top': 'margin', 'margin-right': 'margin', 'margin-bottom': 'margin', 'margin-left': 'margin',
+  'padding-top': 'padding', 'padding-right': 'padding', 'padding-bottom': 'padding', 'padding-left': 'padding',
+};
+function styleGet(values, prop) {
+  const direct = values.get(prop);
+  if (direct !== undefined) return direct;
+  const sh = SHORTHAND_OF[prop];
+  if (sh) { const v = values.get(sh); if (v !== undefined && !/\s/.test(v.trim())) return v; }
+  return '';
+}
+
 // WHATWG value-sanitization per input type. Returns the accepted value, or null
 // if invalid (caller leaves the current value unchanged — like a real browser,
 // which rejects partial/garbage input rather than storing it).
@@ -1016,6 +1082,24 @@ function makeDataset(el) {
   });
 }
 
+// adoptNode/importNode helper: a buffer-backed node carries __idx/__attrIdx into
+// the SoA buffer of its ORIGINAL document. Re-homing it to another document would
+// leave those indices reading through the NEW document's buffer (wrong/garbage, or
+// corruption). Materialize attrs + children off the current buffer FIRST, then sever
+// the buffer linkage, then switch ownerDocument — depth-first so each level reads its
+// own (old) buffer before being re-homed.
+function adoptInto(node, doc) {
+  if (node.ownerDocument === doc) return;
+  if (node.nodeType === ELEMENT_NODE) {
+    if (node.__attrs === undefined && node.__attrIdx >= 0) node.__attrs = node.__buildAttrs();
+    node.__attrIdx = -1;
+  }
+  const kids = node.__children ? node.__children() : []; // inflate off the OLD buffer
+  node.__idx = -1;
+  node.ownerDocument = doc;
+  for (const c of kids) adoptInto(c, doc);
+}
+
 // --- MutationObserver, wired to the mutation methods above via notifyMutation ---
 function isDescendant(node, ancestor) {
   let n = node;
@@ -1218,7 +1302,7 @@ export class Document extends Node {
   createComment(data) { return new Comment(this, String(data)); }
   getSelection() { if (!this.__selection) this.__selection = makeSelection(); return this.__selection; }
   importNode(node, deep) { return node.cloneNode(deep); }
-  adoptNode(node) { if (node.parentNode) node.parentNode.removeChild(node); node.ownerDocument = this; return node; }
+  adoptNode(node) { if (node.parentNode) node.parentNode.removeChild(node); adoptInto(node, this); return node; }
 
   // TreeWalker / NodeIterator (whatToShow: 1 elements, 4 text, 0xFFFFFFFF all)
   createTreeWalker(root, whatToShow = 0xffffffff, filter = null) { return new TreeWalker(root, whatToShow, filter); }

package/src/runtime/events.mjs

@@ -222,8 +222,14 @@ export class EventTarget {
     event.eventPhase = PHASE_NONE;
     event.currentTarget = null;
 
-    // canceled activation: undo the pre-click toggle if default was prevented
+    // canceled activation: undo the pre-click toggle if default was prevented.
+    // Otherwise a checkbox/radio toggle fires input then change (activation
+    // default action) — user-event/React rely on these to see the new value.
     if (activation && event.defaultPrevented) activation.undo();
+    else if (activation && activation.fireChange) {
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
 
     // remaining default actions (label→control, form submit) unless prevented
     if (!event.defaultPrevented && typeof this.__runDefaultAction === 'function') {

package/src/runtime/index.mjs

@@ -22,11 +22,18 @@ export * from './dom.mjs';
 // (usually the empty default) → parse once, reuse for every file, skipping the
 // native parse + boundary marshaling entirely. Bounded (fixtures are few).
 const __parseCache = new Map();
+const __PARSE_CACHE_MAX = 64;
 function parseBufferCached(html) {
   const hit = __parseCache.get(html);
-  if (hit !== undefined) return hit;
+  if (hit !== undefined) {
+    // LRU bump: re-insert so this entry is now most-recently-used (Map keeps order)
+    __parseCache.delete(html); __parseCache.set(html, hit);
+    return hit;
+  }
   const soa = native.parseBuffer(html);
-  if (__parseCache.size > 64) __parseCache.clear();
+  // Evict the single oldest entry, not the whole cache — a suite with >64 distinct
+  // shells should keep its hot fixtures warm, not thrash every one cold on overflow.
+  if (__parseCache.size >= __PARSE_CACHE_MAX) __parseCache.delete(__parseCache.keys().next().value);
   __parseCache.set(html, soa);
   return soa;
 }

package/src/runtime/stubs.mjs

@@ -79,28 +79,8 @@ export function makeMatchMedia() {
   });
 }
 
-// getComputedStyle: honest — reflects ONLY inline + explicitly-set values, never
-// invents cascade/layout numbers. A property that wasn't set reads as ''.
-export function makeGetComputedStyle() {
-  return (el) => {
-    // The Proxy reads el.style LIVE on each access, so one cached Proxy per
-    // element is always correct (no version needed) — avoids re-allocating a
-    // Proxy on every call, which dom-accessibility-api does per element in
-    // getByRole/getByText visibility checks.
-    if (el && el.__computedStyle) return el.__computedStyle;
-    const style = el && el.style ? el.style : null;
-    const proxy = new Proxy({}, {
-      get(_t, key) {
-        if (key === 'getPropertyValue') return (p) => (style ? style.getPropertyValue(p) : '');
-        if (key === '__honest') return 'computed style is inline-only; no layout/cascade available';
-        if (typeof key !== 'string') return undefined;
-        return style ? style[key] : '';
-      },
-    });
-    if (el) el.__computedStyle = proxy;
-    return proxy;
-  };
-}
+// getComputedStyle lives in cascade.mjs — it resolves injected <style> sheets +
+// inline styles (a strict superset of the old inline-only stub once here).
 
 class ObserverStub {
   constructor(cb) { this.__cb = cb; }

package/src/runtime/window.mjs

@@ -5,11 +5,12 @@
 // tracer: it records which globals each test actually touches.
 
 import {
-  Storage, makeMatchMedia, makeGetComputedStyle,
+  Storage, makeMatchMedia,
   IntersectionObserver, ResizeObserver,
   FileReader, makeCanvasStub, makeCustomElements,
   makeLocation, makeHistory,
 } from './stubs.mjs';
+import { makeGetComputedStyle } from './cascade.mjs';
 import {
   Node, Element, Text, Comment, Document, DocumentFragment, DocumentType, Event, CustomEvent,
   MutationObserver, DOMParser, XMLSerializer,
@@ -250,6 +251,22 @@ const STATIC_BASE = {
   // every element is a plain Element → `el instanceof HTMLElement` is true.
   // Tag-specific interfaces match by localName via Symbol.hasInstance.
   HTMLElement: Element, SVGElement: Element,
+  // SVG interface globals. Libs (and test setup mocks) do
+  // `Object.defineProperty(SVGSVGElement.prototype, 'viewBox', …)` and
+  // `el instanceof SVGSVGElement`; an undefined global is a hard ReferenceError.
+  SVGSVGElement: tagClass('svg'), SVGPathElement: tagClass('path'),
+  SVGGElement: tagClass('g'), SVGCircleElement: tagClass('circle'),
+  SVGRectElement: tagClass('rect'), SVGLineElement: tagClass('line'),
+  SVGEllipseElement: tagClass('ellipse'), SVGPolygonElement: tagClass('polygon'),
+  SVGPolylineElement: tagClass('polyline'), SVGTextElement: tagClass('text'),
+  SVGTSpanElement: tagClass('tspan'), SVGUseElement: tagClass('use'),
+  SVGDefsElement: tagClass('defs'), SVGImageElement: tagClass('image'),
+  SVGStopElement: tagClass('stop'), SVGSymbolElement: tagClass('symbol'),
+  SVGMarkerElement: tagClass('marker'), SVGClipPathElement: tagClass('clipPath'),
+  SVGMaskElement: tagClass('mask'), SVGPatternElement: tagClass('pattern'),
+  SVGTitleElement: tagClass('title'), SVGDescElement: tagClass('desc'),
+  SVGForeignObjectElement: tagClass('foreignObject'),
+  SVGGraphicsElement: Element, SVGGeometryElement: Element, SVGTextContentElement: Element,
   HTMLAnchorElement: tagClass('a'), HTMLInputElement: tagClass('input'),
   HTMLTextAreaElement: tagClass('textarea'), HTMLSelectElement: tagClass('select'),
   HTMLOptionElement: tagClass('option'), HTMLButtonElement: tagClass('button'),
@@ -260,6 +277,31 @@ const STATIC_BASE = {
   HTMLUListElement: tagClass('ul'), HTMLLIElement: tagClass('li'),
   HTMLBodyElement: tagClass('body'), HTMLIFrameElement: tagClass('iframe'),
   HTMLHeadingElement: tagClass(/^h[1-6]$/),
+  // Previously-missing interfaces: undefined globals make `el instanceof HTMLXElement`
+  // throw "Right-hand side of 'instanceof' is not an object" — worse than returning
+  // false. RTL/React probe these constantly.
+  HTMLTableElement: tagClass('table'), HTMLTableRowElement: tagClass('tr'),
+  HTMLTableCellElement: tagClass(/^(td|th)$/), HTMLTableSectionElement: tagClass(/^(thead|tbody|tfoot)$/),
+  HTMLTableColElement: tagClass(/^(col|colgroup)$/), HTMLTableCaptionElement: tagClass('caption'),
+  HTMLOListElement: tagClass('ol'), HTMLDListElement: tagClass('dl'),
+  HTMLFieldSetElement: tagClass('fieldset'), HTMLLegendElement: tagClass('legend'),
+  HTMLOptGroupElement: tagClass('optgroup'), HTMLDataListElement: tagClass('datalist'),
+  HTMLOutputElement: tagClass('output'), HTMLProgressElement: tagClass('progress'),
+  HTMLMeterElement: tagClass('meter'), HTMLDetailsElement: tagClass('details'),
+  HTMLDialogElement: tagClass('dialog'), HTMLPreElement: tagClass('pre'),
+  HTMLBRElement: tagClass('br'), HTMLHRElement: tagClass('hr'),
+  HTMLQuoteElement: tagClass(/^(q|blockquote)$/), HTMLModElement: tagClass(/^(ins|del)$/),
+  HTMLPictureElement: tagClass('picture'), HTMLSourceElement: tagClass('source'),
+  HTMLTrackElement: tagClass('track'), HTMLVideoElement: tagClass('video'),
+  HTMLAudioElement: tagClass('audio'), HTMLMediaElement: tagClass(/^(video|audio)$/),
+  HTMLEmbedElement: tagClass('embed'), HTMLObjectElement: tagClass('object'),
+  HTMLMapElement: tagClass('map'), HTMLAreaElement: tagClass('area'),
+  HTMLScriptElement: tagClass('script'), HTMLStyleElement: tagClass('style'),
+  HTMLLinkElement: tagClass('link'), HTMLMetaElement: tagClass('meta'),
+  HTMLTitleElement: tagClass('title'), HTMLBaseElement: tagClass('base'),
+  HTMLHeadElement: tagClass('head'), HTMLHtmlElement: tagClass('html'),
+  HTMLDataElement: tagClass('data'), HTMLTimeElement: tagClass('time'),
+  HTMLSlotElement: tagClass('slot'), HTMLMenuElement: tagClass('menu'),
   HTMLDocument: Document, ShadowRoot: DocumentFragment,
   MutationObserver, DOMParser, XMLSerializer,
   URL: TURBO_URL, URLSearchParams,