@ccheever/exact-renderer 0.1.0

package/src/__tests__/dom-mirror.test.ts

@@ -0,0 +1,682 @@
+/// <reference path="../../../../js/src/types/bun-test.d.ts" />
+// DOM mirror tests: host-ops trees render into real DOM on the plain-web
+// path (no protocol host), with style conversion, event wiring back into
+// handler props, keyed updates, and teardown.
+
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import { Window } from 'happy-dom';
+
+import {
+  appendChild,
+  commitBatch,
+  createInstance,
+  createRoot,
+  createTextInstance,
+  destroyRoot,
+  removeChild,
+  updateInstanceProps,
+  type ElementNode,
+  type RootNode,
+  type TextNode,
+} from '../host-ops.js';
+import {
+  installDomMirror,
+  type DomMirrorHandle,
+} from '../dom-mirror.js';
+import { installContractWebHost } from '../web-host.js';
+
+const ROOT_ID = 7341;
+
+let windowRef: Window;
+let mirror: DomMirrorHandle | null = null;
+let root: RootNode;
+
+beforeEach(() => {
+  windowRef = new Window();
+  (globalThis as Record<string, unknown>).document = windowRef.document;
+  (globalThis as Record<string, unknown>).window = windowRef;
+  mirror = installDomMirror({
+    container: windowRef.document.body as unknown as HTMLElement,
+  });
+  root = createRoot(ROOT_ID, 'contract');
+});
+
+afterEach(() => {
+  destroyRoot(ROOT_ID);
+  mirror?.dispose();
+  mirror = null;
+  delete (globalThis as Record<string, unknown>).document;
+  delete (globalThis as Record<string, unknown>).window;
+});
+
+function byAttr(scope: { getElementsByTagName(tag: string): unknown }, attr: string, value: string): HTMLElement | null {
+  const all = scope.getElementsByTagName('*') as unknown as HTMLElement[];
+  return ([...all].find((el) => el.getAttribute(attr) === value) ?? null) as HTMLElement | null;
+}
+
+function mirrorRoot(): HTMLElement {
+  return byAttr(windowRef.document as unknown as { getElementsByTagName(tag: string): unknown }, 'data-exact-mirror-root', String(ROOT_ID))!;
+}
+
+function byTestId(testId: string): HTMLElement | null {
+  return byAttr(mirrorRoot() as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', testId);
+}
+
+describe('dom mirror', () => {
+  it('renders elements, text, styles, and aria attributes into real DOM', () => {
+    const view = createInstance('View', {
+      testId: 'card',
+      accessibilityRole: 'group',
+      style: {
+        flexDirection: 'row',
+        padding: 12,
+        gap: 8,
+        backgroundColor: '#fffaf0',
+        borderRadius: 12,
+        opacity: 0.9,
+        transform: [{ translateX: 4 }, { scale: 0.98 }],
+        fontFamily: ['ui-sans-serif', 'sans-serif'],
+      },
+    });
+    const label = createInstance('Text', { style: { fontSize: 14, fontWeight: 600 } });
+    appendChild(label, createTextInstance('Hello pixels'));
+    appendChild(view, label);
+    appendChild(root, view);
+    commitBatch(root);
+
+    const card = byTestId('card')!;
+    expect(card).toBeTruthy();
+    expect(card.getAttribute('role')).toBe('group');
+    expect(card.style.flexDirection).toBe('row');
+    expect(card.style.padding).toBe('12px');
+    expect(card.style.gap).toBe('8px');
+    expect(card.style.borderRadius).toBe('12px');
+    expect(card.style.opacity).toBe('0.9');
+    expect(card.style.transform).toBe('translateX(4px) scale(0.98)');
+    expect(card.textContent).toBe('Hello pixels');
+    const span = card.getElementsByTagName('span')[0] as unknown as HTMLElement;
+    expect(span.style.fontSize).toBe('14px');
+  });
+
+  it('defaults RN container tags to flex-shrink:0 to match the kernel (ENG-22199)', () => {
+    // CSS flexbox defaults flex-shrink to 1; RN/Yoga and the kernel/Taffy path
+    // default it to 0. Without this, a bare row/column inside an overflowing
+    // flex column shrinks below its content (to the min-height:0 set here) and
+    // collapses to height 0 while its children paint full-size — the bug behind
+    // ENG-22199. The mirror must match native and reserve content size.
+    const bare = createInstance('View', { testId: 'bare', style: { flexDirection: 'row' } });
+    const explicitShrink = createInstance('View', {
+      testId: 'shrinky',
+      style: { flexShrink: 1 },
+    });
+    const explicitFlex = createInstance('View', { testId: 'flexed', style: { flex: 1 } });
+    const scroller = createInstance('ScrollView', { testId: 'scroller' });
+    appendChild(root, bare);
+    appendChild(root, explicitShrink);
+    appendChild(root, explicitFlex);
+    appendChild(root, scroller);
+    commitBatch(root);
+
+    // Default: no shrink, but still min-height:0 so scroll/ellipsis children work.
+    expect(byTestId('bare')!.style.flexShrink).toBe('0');
+    expect(byTestId('bare')!.style.minHeight).toBe('0');
+    // Explicit shrink/flex win over the default (applied after tag defaults).
+    expect(byTestId('shrinky')!.style.flexShrink).toBe('1');
+    // `flex: 1` is the shorthand for `1 1 0%`, so it resets shrink back to 1.
+    expect(byTestId('flexed')!.style.flexShrink).toBe('1');
+    // ScrollView wants to fill and scroll — its flex:1 1 0% keeps it shrinkable.
+    expect(byTestId('scroller')!.style.flex).toBe('1 1 0%');
+    expect(byTestId('scroller')!.style.flexShrink).toBe('1');
+  });
+
+  it('applies line-clamp styles from top-level numberOfLines', () => {
+    const text = createInstance('Text', {
+      numberOfLines: 2,
+      style: {
+        fontSize: 14,
+        lineHeight: 21,
+      },
+    });
+    appendChild(text, createTextInstance('Long paragraph that should clamp after two lines.'));
+    expect(text.style.numberOfLines).toBe(2);
+    appendChild(root, text);
+    commitBatch(root);
+
+    const span = mirrorRoot().getElementsByTagName('span')[0] as HTMLElement;
+    expect(span.style.fontSize).toBe('14px');
+    // happy-dom does not round-trip `display: -webkit-box`; real browsers do.
+    expect(span.style.getPropertyValue('-webkit-line-clamp')).toBe('2');
+    expect(span.style.getPropertyValue('overflow')).toBe('hidden');
+  });
+
+  it('renders inline svgSource images as tintable inline SVG hosts', () => {
+    const icon = createInstance('img', {
+      testId: 'mode-icon',
+      svgSource: '<svg viewBox="0 0 24 24"><path fill="#000" d="M4 4h16v16H4z"/></svg>',
+      alt: 'System',
+      tintColor: '#123456',
+      style: { width: 14, height: 14 },
+    });
+    appendChild(root, icon);
+    commitBatch(root);
+
+    const host = byTestId('mode-icon')!;
+    const svg = host.getElementsByTagName('svg')[0] as unknown as SVGSVGElement;
+    const path = svg.querySelector('path')!;
+    const title = svg.querySelector('title')!;
+
+    expect(host.tagName).toBe('SPAN');
+    expect(host.hasAttribute('alt')).toBe(false);
+    expect(host.hasAttribute('data-exact-inline-svg-source')).toBe(false);
+    expect(host.style.width).toBe('14px');
+    expect(host.style.height).toBe('14px');
+    expect(svg.getAttribute('role')).toBe('img');
+    expect(svg.getAttribute('aria-labelledby')).toBe(title.getAttribute('id'));
+    expect(svg.style.color).toBe('#123456');
+    expect(path.getAttribute('fill')).toBe('currentColor');
+    expect(title.textContent).toBe('System');
+  });
+
+  it('renders theme-aware image source metadata and selects the active scheme source', () => {
+    windowRef.document.documentElement.setAttribute('data-blog-appearance', 'dark');
+    const image = createInstance('img', {
+      testId: 'graph',
+      src: '/assets/graph.light.png',
+      lightSrc: '/assets/graph.light.png',
+      darkSrc: '/assets/graph.dark.png',
+      alt: 'Build quality over time',
+    });
+    appendChild(root, image);
+    commitBatch(root);
+
+    const img = byTestId('graph') as HTMLImageElement;
+    expect(img.tagName).toBe('IMG');
+    expect(img.getAttribute('src')).toBe('/assets/graph.dark.png');
+    expect(img.getAttribute('data-exact-theme-image')).toBe('color-scheme');
+    expect(img.getAttribute('data-light-src')).toBe('/assets/graph.light.png');
+    expect(img.getAttribute('data-dark-src')).toBe('/assets/graph.dark.png');
+    expect(img.getAttribute('alt')).toBe('Build quality over time');
+  });
+
+  it('installs a production Contract web host that consumes shared semantic attrs', () => {
+    mirror?.dispose();
+    destroyRoot(ROOT_ID);
+    mirror = installContractWebHost({
+      container: windowRef.document.body as unknown as HTMLElement,
+    });
+    root = createRoot(ROOT_ID, 'contract');
+
+    const region = createInstance('View', {
+      __exactSemanticTag: 'section',
+      testId: 'region',
+      accessibilityRole: 'region',
+      accessibilityLabel: 'Stations',
+      inert: true,
+      focusable: true,
+      style: { padding: 8 },
+    });
+    const heading = createInstance('Text', {
+      testId: 'heading',
+      accessibilityRole: 'heading',
+      accessibilityHeadingLevel: 2,
+    });
+    appendChild(heading, createTextInstance('Stations'));
+    const nav = createInstance('View', {
+      testId: 'nav',
+      accessibilityRole: 'navigation',
+      accessibilityLabel: 'Primary navigation',
+    });
+    const routeLink = createInstance('Pressable', {
+      __exactSemanticTag: 'a',
+      testId: 'route-home-link',
+      accessibilityRole: 'link',
+      accessibilityLabel: 'Labs',
+      href: '/',
+    });
+    appendChild(routeLink, createTextInstance('Labs'));
+    appendChild(nav, routeLink);
+    const label = createInstance('Text', {
+      __exactSemanticTag: 'label',
+      testId: 'email-label',
+      nativeID: 'email-label',
+      accessibilityFor: 'email',
+    });
+    appendChild(label, createTextInstance('Email'));
+    const input = createInstance('TextInput', {
+      testId: 'email',
+      nativeID: 'email',
+      accessibilityLabelledBy: 'email-label',
+      value: 'ada@example.com',
+    });
+    const list = createInstance('List', {
+      testId: 'station-list',
+      accessibilityRole: 'list',
+    });
+    const item = createInstance('View', {
+      testId: 'station-row',
+      accessibilityRole: 'listitem',
+    });
+    appendChild(item, createTextInstance('Mountain View'));
+    appendChild(list, item);
+    appendChild(region, heading);
+    appendChild(region, nav);
+    appendChild(region, label);
+    appendChild(region, input);
+    appendChild(region, list);
+    appendChild(root, region);
+    commitBatch(root);
+
+    const hostRoot = byAttr(
+      windowRef.document as unknown as { getElementsByTagName(tag: string): unknown },
+      'data-exact-contract-host-root',
+      String(ROOT_ID),
+    )!;
+    expect(hostRoot).toBeTruthy();
+    expect(
+      byAttr(
+        windowRef.document as unknown as { getElementsByTagName(tag: string): unknown },
+        'data-exact-mirror-root',
+        String(ROOT_ID),
+      ),
+    ).toBeNull();
+
+    const regionEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'region')!;
+    const headingEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'heading')!;
+    const navEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'nav')!;
+    const linkEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'route-home-link')!;
+    const labelEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'email-label')!;
+    const inputEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'email')! as HTMLInputElement;
+    const listEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'station-list')!;
+    const itemEl = byAttr(hostRoot as unknown as { getElementsByTagName(tag: string): unknown }, 'data-testid', 'station-row')!;
+
+    expect(regionEl.tagName).toBe('SECTION');
+    expect(regionEl.getAttribute('role')).toBe('region');
+    expect(regionEl.getAttribute('aria-label')).toBe('Stations');
+    expect(regionEl.hasAttribute('inert')).toBe(true);
+    expect(regionEl.getAttribute('aria-hidden')).toBe('true');
+    expect(regionEl.tabIndex).toBe(0);
+    expect(regionEl.hasAttribute('data-exact-view-id')).toBe(false);
+    expect(globalThis.__exactDomIdentity?.elementForViewId(region.id)).toBe(regionEl);
+    expect(globalThis.__exactDomIdentity?.viewIdForTarget(regionEl)).toBe(region.id);
+    expect(headingEl.tagName).toBe('H2');
+    expect(headingEl.getAttribute('role')).toBeNull();
+    // Headings must not leak the user-agent stylesheet's `margin-block` into the
+    // cross-platform layout — native (no UA sheet) has none, so web layout has to
+    // match (ENG-22092). Surfaces add explicit heading spacing when they want it.
+    expect((headingEl as unknown as HTMLElement).style.marginTop).toBe('0px');
+    expect((headingEl as unknown as HTMLElement).style.marginBottom).toBe('0px');
+    expect(navEl.tagName).toBe('NAV');
+    expect(navEl.getAttribute('role')).toBeNull();
+    expect(linkEl.tagName).toBe('A');
+    expect(linkEl.getAttribute('role')).toBeNull();
+    expect(linkEl.getAttribute('href')).toBe('/');
+    expect(linkEl.getAttribute('aria-label')).toBe('Labs');
+    expect(linkEl.textContent).toBe('Labs');
+    expect(labelEl.tagName).toBe('LABEL');
+    expect(labelEl.getAttribute('for')).toBe('email');
+    expect(inputEl.tagName).toBe('INPUT');
+    expect(inputEl.getAttribute('id')).toBe('email');
+    expect(inputEl.getAttribute('aria-labelledby')).toBe('email-label');
+    expect(inputEl.value).toBe('ada@example.com');
+    expect(listEl.tagName).toBe('UL');
+    expect(itemEl.tagName).toBe('LI');
+  });
+
+  it('renders an inline link inside a paragraph inline, not as a block (ENG-22115)', () => {
+    // A markdown paragraph: text "It's at " + link + text ". Take it...". The
+    // link is a Pressable (semanticTag 'a') child of the paragraph's Text. On
+    // web it must flow inline; previously the <a> tag default forced
+    // display:flex/column, breaking the link onto its own line.
+    const paragraph = createInstance('Text', {
+      testId: 'para',
+      style: { fontSize: 16, lineHeight: 28 },
+    });
+    appendChild(paragraph, (() => {
+      const lead = createInstance('Text', {});
+      appendChild(lead, createTextInstance("It's at "));
+      return lead;
+    })());
+    const link = createInstance('Pressable', {
+      __exactSemanticTag: 'a',
+      testId: 'inline-link',
+      accessibilityRole: 'link',
+      href: 'https://github.com/ccheever/llp',
+    });
+    appendChild(link, (() => {
+      const linkText = createInstance('Text', { style: { textDecorationLine: 'underline' } });
+      appendChild(linkText, createTextInstance('github.com/ccheever/llp'));
+      return linkText;
+    })());
+    appendChild(paragraph, link);
+    appendChild(paragraph, (() => {
+      const trail = createInstance('Text', {});
+      appendChild(trail, createTextInstance('. Take it, use it.'));
+      return trail;
+    })());
+    appendChild(root, paragraph);
+    commitBatch(root);
+
+    const linkEl = byTestId('inline-link')!;
+    expect(linkEl.tagName).toBe('A');
+    expect(linkEl.style.display).toBe('inline');
+    expect(linkEl.style.flexDirection).toBe('');
+  });
+
+  it('keeps a standalone link outside text as a block-level flex container (ENG-22115)', () => {
+    // A link whose parent is a View (e.g. a footnote back-link inside a row),
+    // not a Text, must keep its flex layout — the inline override is scoped to
+    // links that participate in an inline text run.
+    const row = createInstance('View', { testId: 'row', style: { flexDirection: 'row' } });
+    const link = createInstance('Pressable', {
+      __exactSemanticTag: 'a',
+      testId: 'standalone-link',
+      accessibilityRole: 'link',
+      href: '#fn-1',
+    });
+    appendChild(link, createTextInstance('1.'));
+    appendChild(row, link);
+    appendChild(root, row);
+    commitBatch(root);
+
+    const linkEl = byTestId('standalone-link')!;
+    expect(linkEl.tagName).toBe('A');
+    expect(linkEl.style.display).toBe('flex');
+  });
+
+  it('focuses trapped scopes, keeps Tab inside, and restores focus after dismiss', () => {
+    const trigger = createInstance('Pressable', {
+      testId: 'open-dialog',
+      accessibilityLabel: 'Open dialog',
+    });
+    appendChild(trigger, createTextInstance('Open dialog'));
+    appendChild(root, trigger);
+    commitBatch(root);
+
+    const triggerEl = byTestId('open-dialog')!;
+    triggerEl.focus();
+    expect(windowRef.document.activeElement).toBe(triggerEl);
+
+    let dialog: ElementNode | null = null;
+    dialog = createInstance('View', {
+      testId: 'gallery-dialog',
+      accessibilityRole: 'dialog',
+      accessibilityModal: true,
+      focusScope: 'trapped',
+      __exactFocusRestore: true,
+      onKeyDown(payload: { key?: string }) {
+        if (payload.key === 'Escape' && dialog) {
+          removeChild(root, dialog);
+          dialog = null;
+          commitBatch(root);
+        }
+      },
+    });
+    appendChild(dialog, createTextInstance('Dialog body'));
+    appendChild(root, dialog);
+    commitBatch(root);
+
+    const dialogEl = byTestId('gallery-dialog')!;
+    expect(dialogEl).toBeTruthy();
+    expect(dialogEl.getAttribute('role')).toBe('dialog');
+    expect(dialogEl.getAttribute('aria-modal')).toBe('true');
+    expect(dialogEl.tabIndex).toBe(-1);
+    expect(windowRef.document.activeElement).toBe(dialogEl);
+
+    const tabEvent = new windowRef.KeyboardEvent('keydown', {
+      key: 'Tab',
+      bubbles: true,
+      cancelable: true,
+    });
+    dialogEl.dispatchEvent(tabEvent);
+    expect(tabEvent.defaultPrevented).toBe(true);
+    expect(windowRef.document.activeElement).toBe(dialogEl);
+
+    dialogEl.dispatchEvent(
+      new windowRef.KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(byTestId('gallery-dialog')).toBeNull();
+    expect(windowRef.document.activeElement).toBe(triggerEl);
+  });
+
+  it('adopts pre-rendered Contract DOM from hydration anchors', () => {
+    mirror?.dispose();
+    destroyRoot(ROOT_ID);
+    windowRef.document.body.innerHTML =
+      `<div id="route">` +
+      `<div data-exact-contract-host-root="${ROOT_ID}">` +
+      `<main data-exact-hydration-id="App/v" data-exact-structural-id="App/v">Hello</main>` +
+      `</div>` +
+      `</div>`;
+    const route = windowRef.document.getElementById('route') as HTMLElement;
+    const existingMain = route.querySelector('main')!;
+    let result: { adoptedNodes: number; recreatedNodes: number; mismatches: string[] } | null = null;
+    mirror = installContractWebHost({
+      container: route,
+      hydrate: {
+        rootId: ROOT_ID,
+        manifest: {
+          version: 1,
+          rootId: ROOT_ID,
+          nodes: [
+            { nodeId: 'App/v', domPath: [0], kind: 'element', tag: 'main' },
+            { nodeId: 'App/v0', domPath: [0, 0], kind: 'text', textGuard: 'Hello' },
+          ],
+        },
+        onResult(next) {
+          result = next;
+        },
+      },
+    });
+    root = createRoot(ROOT_ID, 'contract');
+
+    const main = createInstance('View', {
+      __exactSemanticTag: 'main',
+      'data-exact-hydration-id': 'App/v',
+      'data-exact-structural-id': 'App/v',
+    });
+    const text = createTextInstance('Hello') as TextNode & { __exactHydrationId?: string };
+    text.__exactHydrationId = 'App/v0';
+    appendChild(main, text);
+    appendChild(root, main);
+    commitBatch(root);
+
+    expect(route.querySelector('main')).toBe(existingMain);
+    expect(result?.adoptedNodes).toBe(2);
+    expect(result?.recreatedNodes).toBe(0);
+    expect(result?.mismatches).toEqual([]);
+  });
+
+  it('routes DOM events to handler props, including hover and press', () => {
+    const events: string[] = [];
+    const button = createInstance('Pressable', {
+      testId: 'press-me',
+      accessibilityRole: 'button',
+      onPress: () => events.push('press'),
+      onPressIn: () => events.push('press-in'),
+      onPressOut: () => events.push('press-out'),
+      onHoverIn: () => events.push('hover-in'),
+      onHoverOut: () => events.push('hover-out'),
+    });
+    appendChild(button, createTextInstance('Press me'));
+    appendChild(root, button);
+    commitBatch(root);
+
+    const dom = byTestId('press-me')!;
+    expect(dom.tagName).toBe('BUTTON');
+
+    dom.dispatchEvent(new (windowRef.window as unknown as { PointerEvent: typeof PointerEvent }).PointerEvent('pointerenter'));
+    dom.dispatchEvent(new (windowRef.window as unknown as { PointerEvent: typeof PointerEvent }).PointerEvent('pointerdown'));
+    dom.dispatchEvent(new (windowRef.window as unknown as { PointerEvent: typeof PointerEvent }).PointerEvent('pointerup'));
+    dom.click();
+    dom.dispatchEvent(new (windowRef.window as unknown as { PointerEvent: typeof PointerEvent }).PointerEvent('pointerleave'));
+
+    expect(events).toEqual(['hover-in', 'press-in', 'press-out', 'press', 'press-out', 'hover-out']);
+  });
+
+  it('applies prop updates and removals across commits', () => {
+    const view = createInstance('View', {
+      testId: 'box',
+      style: { backgroundColor: 'red', width: 100 },
+    });
+    appendChild(root, view);
+    commitBatch(root);
+
+    const dom = () => byTestId('box')!;
+    expect(dom().style.backgroundColor).toBe('red');
+    expect(dom().style.width).toBe('100px');
+
+    updateInstanceProps(view, view.originalProps ?? {}, {
+      testId: 'box',
+      style: { backgroundColor: 'blue', height: 50 },
+    });
+    commitBatch(root);
+
+    expect(dom().style.backgroundColor).toBe('blue');
+    expect(dom().style.height).toBe('50px');
+    // The replaced style object dropped width; the mirror must too.
+    expect(dom().style.width).toBe('');
+
+    removeChild(root as unknown as ElementNode, view);
+    commitBatch(root);
+    expect(byTestId('box')).toBeNull();
+  });
+
+  it('syncs controlled inputs both ways', () => {
+    const seen: string[] = [];
+    const input = createInstance('TextInput', {
+      testId: 'field',
+      value: 'start',
+      placeholder: 'Type here',
+      onChangeText: (text: string) => seen.push(text),
+    });
+    appendChild(root, input);
+    commitBatch(root);
+
+    const dom = byTestId('field')! as unknown as HTMLInputElement;
+    expect(dom.tagName).toBe('INPUT');
+    expect(dom.value).toBe('start');
+    expect(dom.getAttribute('placeholder')).toBe('Type here');
+
+    dom.value = 'typed';
+    dom.dispatchEvent(new (windowRef.window as unknown as { Event: typeof Event }).Event('input'));
+    expect(seen).toEqual(['typed']);
+    expect(dom.value).toBe('start');
+  });
+
+  it('keeps a controlled DOM input aligned with synchronous accept and reject handlers', () => {
+    const input = createInstance('TextInput', {
+      testId: 'controlled-field',
+      value: '123',
+      onChangeText: (text: string) => {
+        if (/^[0-9]*$/.test(text)) {
+          updateInstanceProps(input, input.originalProps ?? {}, {
+            testId: 'controlled-field',
+            value: text,
+            onChangeText: (input.originalProps as Record<string, unknown>).onChangeText,
+          });
+          commitBatch(root);
+        }
+      },
+    });
+    appendChild(root, input);
+    commitBatch(root);
+
+    const dom = byTestId('controlled-field')! as unknown as HTMLInputElement;
+    const inputEvent = () =>
+      new (windowRef.window as unknown as { Event: typeof Event }).Event('input');
+
+    dom.value = '1234';
+    dom.dispatchEvent(inputEvent());
+    expect(dom.value).toBe('1234');
+
+    dom.value = '1234a';
+    dom.dispatchEvent(inputEvent());
+    expect(dom.value).toBe('1234');
+  });
+
+  it('does not install when a protocol host owns pixels', () => {
+    (globalThis as Record<string, unknown>).exact = { dispatch: () => {} };
+    try {
+      const handle = installDomMirror({
+        container: windowRef.document.body as unknown as HTMLElement,
+      });
+      expect(handle).toBeNull();
+    } finally {
+      delete (globalThis as Record<string, unknown>).exact;
+      // beforeEach's mirror was replaced in the registry by nothing; restore
+      // for afterEach symmetry (dispose handles the rest).
+      mirror?.dispose();
+      mirror = installDomMirror({
+        container: windowRef.document.body as unknown as HTMLElement,
+      });
+    }
+  });
+
+  it('removes the root container on destroyRoot', () => {
+    const view = createInstance('View', { testId: 'temp' });
+    appendChild(root, view);
+    commitBatch(root);
+    expect(mirrorRoot()).toBeTruthy();
+
+    destroyRoot(ROOT_ID);
+    expect(
+      byAttr(windowRef.document as unknown as { getElementsByTagName(tag: string): unknown }, 'data-exact-mirror-root', String(ROOT_ID)),
+    ).toBeNull();
+
+    // afterEach destroys again; that is a harmless no-op path.
+    root = createRoot(ROOT_ID, 'contract');
+  });
+
+  it('keeps root ScrollView viewport-sized so tall content scrolls inside it', () => {
+    const host = windowRef.document.createElement('div') as unknown as HTMLElement;
+    const hostStyle = host.style as unknown as Record<string, string>;
+    hostStyle.display = 'flex';
+    hostStyle.flexDirection = 'column';
+    hostStyle.width = '100%';
+    hostStyle.height = '480px';
+    hostStyle.overflow = 'hidden';
+    windowRef.document.body.appendChild(host);
+
+    mirror?.dispose();
+    destroyRoot(ROOT_ID);
+    mirror = installDomMirror({ container: host });
+    root = createRoot(ROOT_ID, 'contract');
+
+    const scroll = createInstance('ScrollView', {
+      testId: 'labs-home',
+      style: {
+        flex: 1,
+        width: '100%',
+        backgroundColor: '#050607',
+      },
+    });
+    const content = createInstance('View', {
+      style: {
+        width: '100%',
+        maxWidth: 920,
+        alignSelf: 'center',
+        height: 1200,
+        backgroundColor: '#101010',
+      },
+    });
+    appendChild(scroll, content);
+    appendChild(root, scroll);
+    commitBatch(root);
+
+    const scrollEl = byTestId('labs-home')!;
+    const contentEl = scrollEl.firstElementChild as HTMLElement;
+    expect(scrollEl.style.width).toBe('100%');
+    expect(scrollEl.style.overflowY).toBe('auto');
+    expect(scrollEl.style.minHeight).toBe('0');
+    expect(scrollEl.style.flex).toBe('1 1 0%');
+    expect(mirrorRoot().style.height).toBe('100%');
+    expect(contentEl.style.height).toBe('1200px');
+
+    host.parentNode?.removeChild(host);
+  });
+});