@miaskiewicz/turbo-dom 0.1.61 → 0.2.0

package/README.md

@@ -15,10 +15,14 @@ npm install -D @miaskiewicz/turbo-dom
 - ✅ **More compatible than happy-dom** — 99.72% on html5lib-tests vs happy-dom's 37%.
   Runs React Testing Library, `user-event`, downshift, Radix UI, and Headless UI unmodified.
 - ⚡ **Faster than both** — ~130× jsdom / ~45× happy-dom on a realistic suite (parse-memoized repeated shells), ~8–44× faster HTML parsing on real pages, and ~2.7× happy-dom on repeated queries while staying 99.7% spec-correct.
-- 🎯 **Honest, not lying** — no fake layout numbers; `getBoundingClientRect()` is zeros.
-  `getComputedStyle` runs a **partial cascade**: it resolves real injected `<style>` rules
-  (emotion/MUI `.css-HASH{…}`) + inline styles with proper specificity/source order — but only
-  ever returns values a real rule set, never invented layout. Geometry tests belong in a real browser.
+- 🎨 **Real computed style** — `getComputedStyle` runs a **partial cascade**: it resolves real
+  injected `<style>` rules (emotion/MUI `.css-HASH{…}`) + inline styles with proper specificity/source
+  order, **inherits the standard inheritable properties down the tree** (a global `body{color}` reaches
+  descendants), and **canonicalizes colors to `rgb()/rgba()`** like a browser (so
+  `toHaveStyle({color:'#fff'})` matches a `#ffffff`/`white`/`rgb(255,255,255)` rule). It only ever
+  returns values a real rule set — never an invented one.
+- 🎯 **Honest, not lying** — no fake layout numbers; `getBoundingClientRect()` is zeros and computed
+  style never invents layout. Geometry tests belong in a real browser.
 
 ## Quick start
 
@@ -124,7 +128,7 @@ to set up `document`/`window` on any global object.
 | @testing-library/dom + user-event | ✅ | ✅ | ✅ |
 | React + Radix / Headless UI / downshift | ✅ | partial | ✅ |
 | Real layout | ❌ (honest stub) | partial | partial |
-| `getComputedStyle` cascade | partial (real `<style>` + inline) | partial | partial |
+| `getComputedStyle` cascade | partial (real `<style>` + inline + inheritance + `rgb()` colors) | partial | partial |
 | Shadow DOM (attach, slots, event retargeting, scoped/`:host` CSS) | ✅ | ✅ | ✅ |
 
 turbo-dom inherits Servo's tree constructor, so the "messy input" cases hand-rolled parsers
@@ -189,13 +193,23 @@ JS (chatty, fine-grained) but pays only for what a test touches. Full design not
 - **No layout.** `getBoundingClientRect()` returns zeros; `getClientRects()` is empty.
 - **`getComputedStyle` is a partial cascade** — it resolves REAL injected `<style>` rules
   (emotion/MUI `.css-HASH{…}`) plus inline `style`, applying specificity and source order
