@flighthq/scene2d-dom 0.2.1-next.840.857425c

package/src/domRichText.test.ts

@@ -0,0 +1,169 @@
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput } from '@flighthq/textinput';
+import { RichTextKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import {
+  defaultDomRichTextRenderer,
+  drawDomRichText,
+  drawDomRichTextMask,
+  registerDomTextInputOverlay,
+} from './domRichText';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, RichTextKind, defaultDomRichTextRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomRichTextRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultDomRichTextRenderer.submit).toBe('function');
+    expect(typeof defaultDomRichTextRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomRichText', () => {
+  it('does not throw when text is empty', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawDomRichText(state, renderProxy)).not.toThrow();
+  });
+
+  it('produces a div even when text is empty', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+
+    expect(el).not.toBeNull();
+  });
+
+  it('clears innerHtml when text is empty', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    drawDomRichText(state, renderProxy);
+
+    node.data.text = '';
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+
+    expect(div!.innerHTML).toBe('');
+  });
+
+  it('produces a div when text is non-empty', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('DIV');
+  });
+
+  it('sets div width and height from source data', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'hello';
+    node.data.width = 200;
+    node.data.height = 100;
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy))!;
+    expect(div.style.width).toBe('200px');
+    expect(div.style.height).toBe('100px');
+  });
+
+  it('includes the text content in innerHtml', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'world';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy))!;
+    expect(div.innerHTML).toContain('world');
+  });
+
+  it('renders resolved multi-format spans', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'BoldGreen';
+    node.data.textFormatRanges = [
+      { start: 0, end: 4, format: { bold: true } },
+      { start: 4, end: 9, format: { color: 0x00ff00 } },
+    ];
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy))!;
+    expect(div.innerHTML).toContain('Bold');
+    expect(div.innerHTML).toContain('Green');
+    expect(div.innerHTML).toContain('bold');
+    expect(div.innerHTML).toContain('#00ff00');
+  });
+
+  it('sets backgroundColor when background is enabled', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'hi';
+    node.data.background = true;
+    node.data.backgroundColor = 0xff0000;
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy))!;
+    expect(div.style.backgroundColor).not.toBe('');
+  });
+
+  it('clears backgroundColor when background is disabled', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'hi';
+    node.data.background = false;
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy))!;
+    expect(div.style.backgroundColor).toBe('');
+  });
+});
+
+describe('drawDomRichTextMask', () => {
+  it('does not throw and produces a DOM element', () => {
+    const state = makeState();
+    const node = createRichText({ data: { text: 'mask text' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    const el = drawGetEl(state, () => drawDomRichTextMask(state, renderProxy));
+    expect(el).not.toBeNull();
+  });
+});
+
+describe('registerDomTextInputOverlay', () => {
+  it('invokes the registered overlay only for a RichText with an input slot', () => {
+    const overlay = vi.fn();
+    registerDomTextInputOverlay(overlay);
+    const state = makeState();
+
+    const plain = createRichText({ data: { text: 'x' } });
+    drawDomRichText(state, getOrCreateRenderProxy2D(state, plain));
+    expect(overlay).not.toHaveBeenCalled();
+
+    const editable = createRichText({ data: { text: 'x' } });
+    enableTextInput(editable);
+    drawDomRichText(state, getOrCreateRenderProxy2D(state, editable));
+    expect(overlay).toHaveBeenCalled();
+  });
+});

package/src/domScale9Mapper.test.ts

@@ -0,0 +1,20 @@
+import { createRectangle } from '@flighthq/geometry';
+
+import { buildDomScale9Mapper } from './domScale9Mapper';
+
+describe('buildDomScale9Mapper', () => {
+  it('returns null for invalid scale or bounds', () => {
+    expect(buildDomScale9Mapper(createRectangle(0, 0, 0, 100), createRectangle(10, 10, 20, 20), 1, 1)).toBeNull();
+    expect(buildDomScale9Mapper(createRectangle(0, 0, 100, 100), createRectangle(10, 10, 20, 20), 0, 1)).toBeNull();
+  });
+
+  it('maps edge and center coordinates using 9-slice scaling', () => {
+    const mapper = buildDomScale9Mapper(createRectangle(0, 0, 100, 100), createRectangle(10, 10, 20, 20), 2, 3)!;
+
+    expect(mapper.mapX(5)).toBe(5);
+    expect(mapper.mapX(20)).toBe(70);
+    expect(mapper.mapX(40)).toBe(140);
+    expect(mapper.mapY(20)).toBe(120);
+    expect(mapper.mapY(40)).toBe(240);
+  });
+});

package/src/domScale9Shape.test.ts

@@ -0,0 +1,76 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { appendShapeBeginFill, appendShapeRectangle, createScale9Shape } from '@flighthq/shape';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { createDomScale9ShapeData, defaultDomScale9ShapeRenderer, drawDomScale9Shape } from './domScale9Shape';
+
+const grid = { height: 80, width: 80, x: 10, y: 10 };
+
+function getCurrentElement(state: ReturnType<typeof createDomRenderState>): HTMLElement | null {
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('createDomScale9ShapeData', () => {
+  it('creates empty renderer data', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    const shape = createScale9Shape(grid);
+
+    const data = createDomScale9ShapeData(state, shape);
+
+    expect(data.canvas).toBeNull();
+    expect(data.context).toBeNull();
+  });
+});
+
+describe('defaultDomScale9ShapeRenderer', () => {
+  it('has submit, and createData functions', () => {
+    expect(defaultDomScale9ShapeRenderer.createData).toBe(createDomScale9ShapeData);
+    expect(defaultDomScale9ShapeRenderer.submit).toBe(drawDomScale9Shape);
+  });
+});
+
+describe('drawDomScale9Shape', () => {
+  it('returns early when commands are empty', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    const shape = createScale9Shape(grid);
+    const data = getOrCreateRenderProxy2D(state, shape);
+    data.rendererData = createDomScale9ShapeData(state, shape);
+
+    drawDomScale9Shape(state, data);
+
+    expect(getCurrentElement(state)).toBeNull();
+  });
+
+  it('returns early when rendererData is null', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    const shape = createScale9Shape(grid);
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawDomScale9Shape(state, data);
+
+    expect(getCurrentElement(state)).toBeNull();
+  });
+
+  it('renders remapped commands into a canvas and strips object scale from the transform', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    const shape = createScale9Shape(grid);
+    shape.scaleX = 2;
+    shape.scaleY = 3;
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const data = getOrCreateRenderProxy2D(state, shape);
+    data.rendererData = createDomScale9ShapeData(state, shape);
+    data.transform2D.a = 2;
+    data.transform2D.d = 3;
+
+    drawDomScale9Shape(state, data);
+
+    const element = getCurrentElement(state) as HTMLCanvasElement;
+    expect(element.tagName).toBe('CANVAS');
+    expect(element.width).toBe(200);
+    expect(element.height).toBe(300);
+    expect(element.style.transform).toBe('matrix(1,0,0,1,0,0)');
+  });
+});

