@flighthq/displayobject-dom 0.1.0

package/src/domNativeText.test.ts

@@ -0,0 +1,71 @@
+import { getOrCreateRenderProxy2D, registerRenderer } from '@flighthq/render';
+import { createNativeText } from '@flighthq/text';
+import { NativeTextKind } from '@flighthq/types';
+
+import { defaultDomNativeTextRenderer, drawDomNativeText, drawDomNativeTextMask } from './domNativeText';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, NativeTextKind, defaultDomNativeTextRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomNativeTextRenderer', () => {
+  it('has submit and createData', () => {
+    expect(typeof defaultDomNativeTextRenderer.submit).toBe('function');
+    expect(typeof defaultDomNativeTextRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomNativeText', () => {
+  it('produces a div carrying the text content', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hello' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomNativeText(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('DIV');
+    expect(el!.textContent).toBe('hello');
+  });
+
+  it('reuses the same element across multiple draws', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hello' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const first = drawGetEl(state, () => drawDomNativeText(state, renderProxy));
+    const second = drawGetEl(state, () => drawDomNativeText(state, renderProxy));
+
+    expect(first).toBe(second);
+  });
+
+  it('sets a fixed box under autoSize none', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hi', width: 120, height: 40 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomNativeText(state, renderProxy))!;
+    expect(div.style.width).toBe('120px');
+    expect(div.style.height).toBe('40px');
+    expect(div.style.overflow).toBe('hidden');
+  });
+});
+
+describe('drawDomNativeTextMask', () => {
+  it('does not throw', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hi' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawDomNativeTextMask(state, renderProxy)).not.toThrow();
+  });
+});

package/src/domReconcile.test.ts

@@ -0,0 +1,158 @@
+import type { DomRenderStateRuntime } from '@flighthq/types';
+
+import { hasDomStructureChanged, processDomNode, reconcileDomContainer, swapDomOrderLists } from './domReconcile';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeRuntime(): DomRenderStateRuntime {
+  const container = document.createElement('div');
+  return getDomRenderStateRuntime(createDomRenderState(container));
+}
+
+describe('hasDomStructureChanged', () => {
+  it('returns true when needsReconcile is already set', () => {
+    const runtime = makeRuntime();
+    expect(hasDomStructureChanged(runtime, 0, true)).toBe(true);
+  });
+
+  it('returns true when lengths differ', () => {
+    const runtime = makeRuntime();
+    runtime.domOrderLength = 2;
+    expect(hasDomStructureChanged(runtime, 1, false)).toBe(true);
+  });
+
+  it('returns false when order lists are identical', () => {
+    const runtime = makeRuntime();
+    const node = {} as any;
+    runtime.domOrderLength = 1;
+    runtime.domOrderList[0] = node;
+    runtime.domNextOrderList[0] = node;
+    expect(hasDomStructureChanged(runtime, 1, false)).toBe(false);
+  });
+
+  it('returns true when a node differs at any position', () => {
+    const runtime = makeRuntime();
+    runtime.domOrderLength = 1;
+    runtime.domOrderList[0] = {} as any;
+    runtime.domNextOrderList[0] = {} as any;
+    expect(hasDomStructureChanged(runtime, 1, false)).toBe(true);
+  });
+});
+
+describe('processDomNode', () => {
+  it('calls drawFn and registers the element for a new node', () => {
+    const runtime = makeRuntime();
+    const node = {} as any;
+    const el = document.createElement('div');
+
+    const result = processDomNode(
+      runtime,
+      node,
+      0,
+      () => {
+        runtime.domCurrentElement = el;
+      },
+      0,
+    );
+
+    expect(result.newLength).toBe(1);
+    expect(result.needsReconcile).toBe(true);
+    expect(runtime.domElementMap.get(node)).toBe(el);
+    expect(runtime.domNextOrderList[0]).toBe(node);
+  });
+
+  it('skips drawFn for a known node with no dirty frames', () => {
+    const runtime = makeRuntime();
+    const node = { appearanceFrameId: -1, transformFrameId: -1 } as any;
+    const el = document.createElement('div');
+    runtime.domElementMap.set(node, el);
+
+    let called = false;
+    const result = processDomNode(
+      runtime,
+      node,
+      0,
+      () => {
+        called = true;
+      },
+      0,
+    );
+
+    expect(called).toBe(false);
+    expect(result.needsReconcile).toBe(false);
+    expect(result.newLength).toBe(1);
+  });
+
+  it('sets needsReconcile when the element changes for a known node', () => {
+    const runtime = makeRuntime();
+    const node = { appearanceFrameId: 1, transformFrameId: -1 } as any;
+    const oldEl = document.createElement('div');
+    const newEl = document.createElement('canvas');
+    runtime.domElementMap.set(node, oldEl);
+
+    const result = processDomNode(
+      runtime,
+      node,
+      1,
+      () => {
+        runtime.domCurrentElement = newEl;
+      },
+      0,
+    );
+
+    expect(result.needsReconcile).toBe(true);
+    expect(runtime.domElementMap.get(node)).toBe(newEl);
+  });
+});
+
+describe('reconcileDomContainer', () => {
+  it('removes foreign elements not in the new element set', () => {
+    const runtime = makeRuntime();
+    const container = document.createElement('div');
+    const foreign = document.createElement('span');
+    container.appendChild(foreign);
+
+    reconcileDomContainer(container, runtime, 0);
+
+    expect(container.contains(foreign)).toBe(false);
+  });
+
+  it('places tracked elements in correct order', () => {
+    const runtime = makeRuntime();
+    const container = document.createElement('div');
+    const elA = document.createElement('div');
+    const elB = document.createElement('span');
+    const nodeA = {} as any;
+    const nodeB = {} as any;
+    runtime.domElementMap.set(nodeA, elA);
+    runtime.domElementMap.set(nodeB, elB);
+    runtime.domNextOrderList[0] = nodeA;
+    runtime.domNextOrderList[1] = nodeB;
+
+    reconcileDomContainer(container, runtime, 2);
+
+    const children = Array.from(container.children);
+    expect(children.indexOf(elA)).toBeLessThan(children.indexOf(elB));
+  });
+});
+
+describe('swapDomOrderLists', () => {
+  it('promotes the next list to the current list', () => {
+    const runtime = makeRuntime();
+    const node = {} as any;
+    runtime.domNextOrderList[0] = node;
+
+    swapDomOrderLists(runtime, 1);
+
+    expect(runtime.domOrderList[0]).toBe(node);
+    expect(runtime.domOrderLength).toBe(1);
+  });
+
+  it('recycles the old current list as the next scratch buffer', () => {
+    const runtime = makeRuntime();
+    const prevList = runtime.domOrderList;
+
+    swapDomOrderLists(runtime, 0);
+
+    expect(runtime.domNextOrderList).toBe(prevList);
+  });
+});