-  (inline wins). It expands common shorthands to longhands (`margin`/`padding`/`border`/single-token
-  `background`), serializes bare `0` as `0px` for length props, and normalizes `font-family`
-  comma spacing to match browser output. Out of scope (returns `''`): `@media`/`@supports`/
-  `@keyframes`, `:hover`/state pseudo-classes, pseudo-elements, full inheritance, CSS custom
-  properties, and length-unit conversion (`em`/`rem`→`px`). Only ever returns values from a
-  matched rule or inline declaration — never an invented one. Style/geometry assertions belong
-  in a real browser (Playwright/WebDriver).
+  (inline wins). It **inherits the standard inheritable properties** (`color`, `font*`,
+  `line-height`, `text-align`, `visibility`, …) down the flattened tree — a global rule on
+  `body`/`:root` reaches descendants, and inheritance crosses the shadow host boundary. It
+  **canonicalizes `<color>` values to `rgb()/rgba()`** (`#fff`/`white`/`hsl(...)` → `rgb(255, 255, 255)`)
+  exactly as browsers serialize computed style, so `@testing-library/jest-dom`'s `toHaveStyle`
+  color assertions compare equal regardless of how the rule authored the color. It expands common
+  shorthands to longhands (`margin`/`padding`/`border`/single-token `background`), serializes bare
+  `0` as `0px` for length props, and normalizes `font-family` comma spacing. Out of scope (returns
+  `''`): `@media`/`@supports`/`@keyframes`, `:hover`/state pseudo-classes, pseudo-elements, the
+  `inherit`/`initial`/`unset` keywords, CSS custom properties, and length-unit conversion
+  (`em`/`rem`→`px`). Only ever returns values from a matched, inline, or inherited declaration —
+  never an invented initial value. Style/geometry assertions belong in a real browser
+  (Playwright/WebDriver).
+- **`<style>.textContent` reflects rules injected via `sheet.insertRule()`** — CSS-in-JS engines in
+  "speedy" mode (emotion/styled-components) inject rules straight into the CSSOM without writing the
+  node's text; turbo-dom serializes them back into `textContent` (as browsers/jsdom do), so tests
+  that scrape `querySelectorAll('style')` text see the injected CSS.
 - Canvas, `<select>` rendering, and similar visual APIs are honest no-op stubs.
 - **Shadow DOM** is supported and pay-for-what-you-use — every event/query/cascade hot path
   is unchanged until the first `attachShadow` flips a per-document flag. Covered: `attachShadow`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.61",
+  "version": "0.2.0",
   "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

@@ -7,12 +7,15 @@
 // 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.
+// style (or inherited from one — see INHERITED). A property no stylesheet/inline set
+// still reads '' — it never invents layout/cascade numbers or initial values. Out of
+// scope (return ''): @media/@supports/@keyframes, :hover & other stateful
+// pseudo-classes, pseudo-elements, the `inherit`/`initial`/`unset` keywords,
+// CSS custom-property resolution. Colors ARE canonicalized to rgb()/rgba() (color.mjs)
+// and bare-0 lengths to `0px`, matching what a browser serializes.
 
 import { matchesSelector } from './selectors.mjs';
+import { COLOR_PROPS, canonicalizeColor } from './color.mjs';
 
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 
@@ -162,9 +165,10 @@ function collectMatched(el, rules, kind, into) {
   }
 }
 