package/src/domShape.test.ts

@@ -0,0 +1,85 @@
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { defaultCanvasShapeCommands, registerCanvasShapeCommands } from '@flighthq/scene2d-canvas';
+import { appendShapeBeginFill, appendShapeEndFill, appendShapeRectangle, createShape } from '@flighthq/shape';
+import { ShapeKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomShapeRenderer, drawDomShape } from './domShape';
+
+beforeAll(() => {
+  registerCanvasShapeCommands(defaultCanvasShapeCommands);
+});
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, ShapeKind, defaultDomShapeRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomShapeRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultDomShapeRenderer.submit).toBe('function');
+    expect(typeof defaultDomShapeRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomShape', () => {
+  it('does not produce an element when commands array is empty', () => {
+    const state = makeState();
+    const shape = createShape();
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const el = drawGetEl(state, () => drawDomShape(state, renderProxy));
+
+    expect(el).toBeNull();
+  });
+
+  it('produces a canvas element when the shape has draw commands', () => {
+    const state = makeState();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 50, 50);
+    appendShapeEndFill(shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const el = drawGetEl(state, () => drawDomShape(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('CANVAS');
+  });
+
+  it('sets canvas size to at least 1x1 for zero-size shapes', () => {
+    const state = makeState();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 0, 0);
+    appendShapeEndFill(shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const canvas = drawGetEl(state, () => drawDomShape(state, renderProxy)) as HTMLCanvasElement;
+    expect(canvas.width).toBeGreaterThanOrEqual(1);
+    expect(canvas.height).toBeGreaterThanOrEqual(1);
+  });
+
+  it('reuses the same canvas element across multiple draws', () => {
+    const state = makeState();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 40, 40);
+    appendShapeEndFill(shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const firstCanvas = drawGetEl(state, () => drawDomShape(state, renderProxy));
+    const secondCanvas = drawGetEl(state, () => drawDomShape(state, renderProxy));
+
+    expect(firstCanvas).toBe(secondCanvas);
+  });
+});

package/src/domStyle.test.ts

@@ -0,0 +1,130 @@
+import { setMatrix } from '@flighthq/geometry';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createDisplayObject } from '@flighthq/scene2d';
+import { BlendMode } from '@flighthq/types';
+
+import { enableDomCssFilterSupport, setDomCssFilter } from './domCSSFilterBinding';
+import { enableDomBlendModeSupport } from './domMaterials';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { applyDomStyle, prepareDomElement, setDomRendererElement } from './domStyle';
+
+function makeState() {
+  const container = document.createElement('div');
+  return createDomRenderState(container);
+}
+
+describe('applyDomStyle', () => {
+  it('applies the world transform as a CSS matrix', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    setMatrix(node.transform2D, 1, 0, 0, 1, 10, 20);
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.transform).toContain('matrix(1,0,0,1,10,20)');
+  });
+
+  it('sets opacity when alpha is less than 1', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.alpha = 0.5;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.opacity).toBe('0.5');
+  });
+
+  it('clears opacity when alpha is 1', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    el.style.opacity = '0.5';
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.alpha = 1;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.opacity).toBe('');
+  });
+
+  it('sets mixBlendMode for non-default blend mode when blend support is enabled', () => {
+    const state = makeState();
+    enableDomBlendModeSupport(state);
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.blendMode = BlendMode.Multiply;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.mixBlendMode).toBe('multiply');
+  });
+
+  it('leaves mixBlendMode untouched when blend support is not enabled', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.blendMode = BlendMode.Multiply;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.mixBlendMode).toBe('');
+  });
+
+  it('applies a bound CSS filter to the element', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    enableDomCssFilterSupport(state);
+    setDomCssFilter(state, obj, 'blur(3px)');
+    const node = getOrCreateRenderProxy2D(state, obj);
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.filter).toBe('blur(3px)');
+  });
+});
+
+describe('prepareDomElement', () => {
+  it('sets position to absolute', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.position).toBe('absolute');
+  });
+
+  it('sets left and top to 0', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.left).toBe('0px');
+    expect(el.style.top).toBe('0px');
+  });
+
+  it('sets transformOrigin to "0 0"', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.transformOrigin).toBe('0 0');
+  });
+
+  it('sets pointerEvents to none', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.pointerEvents).toBe('none');
+  });
+});
+
+describe('setDomRendererElement', () => {
+  it('writes the element to domCurrentElement on the internal state', () => {
+    const container = document.createElement('div');
+    const state = createDomRenderState(container);
+    const el = document.createElement('canvas');
+
+    setDomRendererElement(state, el);
+
+    expect(getDomRenderStateRuntime(state).domCurrentElement).toBe(el);
+  });
+});