package/src/domRenderState.test.ts

@@ -0,0 +1,87 @@
+import { EntityRuntimeKey } from '@flighthq/types';
+
+import { createDomRenderState, createDomRenderStateRuntime, getDomRenderStateRuntime } from './domRenderState';
+
+describe('createDomRenderState', () => {
+  it('returns a state with the provided element', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.element).toBe(div);
+  });
+
+  it('sets position:relative and overflow:hidden on the element', () => {
+    const div = document.createElement('div');
+    createDomRenderState(div);
+    expect(div.style.position).toBe('relative');
+    expect(div.style.overflow).toBe('hidden');
+  });
+
+  it('defaults roundPixels to false', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.roundPixels).toBe(false);
+  });
+
+  it('sets roundPixels from options', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div, { roundPixels: true });
+    expect(state.roundPixels).toBe(true);
+  });
+
+  it('defaults the runtime currentBlendMode to null', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(getDomRenderStateRuntime(state).currentBlendMode).toBeNull();
+  });
+
+  it('attaches a populated runtime under EntityRuntimeKey', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    const runtime = getDomRenderStateRuntime(state);
+    expect(runtime.domClipHooks).toBeNull();
+    expect(runtime.domCurrentElement).toBeNull();
+    expect(runtime.domOrderLength).toBe(-1);
+    expect(runtime.domClipStack).toEqual([]);
+    expect(runtime.domOrderList).toEqual([]);
+    expect(runtime.domNextOrderList).toEqual([]);
+  });
+
+  it('defaults backgroundColor to 0', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.backgroundColor).toBe(0);
+  });
+
+  it('sets backgroundColor from options', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div, { backgroundColor: 0xff0000ff });
+    expect(state.backgroundColor).toBe(0xff0000ff);
+  });
+
+  it('sets pixelRatio from options', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div, { pixelRatio: 3 });
+    expect(state.pixelRatio).toBe(3);
+  });
+
+  it('defaults pixelRatio to 1', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.pixelRatio).toBe(1);
+  });
+});
+
+describe('createDomRenderStateRuntime', () => {
+  it('allocates an entity runtime with a null binding', () => {
+    const runtime = createDomRenderStateRuntime();
+    expect(runtime.binding).toBeNull();
+  });
+});
+
+describe('getDomRenderStateRuntime', () => {
+  it('returns the runtime attached under EntityRuntimeKey', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(getDomRenderStateRuntime(state)).toBe(state[EntityRuntimeKey]);
+  });
+});

package/src/domRenderView.test.ts

@@ -0,0 +1,69 @@
+import { createRenderView } from '@flighthq/displayobject';
+import { getOrCreateRenderProxy2D, registerRenderer } from '@flighthq/render';
+import type { RenderViewRenderer } from '@flighthq/types';
+import { RenderViewKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomRenderViewRenderer, drawDomRenderView } from './domRenderView';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, RenderViewKind, defaultDomRenderViewRenderer);
+  return state;
+}
+
+function makeRenderer(width = 100, height = 100): RenderViewRenderer {
+  const canvas = document.createElement('canvas');
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.width = width;
+  canvas.height = height;
+  return { canvas, render: () => {} };
+}
+
+function getElement(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('drawDomRenderView', () => {
+  it('returns no element when renderer is null', () => {
+    const state = makeState();
+    const view = createRenderView();
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    const el = getElement(state, () => drawDomRenderView(state, renderProxy));
+    expect(el).toBeNull();
+  });
+
+  it('calls render() on the renderer', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    const renderSpy = vi.spyOn(renderer, 'render');
+    const view = createRenderView({ data: { renderer, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    drawDomRenderView(state, renderProxy);
+    expect(renderSpy).toHaveBeenCalledOnce();
+  });
+
+  it('returns the renderer canvas as the DOM element', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    const view = createRenderView({ data: { renderer, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    const el = getElement(state, () => drawDomRenderView(state, renderProxy));
+    expect(el).toBe(renderer.canvas);
+  });
+
+  it('initializes canvas positioning on first draw', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    const view = createRenderView({ data: { renderer, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    drawDomRenderView(state, renderProxy);
+    expect(renderer.canvas.style.position).toBe('absolute');
+    expect(renderer.canvas.style.transformOrigin).toBe('0 0');
+    expect(renderer.canvas.style.pointerEvents).toBe('none');
+  });
+});

package/src/domRichText.test.ts

@@ -0,0 +1,165 @@
+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 htmlText spans', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.htmlText = '<b>Bold</b><font color="#00ff00">Green</font>';
+    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)');
+  });
+});