-// Inheritable properties we propagate across the shadow boundary into shadow
-// content (curated; matches the common inherited set). Honest partial: only
-// these inherit, and only INTO shadow trees — light DOM stays inheritance-free.
+// Inheritable properties we propagate down the flattened tree (curated; matches
+// the common inherited set). Honest partial: only these inherit. Covers both
+// light-DOM "CSS globals" (a rule on html/body cascades to descendants) and
+// crossing the shadow host boundary into shadow content.
 const INHERITED = new Set([
   'color', 'cursor', 'direction', 'font', 'font-family', 'font-size', 'font-style',
   'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'list-style',
@@ -199,6 +203,9 @@ function lookup(map, prop) {
   // (emotion minifies to "a",b,c). Scoped to font-family so we don't rewrite commas
   // inside rgb()/cubic-bezier() values, which browsers leave compact.
   if (prop === 'font-family') return v.replace(/\s*,\s*/g, ', ');
+  // <color> properties: browsers serialize computed colors to rgb()/rgba() —
+  // names, hex, hsl all canonicalize (includeNamed=true). Unrecognized → passthrough.
+  if (COLOR_PROPS.has(prop)) { const c = canonicalizeColor(v, true); if (c) return c; }
   return v;
 }
 
@@ -255,16 +262,21 @@ export function makeGetComputedStyle() {
     const inline = el.getAttribute && el.getAttribute('style');
     if (inline) parseDecls(inline, map);
 
-    // Inheritance INTO shadow content only: an element inside a shadow tree
-    // inherits unset inheritable props from its flattened parent (crossing the
-    // host boundary). Light-DOM elements stay inheritance-free (honest).
-    if (inShadow) {
-      const parent = flattenedParent(el);
-      if (parent) {
-        const ps = gcs(parent); // recursive, memoized, terminates at the light-DOM host
-        for (const prop of INHERITED) {
-          if (!map.has(prop)) { const pv = ps.getPropertyValue(prop); if (pv) map.set(prop, pv); }
-        }
+    // Inheritance: an element inherits unset inheritable props from its flattened
+    // parent (DOM parent, hopping shadow-root→host at the boundary). This carries
+    // "CSS globals" (a rule on html/body/:root) down the tree AND propagates into
+    // shadow content. Honest partial: only the curated INHERITED set inherits, only
+    // from values a REAL rule/inline actually set (pv truthy) — never an initial
+    // value. Recursion is memoized per element/version and terminates at the root
+    // (flattenedParent → null). Test-time only; hot paths never call gcs.
+    // `inShadow` is unused now that light-DOM inherits too, but the flattened-parent
+    // hop still crosses the host boundary correctly for shadow content.
+    void inShadow;
+    const parent = flattenedParent(el);
+    if (parent) {
+      const ps = gcs(parent);
+      for (const prop of INHERITED) {
+        if (!map.has(prop)) { const pv = ps.getPropertyValue(prop); if (pv) map.set(prop, pv); }
       }
     }
 

package/src/runtime/color.mjs

@@ -0,0 +1,160 @@
+// Color canonicalization — browsers serialize computed/inline <color> values to
+// rgb()/rgba(), never as the authored `#fff`/`white`. testing-library's
+// `toHaveStyle` compares the element's computed value against the expected value
+// AS STRINGS, after each is run through the DOM's own normalization — so to match
+// a browser (and jsdom) both getComputedStyle (cascade.mjs) and inline style
+// read-back (dom.mjs styleGet) must canonicalize. This module is the shared core.
+//
+// PERF: only ever called from getComputedStyle + el.style reads (test/app time),
+// and only for properties in COLOR_PROPS. Parse/query/match/event hot paths never
+// touch it. Returns null when the value isn't a recognized color → caller keeps
+// the original string (honest passthrough for url()/gradients/var()/keywords).
+//
+// Two modes, matching real browsers:
+//   includeNamed=false (inline el.style): hex + rgb()/hsl() canonicalize; NAMED
+//     keywords (`red`, `transparent`) stay as authored — Chrome keeps them inline.
+//   includeNamed=true  (computed getComputedStyle): names resolve to rgb() too.
+
+// Properties whose value is a <color> (longhands + the single-token shorthands we
+// already expand). `background` is included for the bare-color MUI case
+// (`background:#fff`); a non-color background value just fails to parse → passthrough.
+export const COLOR_PROPS = new Set([
+  'color', 'background-color', 'background', 'border-color',
+  'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
+  'outline-color', 'text-decoration-color', 'column-rule-color', 'caret-color',
+  'fill', 'stroke', 'stop-color', 'flood-color', 'lighting-color',
+]);
+
+// CSS named colors → #rrggbb (reused through hexToRgb). `transparent` is special
+// (→ rgba(0,0,0,0)); both gate behind includeNamed.
+const NAMED = {
+  aliceblue: 'f0f8ff', antiquewhite: 'faebd7', aqua: '00ffff', aquamarine: '7fffd4',
+  azure: 'f0ffff', beige: 'f5f5dc', bisque: 'ffe4c4', black: '000000',
+  blanchedalmond: 'ffebcd', blue: '0000ff', blueviolet: '8a2be2', brown: 'a52a2a',
+  burlywood: 'deb887', cadetblue: '5f9ea0', chartreuse: '7fff00', chocolate: 'd2691e',
+  coral: 'ff7f50', cornflowerblue: '6495ed', cornsilk: 'fff8dc', crimson: 'dc143c',
+  cyan: '00ffff', darkblue: '00008b', darkcyan: '008b8b', darkgoldenrod: 'b8860b',
+  darkgray: 'a9a9a9', darkgreen: '006400', darkgrey: 'a9a9a9', darkkhaki: 'bdb76b',
+  darkmagenta: '8b008b', darkolivegreen: '556b2f', darkorange: 'ff8c00', darkorchid: '9932cc',
+  darkred: '8b0000', darksalmon: 'e9967a', darkseagreen: '8fbc8f', darkslateblue: '483d8b',
+  darkslategray: '2f4f4f', darkslategrey: '2f4f4f', darkturquoise: '00ced1', darkviolet: '9400d3',
+  deeppink: 'ff1493', deepskyblue: '00bfff', dimgray: '696969', dimgrey: '696969',
+  dodgerblue: '1e90ff', firebrick: 'b22222', floralwhite: 'fffaf0', forestgreen: '228b22',
+  fuchsia: 'ff00ff', gainsboro: 'dcdcdc', ghostwhite: 'f8f8ff', gold: 'ffd700',
+  goldenrod: 'daa520', gray: '808080', green: '008000', greenyellow: 'adff2f',
+  grey: '808080', honeydew: 'f0fff0', hotpink: 'ff69b4', indianred: 'cd5c5c',
+  indigo: '4b0082', ivory: 'fffff0', khaki: 'f0e68c', lavender: 'e6e6fa',
+  lavenderblush: 'fff0f5', lawngreen: '7cfc00', lemonchiffon: 'fffacd', lightblue: 'add8e6',
+  lightcoral: 'f08080', lightcyan: 'e0ffff', lightgoldenrodyellow: 'fafad2', lightgray: 'd3d3d3',
+  lightgreen: '90ee90', lightgrey: 'd3d3d3', lightpink: 'ffb6c1', lightsalmon: 'ffa07a',
+  lightseagreen: '20b2aa', lightskyblue: '87cefa', lightslategray: '778899', lightslategrey: '778899',
+  lightsteelblue: 'b0c4de', lightyellow: 'ffffe0', lime: '00ff00', limegreen: '32cd32',
+  linen: 'faf0e6', magenta: 'ff00ff', maroon: '800000', mediumaquamarine: '66cdaa',
+  mediumblue: '0000cd', mediumorchid: 'ba55d3', mediumpurple: '9370db', mediumseagreen: '3cb371',
+  mediumslateblue: '7b68ee', mediumspringgreen: '00fa9a', mediumturquoise: '48d1cc', mediumvioletred: 'c71585',
+  midnightblue: '191970', mintcream: 'f5fffa', mistyrose: 'ffe4e1', moccasin: 'ffe4b5',
+  navajowhite: 'ffdead', navy: '000080', oldlace: 'fdf5e6', olive: '808000',
+  olivedrab: '6b8e23', orange: 'ffa500', orangered: 'ff4500', orchid: 'da70d6',
+  palegoldenrod: 'eee8aa', palegreen: '98fb98', paleturquoise: 'afeeee', palevioletred: 'db7093',
+  papayawhip: 'ffefd5', peachpuff: 'ffdab9', peru: 'cd853f', pink: 'ffc0cb',
+  plum: 'dda0dd', powderblue: 'b0e0e6', purple: '800080', rebeccapurple: '663399',
+  red: 'ff0000', rosybrown: 'bc8f8f', royalblue: '4169e1', saddlebrown: '8b4513',
+  salmon: 'fa8072', sandybrown: 'f4a460', seagreen: '2e8b57', seashell: 'fff5ee',
+  sienna: 'a0522d', silver: 'c0c0c0', skyblue: '87ceeb', slateblue: '6a5acd',
+  slategray: '708090', slategrey: '708090', snow: 'fffafa', springgreen: '00ff7f',
+  steelblue: '4682b4', tan: 'd2b48c', teal: '008080', thistle: 'd8bfd8',
+  tomato: 'ff6347', turquoise: '40e0d0', violet: 'ee82ee', wheat: 'f5deb3',
+  white: 'ffffff', whitesmoke: 'f5f5f5', yellow: 'ffff00', yellowgreen: '9acd32',
+};
+
+const clamp255 = (n) => (n < 0 ? 0 : n > 255 ? 255 : n) | 0;
+
+// Serialize {r,g,b,a}. Browsers emit `rgb(r, g, b)` when fully opaque, else
+// `rgba(r, g, b, a)` with the alpha trimmed (0.5, not 0.50). Both sides of every
+// comparison route through here, so the exact alpha rounding only has to be
+// internally consistent.
+function rgb(r, g, b, a) {
+  r = clamp255(r); g = clamp255(g); b = clamp255(b);
+  if (a === undefined || a >= 1) return `rgb(${r}, ${g}, ${b})`;
+  if (a < 0) a = 0;
+  const as = String(Math.round(a * 1000) / 1000);
+  return `rgba(${r}, ${g}, ${b}, ${as})`;
+}
+
+function hexToRgb(v) {
+  const h = v.slice(1);
+  const n = h.length;
+  if (!/^[0-9a-fA-F]+$/.test(h)) return null;
+  if (n === 3 || n === 4) {
+    const r = parseInt(h[0] + h[0], 16), g = parseInt(h[1] + h[1], 16), b = parseInt(h[2] + h[2], 16);
+    const a = n === 4 ? parseInt(h[3] + h[3], 16) / 255 : undefined;
+    return rgb(r, g, b, a);
+  }
+  if (n === 6 || n === 8) {
+    const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
+    const a = n === 8 ? parseInt(h.slice(6, 8), 16) / 255 : undefined;
+    return rgb(r, g, b, a);
+  }
+  return null;
+}
+
+// Re-serialize rgb()/rgba() to canonical spacing. Percentage components (rare in
+// CSS-in-JS output) → null (passthrough) rather than guessing.
+function normalizeRgb(v) {
+  const open = v.indexOf('(');
+  if (open === -1 || v[v.length - 1] !== ')') return null;
+  const parts = v.slice(open + 1, -1).split(/[,\s/]+/).filter(Boolean);
+  if (parts.length < 3 || parts.length > 4) return null;
+  const nums = [];
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i].indexOf('%') !== -1) return null;
+    const f = parseFloat(parts[i]);
+    if (Number.isNaN(f)) return null;
+    nums.push(f);
+  }
+  return rgb(nums[0], nums[1], nums[2], nums[3]);
+}
+
+function hslToRgb(v) {
+  const open = v.indexOf('(');
+  if (open === -1 || v[v.length - 1] !== ')') return null;
+  const parts = v.slice(open + 1, -1).split(/[,\s/]+/).filter(Boolean);
+  if (parts.length < 3 || parts.length > 4) return null;
+  let h = parseFloat(parts[0]);
+  const s = parseFloat(parts[1]) / 100;
+  const l = parseFloat(parts[2]) / 100;
+  if (Number.isNaN(h) || Number.isNaN(s) || Number.isNaN(l)) return null;
+  const a = parts[3] !== undefined ? parseFloat(parts[3]) : undefined;
+  h = ((h % 360) + 360) % 360 / 360;
+  const hue = (p, q, t) => {
+    if (t < 0) t += 1; if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) { r = g = b = l; }
+  else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue(p, q, h + 1 / 3); g = hue(p, q, h); b = hue(p, q, h - 1 / 3);
+  }
+  return rgb(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a);
+}
+
+// Canonicalize one color value, or null if unrecognized (→ caller passthrough).
+export function canonicalizeColor(value, includeNamed) {
+  if (!value) return null;
+  const v = value.trim();
+  if (v[0] === '#') return hexToRgb(v);
+  const lower = v.toLowerCase();
+  if (lower.startsWith('rgb')) return normalizeRgb(v);
+  if (lower.startsWith('hsl')) return hslToRgb(v);
+  if (includeNamed) {
+    if (lower === 'transparent') return 'rgba(0, 0, 0, 0)';
+    const hex = NAMED[lower];
+    if (hex) return hexToRgb('#' + hex);
+  }
+  return null;
+}

package/src/runtime/dom.mjs

@@ -15,6 +15,8 @@ import { liveNodeList, liveHTMLCollection } from './collections.mjs';
 import { matchesSelector, querySelector as qsel, querySelectorAll as qselAll } from './selectors.mjs';
 import { serializeInner, serializeOuter } from './html-serialize.mjs';
 import { CSSStyleSheet, styleSheetList } from './cssom.mjs';
+import { COLOR_PROPS, canonicalizeColor } from './color.mjs';
+import { SVGAnimatedString, SVGAnimatedLength, SVGAnimatedRect, SVG_LENGTH_ATTRS } from './svg.mjs';
 
 // Per-node query-result cache keyed by (selector, document version). querySelectorAll
 // returns a STATIC list per spec, so caching is safe until the next mutation bumps
@@ -239,6 +241,20 @@ export class Node extends EventTarget {
   }
 
   get textContent() {
+    // <style> whose CSSOM sheet received insertRule() (emotion/styled-components
+    // "speedy" mode injects rules WITHOUT touching the node's text): reflect those
+    // rules in the serialized text, as browsers/jsdom do, so tests that scrape
+    // `querySelectorAll('style').map(s => s.textContent)` see the injected CSS.
+    // __sheet is only ever set on <style> elements (sheet getter gates on it), so
+    // this is one predicted-false read for every other element on the hot path.
+    const sheet = this.__sheet;
+    if (sheet && sheet.cssRules.length) {
+      const kids = this.__children();
+      let css = '';
+      for (let i = 0; i < kids.length; i++) if (kids[i].nodeType === TEXT_NODE) css += kids[i].data;
+      for (let i = 0; i < sheet.cssRules.length; i++) css += (css ? '\n' : '') + sheet.cssRules[i].cssText;
+      return css;
+    }
     const kids = this.__children();
     // hot leaf case (RTL getByText reads textContent on every element): a single
     // text child → return its data directly, skipping the iterator + concat.
@@ -724,7 +740,7 @@ export class Element extends Node {
   }
 
   cloneNode(deep = false) {
-    const el = new Element(this.ownerDocument, this.localName, this.__ns);
+    const el = newElement(this.ownerDocument, this.localName, this.__ns);
     el.__attrs = (this.__attrs ?? (this.__attrs = this.__buildAttrs())).map((a) => ({ ...a }));
     if (deep) {
       // build the cloned child array directly — the clone is detached, so per-child
@@ -935,6 +951,46 @@ export class Element extends Node {
 }
 
 
+// ------------------------------------------------------------- SVGElement ----
+// SVG elements expose their geometry/identity attributes as SVGAnimated{String,Length,
+// Rect} objects (el.className.baseVal, rect.width.baseVal.value, svg.viewBox.baseVal),
+// not the plain strings/numbers HTML uses. A real subclass keeps these off every HTML
+// element (zero regression, zero hot-path cost — the wrappers are built on access only).
+// Instantiated by newElement() whenever the namespace is "svg".
+export class SVGElement extends Element {
+  // className is a readonly SVGAnimatedString in the spec; we still allow assigning a
+  // string (common habit) by writing the class attribute, but reads return the wrapper.
+  get className() { return new SVGAnimatedString(this, 'class'); }
+  set className(v) { this.setAttribute('class', String(v)); }
+
+  get viewBox() { return new SVGAnimatedRect(this, 'viewBox'); }
+
+  // Honest geometry stubs (consistent with stubs.mjs — no layout engine, so zeros).
+  getBBox() { return { x: 0, y: 0, width: 0, height: 0 }; }
+  getCTM() { return null; }
+  getScreenCTM() { return null; }
+  get ownerSVGElement() {
+    let p = this.parentNode;
+    while (p && p.nodeType === ELEMENT_NODE) { if (p.localName === 'svg') return p; p = p.parentNode; }
+    return null;
+  }
+}
+// Length-valued geometry attributes → SVGAnimatedLength (built lazily per read).
+for (const attr of SVG_LENGTH_ATTRS) {
+  Object.defineProperty(SVGElement.prototype, attr, {
+    configurable: true,
+    get() { return new SVGAnimatedLength(this, attr); },
+    set(v) { this.setAttribute(attr, v != null && v.baseVal ? String(v.baseVal.value) : String(v)); },
+  });
+}
+
+// Element factory: SVG namespace → SVGElement, everything else → Element. One place so
+// every construction site (buffer inflation, innerHTML, cloneNode, createElementNS) agrees.
+function newElement(doc, tag, ns) {
+  return ns === 'svg' ? new SVGElement(doc, tag, ns) : new Element(doc, tag, ns);
+}
+
+
 // ---------------------------------------------------- DocumentFragment ----
 export class DocumentFragment extends Node {
   get nodeType() { return DOCUMENT_FRAGMENT_NODE; }
@@ -1300,11 +1356,19 @@ const SHORTHAND_OF = {
   '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 '';
+  let v = values.get(prop);
+  if (v === undefined) {
+    const sh = SHORTHAND_OF[prop];
+    if (sh) { const s = values.get(sh); if (s !== undefined && !/\s/.test(s.trim())) v = s; }
+  }
+  if (v === undefined) return '';
+  // Inline CSSOM canonicalizes <color> values the way a browser does on read-back:
+  // hex/rgb()/hsl() → rgb()/rgba(), but NAMED keywords stay as authored (includeNamed
+  // =false) — `el.style.color='red'` reads back `'red'`, `'#fff'` reads back rgb().
+  // This keeps el.style read-back consistent with getComputedStyle so jest-dom's
+  // toHaveStyle (which normalizes the expected value via el.style) compares equal.
+  if (COLOR_PROPS.has(prop)) { const c = canonicalizeColor(v, false); if (c) return c; }
+  return v;
 }
 
 // WHATWG value-sanitization per input type. Returns the accepted value, or null
@@ -1473,7 +1537,7 @@ export class Document extends Node {
     switch (nt) {
       case ELEMENT_NODE: {
         const tag = buf.tagName(idx); // read once (was read twice — ctor + template check)
-        node = new Element(this, tag, buf.ns(idx));
+        node = newElement(this, tag, buf.ns(idx));
         node.__idx = idx;
         node.__attrIdx = idx; // attrs lazy (constructor left __attrs undefined)
         // template content fragment: a child node typed 11 named "content"
@@ -1505,7 +1569,7 @@ export class Document extends Node {
     let node;
     switch (raw.nodeType) {
       case ELEMENT_NODE:
-        node = new Element(this, raw.name, raw.namespace || '');
+        node = newElement(this, raw.name, raw.namespace || '');
         node.__attrs = raw.attrs.map((a) => ({ name: a.name, value: a.value, prefix: a.prefix || '' }));
         if (raw.name === 'template') {
           const contentRaw = raw.children.find((c) => c.nodeType === DOCUMENT_FRAGMENT_NODE && c.name === 'content');
@@ -1567,7 +1631,7 @@ export class Document extends Node {
   createElementNS(ns, qualified) {
     const short = ns === SVG_NS ? 'svg' : ns === MATHML_NS ? 'math' : '';
     const local = qualified.includes(':') ? qualified.split(':')[1] : qualified;
-    return new Element(this, local, short);
+    return newElement(this, local, short);
   }
   createTextNode(data) { return new Text(this, String(data)); }
   createComment(data) { return new Comment(this, String(data)); }

package/src/runtime/svg.mjs

@@ -0,0 +1,70 @@
+// Minimal SVG DOM-property wrappers. SVG IDL attributes are not plain strings/numbers
+// like HTML reflected attributes — they're SVGAnimated{String,Length,Rect} objects with
+// .baseVal / .animVal. Component code (and the libraries that render SVG icons) reads
+// `el.className.baseVal`, `rect.width.baseVal.value`, `svg.viewBox.baseVal`, etc.; without
+// these wrappers those reads throw "Cannot read properties of undefined (reading 'baseVal')".
+//
+// HONEST + LIVE: every wrapper reads/writes the underlying attribute on demand (no cached
+// snapshot), so it always reflects the current attribute and never invents a value. There's
+// no animation engine — animVal === baseVal. Only attached to real SVGElement instances
+// (see dom.mjs), so HTML elements are completely unaffected.
+
+// SVGLength — the unit-bearing value behind an SVGAnimatedLength. valueOf() returns the
+// number so `rect.width.baseVal` used in arithmetic/comparisons coerces correctly, while
+// `rect.width.baseVal.value` reads the same number explicitly.
+export class SVGLength {
+  constructor(host, attr) { this.__host = host; this.__attr = attr; }
+  get value() { const v = parseFloat(this.__host.getAttribute(this.__attr)); return Number.isNaN(v) ? 0 : v; }
+  set value(v) { this.__host.setAttribute(this.__attr, String(v)); }
+  get valueInSpecifiedUnits() { return this.value; }
+  get unitType() { return 1; } // SVG_LENGTHTYPE_NUMBER
+  get valueAsString() { return this.__host.getAttribute(this.__attr) || '0'; }
+  set valueAsString(s) { this.__host.setAttribute(this.__attr, String(s)); }
+  valueOf() { return this.value; }
+  toString() { return this.valueAsString; }
+}
+
+export class SVGAnimatedLength {
+  constructor(host, attr) {
+    const base = new SVGLength(host, attr);
+    this.baseVal = base;
+    this.animVal = base; // no animation engine — animated value tracks the base value
+  }
+}
+
+export class SVGAnimatedString {
+  constructor(host, attr) { this.__host = host; this.__attr = attr; }
+  get baseVal() { return this.__host.getAttribute(this.__attr) || ''; }
+  set baseVal(v) { this.__host.setAttribute(this.__attr, String(v)); }
+  get animVal() { return this.baseVal; }
+}
+
+// SVGRect / SVGAnimatedRect — backs `viewBox`. Parses the four-number list lazily.
+export class SVGRect {
+  constructor(host, attr) { this.__host = host; this.__attr = attr; }
+  #nums() {
+    const raw = this.__host.getAttribute(this.__attr) || '';
+    const parts = raw.split(/[\s,]+/).map(parseFloat);
+    return [parts[0] || 0, parts[1] || 0, parts[2] || 0, parts[3] || 0];
+  }
+  get x() { return this.#nums()[0]; }
+  get y() { return this.#nums()[1]; }
+  get width() { return this.#nums()[2]; }
+  get height() { return this.#nums()[3]; }
+}
+
+export class SVGAnimatedRect {
+  constructor(host, attr) {
+    const base = new SVGRect(host, attr);
+    this.baseVal = base;
+    this.animVal = base;
+  }
+}
+
+// Attributes that surface as SVGAnimatedLength on SVG elements. Covers the common
+// geometry set (shapes, gradients, markers); any not listed still works via getAttribute.
+export const SVG_LENGTH_ATTRS = [
+  'width', 'height', 'x', 'y', 'cx', 'cy', 'r', 'rx', 'ry',
+  'x1', 'y1', 'x2', 'y2', 'dx', 'dy', 'fx', 'fy', 'refX', 'refY',
+  'markerWidth', 'markerHeight', 'startOffset', 'textLength',
+];

package/src/runtime/window.mjs

@@ -13,7 +13,7 @@ import {
 import { makeGetComputedStyle } from './cascade.mjs';
 import { CSSStyleSheet } from './cssom.mjs';
 import {
-  Node, Element, Text, Comment, Document, DocumentFragment, DocumentType, Event, CustomEvent,
+  Node, Element, SVGElement, Text, Comment, Document, DocumentFragment, DocumentType, Event, CustomEvent,
   MutationObserver, DOMParser, XMLSerializer, ShadowRoot,
 } from './dom.mjs';
 import {
@@ -282,7 +282,7 @@ const STATIC_BASE = {
   DataTransfer,
   // every element is a plain Element → `el instanceof HTMLElement` is true.
   // Tag-specific interfaces match by localName via Symbol.hasInstance.
-  HTMLElement: Element, SVGElement: Element,
+  HTMLElement: Element, SVGElement,
   // 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.