package/src/domTextHelpers.test.ts

@@ -0,0 +1,27 @@
+import { escapeDomHtmlString } from './domTextHelpers';
+
+describe('escapeDomHtmlString', () => {
+  it('escapes ampersands', () => {
+    expect(escapeDomHtmlString('a&b')).toBe('a&b');
+  });
+
+  it('escapes greater-than signs', () => {
+    expect(escapeDomHtmlString('a>b')).toBe('a>b');
+  });
+
+  it('escapes less-than signs', () => {
+    expect(escapeDomHtmlString('a<b')).toBe('a&lt;b');
+  });
+
+  it('escapes multiple special characters in sequence', () => {
+    expect(escapeDomHtmlString('<a & b>')).toBe('&lt;a&nbsp;&amp;&nbsp;b&gt;');
+  });
+
+  it('escapes spaces to &nbsp;', () => {
+    expect(escapeDomHtmlString('a b')).toBe('a&nbsp;b');
+  });
+
+  it('returns unchanged string when no special characters', () => {
+    expect(escapeDomHtmlString('hello')).toBe('hello');
+  });
+});

package/src/domTextInput.test.ts

@@ -0,0 +1,61 @@
+import { getOrCreateRenderProxy2D, registerRenderer } from '@flighthq/render';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput, setTextInputSelection } from '@flighthq/textinput';
+import type { RichText } from '@flighthq/types';
+import { RichTextKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomRichTextRenderer, drawDomRichText } from './domRichText';
+import { drawDomTextInputOverlay, enableDomTextInput } from './domTextInput';
+
+function makeState() {
+  const state = createDomRenderState(document.createElement('div'));
+  registerRenderer(state, RichTextKind, defaultDomRichTextRenderer);
+  return state;
+}
+
+function makeFocusedInput(text: string): RichText {
+  const node = createRichText({ data: { text, width: 100, height: 40 } });
+  enableTextInput(node).focused = true;
+  return node;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('drawDomTextInputOverlay', () => {
+  it('is the installed overlay function', () => {
+    expect(typeof drawDomTextInputOverlay).toBe('function');
+  });
+
+  it('appends a caret for the focused collapsed selection', () => {
+    enableDomTextInput();
+    const state = makeState();
+    const node = makeFocusedInput('hello');
+    setTextInputSelection(node, 2, 2);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+    expect(div!.innerHTML).toContain('background:#000000');
+  });
+
+  it('appends selection rectangles for the focused expanded selection', () => {
+    enableDomTextInput();
+    const state = makeState();
+    const node = makeFocusedInput('hello');
+    setTextInputSelection(node, 1, 4);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+    expect(div!.innerHTML).toContain('background:#0078d7');
+  });
+});
+
+describe('enableDomTextInput', () => {
+  it('installs the overlay without throwing', () => {
+    expect(() => enableDomTextInput()).not.toThrow();
+  });
+});

package/src/domTextLabel.test.ts

@@ -0,0 +1,92 @@
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createTextLabel } from '@flighthq/text';
+import { TextLabelKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomTextLabelRenderer, drawDomTextLabel } from './domTextLabel';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, TextLabelKind, defaultDomTextLabelRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomTextLabelRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultDomTextLabelRenderer.submit).toBe('function');
+    expect(typeof defaultDomTextLabelRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomTextLabel', () => {
+  it('does not throw when text is empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawDomTextLabel(state, renderProxy)).not.toThrow();
+  });
+
+  it('produces no element when text is empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+
+    expect(el).toBeNull();
+  });
+
+  it('produces a div when text is non-empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('DIV');
+  });
+
+  it('sets overflow:hidden on the div', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomTextLabel(state, renderProxy))!;
+    expect(div.style.overflow).toBe('hidden');
+  });
+
+  it('includes the text content in innerHtml', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'world';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomTextLabel(state, renderProxy))!;
+    expect(div.innerHTML).toContain('world');
+  });
+
+  it('reuses the same div across multiple draws', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const firstDiv = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+    const secondDiv = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+
+    expect(firstDiv).toBe(secondDiv);
+  });
+});