@xincli/opentui-core 0.4.6

package/src/tests/ffi-borrowed-pointer-callsites.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, test } from "bun:test"
+import { resolveRenderLib } from "../zig.js"
+import { StyledChunkStruct, CursorStyleOptionsStruct } from "../zig-structs.js"
+import { RGBA } from "../lib/RGBA.js"
+import { toArrayBuffer, type Pointer } from "../platform/ffi.js"
+
+// Borrowed-pointer contract for styled text, styled placeholders, and cursor
+// options: packed struct buffers must reach the FFI symbol as object values so
+// the backend can borrow them for the synchronous call. Passing a pre-resolved
+// address instead reintroduces the Node use-after-free from issue #1212.
+
+const lib = resolveRenderLib()
+const symbols = (lib as any).opentui.symbols as Record<string, (...args: any[]) => any>
+
+function withStubbedSymbol(name: string, fn: (calls: any[][]) => void): void {
+  const calls: any[][] = []
+  const original = symbols[name]
+  symbols[name] = (...args: any[]) => {
+    calls.push(args)
+  }
+  try {
+    fn(calls)
+  } finally {
+    symbols[name] = original
+  }
+}
+
+async function forceGc(): Promise<void> {
+  if (typeof Bun !== "undefined") {
+    Bun.gc(true)
+  }
+  ;(globalThis as any).gc?.()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+}
+
+function fieldOffset(struct: { layoutByName: Map<string, { offset: number }> }, name: string): number {
+  const field = struct.layoutByName.get(name)
+  if (!field) {
+    throw new Error(`Missing struct field: ${name}`)
+  }
+  return field.offset
+}
+
+function readPackedColor(packed: ArrayBuffer, offset: number): number[] {
+  // 64-bit StyledChunk/CursorStyleOptions layout; matches the supported
+  // x64/arm64 native targets.
+  const address = new DataView(packed).getBigUint64(offset, true)
+  expect(address).not.toBe(0n)
+  return [...new Uint16Array(toArrayBuffer(address as unknown as Pointer, 0, 8).slice(0))]
+}
+
+describe("borrowed pointer call sites", () => {
+  test("textBufferSetStyledText passes the packed chunk buffer as an object value", () => {
+    withStubbedSymbol("textBufferSetStyledText", (calls) => {
+      const chunks = [
+        { text: "hello", fg: RGBA.fromValues(1, 0, 0, 1) },
+        { text: "world", bg: RGBA.fromValues(0, 0, 1, 1) },
+      ]
+
+      lib.textBufferSetStyledText(0 as any, chunks)
+
+      expect(calls).toHaveLength(1)
+      expect(calls[0]![1]).toBeInstanceOf(ArrayBuffer)
+      expect((calls[0]![1] as ArrayBuffer).byteLength).toBe(StyledChunkStruct.size * chunks.length)
+      expect(calls[0]![2]).toBe(chunks.length)
+    })
+  })
+
+  test("editorViewSetPlaceholderStyledText passes the packed chunk buffer as an object value", () => {
+    withStubbedSymbol("editorViewSetPlaceholderStyledText", (calls) => {
+      lib.editorViewSetPlaceholderStyledText(0 as any, [{ text: "placeholder", fg: RGBA.fromValues(0, 1, 0, 1) }])
+      lib.editorViewSetPlaceholderStyledText(0 as any, [{ text: "" }])
+
+      expect(calls).toHaveLength(2)
+      expect(calls[0]![1]).toBeInstanceOf(ArrayBuffer)
+      expect((calls[0]![1] as ArrayBuffer).byteLength).toBe(StyledChunkStruct.size)
+      expect(calls[1]![1]).toBeNull()
+      expect(calls[1]![2]).toBe(0)
+    })
+  })
+
+  test("setCursorStyleOptions passes the packed options buffer as an object value", () => {
+    withStubbedSymbol("setCursorStyleOptions", (calls) => {
+      lib.setCursorStyleOptions(0 as any, { style: "block", blinking: true, color: RGBA.fromValues(1, 1, 0, 1) })
+
+      expect(calls).toHaveLength(1)
+      expect(calls[0]![1]).toBeInstanceOf(ArrayBuffer)
+      expect((calls[0]![1] as ArrayBuffer).byteLength).toBe(CursorStyleOptionsStruct.size)
+    })
+  })
+})
+
+describe("packed color owner retention", () => {
+  test("styled chunk fg and bg colors stay readable after GC of transient chunks", async () => {
+    const fgOffset = fieldOffset(StyledChunkStruct, "fg")
+    const bgOffset = fieldOffset(StyledChunkStruct, "bg")
+
+    const packTransientChunks = (count: number) => {
+      const chunks = []
+      const expected = []
+      for (let i = 0; i < count; i++) {
+        const fg = RGBA.fromValues((i % 16) / 15, 0, 1, 1)
+        const bg = RGBA.fromValues(0, (i % 16) / 15, 0, 1)
+        chunks.push({ text: `chunk-${i}`, fg, bg })
+        expected.push({ fg: [...fg.buffer], bg: [...bg.buffer] })
+      }
+      // The chunk objects and their RGBA instances are unreachable after this
+      // returns; only the packed buffer may keep the color memory alive.
+      return { packed: StyledChunkStruct.packList(chunks), expected }
+    }
+
+    const count = 16
+    const { packed, expected } = packTransientChunks(count)
+
+    for (let round = 0; round < 20; round++) {
+      const churn = []
+      for (let i = 0; i < 2048; i++) {
+        churn.push(new Uint16Array(4).fill(round))
+      }
+      await forceGc()
+
+      for (let i = 0; i < count; i++) {
+        const base = i * StyledChunkStruct.size
+        expect(readPackedColor(packed, base + fgOffset)).toEqual(expected[i]!.fg)
+        expect(readPackedColor(packed, base + bgOffset)).toEqual(expected[i]!.bg)
+      }
+    }
+  })
+
+  test("cursor style color stays readable after GC of the transient RGBA", async () => {
+    const colorOffset = fieldOffset(CursorStyleOptionsStruct, "color")
+
+    const packTransientColor = () => {
+      const color = RGBA.fromValues(0.5, 0.25, 0.75, 1)
+      return {
+        packed: CursorStyleOptionsStruct.pack({ style: 255, blinking: 255, color, cursor: 255 }),
+        expected: [...color.buffer],
+      }
+    }
+
+    const { packed, expected } = packTransientColor()
+
+    for (let round = 0; round < 20; round++) {
+      const churn = []
+      for (let i = 0; i < 2048; i++) {
+        churn.push(new Uint16Array(4).fill(round))
+      }
+      await forceGc()
+
+      expect(readPackedColor(packed, colorOffset)).toEqual(expected)
+    }
+  })
+})

package/src/tests/hover-cursor.test.ts

@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, test, afterEach } from "bun:test"
+import { createTestRenderer, MouseButtons, type MockMouse, type TestRenderer } from "../testing.js"
+import { BoxRenderable } from "../renderables/index.js"
+import type { MousePointerStyle } from "../types.js"
+
+describe("mouse pointer style", () => {
+  let renderer: TestRenderer
+  let mockMouse: MockMouse
+  let renderOnce: () => Promise<void>
+
+  beforeEach(async () => {
+    ;({ renderer, mockMouse, renderOnce } = await createTestRenderer({ width: 40, height: 20 }))
+  })
+
+  afterEach(() => {
+    renderer.destroy()
+  })
+
+  test("setMousePointer sets style", async () => {
+    renderer.setMousePointer("pointer")
+    expect((renderer as any)._currentMousePointerStyle).toBe("pointer")
+  })
+
+  test("setMousePointer with 'default' clears style", async () => {
+    renderer.setMousePointer("pointer")
+    renderer.setMousePointer("default")
+    expect((renderer as any)._currentMousePointerStyle).toBe("default")
+  })
+
+  test("setMousePointer supports all style types", async () => {
+    const styles: MousePointerStyle[] = ["default", "pointer", "text", "crosshair", "move", "not-allowed"]
+    for (const style of styles) {
+      renderer.setMousePointer(style)
+      expect((renderer as any)._currentMousePointerStyle).toBe(style)
+    }
+  })
+
+  test("onMouseOver callback can set mouse pointer", async () => {
+    let pointerSet = false
+    const box = new BoxRenderable(renderer, {
+      position: "absolute",
+      left: 5,
+      top: 5,
+      width: 10,
+      height: 5,
+      onMouseOver() {
+        this.ctx.setMousePointer("pointer")
+        pointerSet = true
+      },
+    })
+    renderer.root.add(box)
+    await renderOnce()
+
+    await mockMouse.moveTo(10, 7)
+    await renderOnce()
+
+    expect(pointerSet).toBe(true)
+    expect((renderer as any)._currentMousePointerStyle).toBe("pointer")
+  })
+
+  test("onMouseOut callback can reset mouse pointer", async () => {
+    let pointerReset = false
+    const box = new BoxRenderable(renderer, {
+      position: "absolute",
+      left: 5,
+      top: 5,
+      width: 10,
+      height: 5,
+      onMouseOver() {
+        this.ctx.setMousePointer("pointer")
+      },
+      onMouseOut() {
+        this.ctx.setMousePointer("default")
+        pointerReset = true
+      },
+    })
+    renderer.root.add(box)
+    await renderOnce()
+
+    // Move into box
+    await mockMouse.moveTo(10, 7)
+    await renderOnce()
+    expect((renderer as any)._currentMousePointerStyle).toBe("pointer")
+
+    // Move out of box
+    await mockMouse.moveTo(1, 1)
+    await renderOnce()
+
+    expect(pointerReset).toBe(true)
+    expect((renderer as any)._currentMousePointerStyle).toBe("default")
+  })
+
+  test("pointer resets on renderer destroy", async () => {
+    renderer.setMousePointer("pointer")
+    renderer.destroy()
+    // After destroy, the reset is called internally - just verify no error
+  })
+})

package/src/tests/native-backed-measurement-lifecycle.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test"
+import { BoxRenderable } from "../renderables/Box.js"
+import { TextareaRenderable } from "../renderables/Textarea.js"
+import { TextRenderable } from "../renderables/Text.js"
+import { createTestRenderer, type TestRenderer } from "../testing/test-renderer.js"
+
+// Native-backed measurement wires renderables to native state (measure targets,
+// Yoga measure funcs, handles). These tests lock the lifecycle behavior:
+// destroying renderables must detach cleanly while the rest of the tree keeps
+// measuring, including under create/layout/destroy churn.
+
+let renderer: TestRenderer
+let renderOnce: () => Promise<void>
+
+beforeEach(async () => {
+  ;({ renderer, renderOnce } = await createTestRenderer({ width: 80, height: 30 }))
+})
+
+afterEach(() => {
+  renderer.destroy()
+})
+
+function maybeCollectGarbage(): void {
+  const bun = (globalThis as { Bun?: { gc?: (force?: boolean) => void } }).Bun
+  bun?.gc?.(false)
+}
+
+function expectSize(
+  renderable: TextRenderable | TextareaRenderable,
+  expected: { width: number; height: number },
+): void {
+  expect(renderable.width).toBeCloseTo(expected.width, 5)
+  expect(renderable.height).toBeCloseTo(expected.height, 5)
+}
+
+describe("native-backed measurement lifecycle", () => {
+  test("destroying a text renderable keeps sibling measurement working", async () => {
+    const parent = new BoxRenderable(renderer, { width: 40, flexDirection: "column", alignItems: "flex-start" })
+    const first = new TextRenderable(renderer, { content: "AAAAA", wrapMode: "none", alignSelf: "flex-start" })
+    const second = new TextRenderable(renderer, { content: "BBBBBBBBBB", wrapMode: "none", alignSelf: "flex-start" })
+    parent.add(first)
+    parent.add(second)
+    renderer.root.add(parent)
+    await renderOnce()
+
+    expectSize(first, { width: 5, height: 1 })
+    expectSize(second, { width: 10, height: 1 })
+
+    first.destroy()
+    await renderOnce()
+    expectSize(second, { width: 10, height: 1 })
+
+    second.content = "CCC"
+    await renderOnce()
+    expectSize(second, { width: 3, height: 1 })
+  })
+
+  test("destroying a textarea keeps sibling measurement working", async () => {
+    const parent = new BoxRenderable(renderer, { width: 40, flexDirection: "column", alignItems: "flex-start" })
+    const first = new TextareaRenderable(renderer, { initialValue: "AAAAA", wrapMode: "none", alignSelf: "flex-start" })
+    const second = new TextareaRenderable(renderer, {
+      initialValue: "BBBBBBBBBB",
+      wrapMode: "none",
+      alignSelf: "flex-start",
+    })
+    parent.add(first)
+    parent.add(second)
+    renderer.root.add(parent)
+    await renderOnce()
+
+    expectSize(first, { width: 5, height: 1 })
+    expectSize(second, { width: 10, height: 1 })
+
+    first.destroy()
+    await renderOnce()
+    expectSize(second, { width: 10, height: 1 })
+
+    second.setText("CCC")
+    await renderOnce()
+    expectSize(second, { width: 3, height: 1 })
+  })
+
+  test("survives create/layout/destroy churn of native-backed renderables", async () => {
+    for (let round = 0; round < 20; round++) {
+      const container = new BoxRenderable(renderer, { flexDirection: "column", alignItems: "flex-start" })
+      renderer.root.add(container)
+
+      const texts: TextRenderable[] = []
+      const textareas: TextareaRenderable[] = []
+      for (let index = 0; index < 16; index++) {
+        const width = 1 + ((round + index) % 20)
+        const text = new TextRenderable(renderer, {
+          content: "X".repeat(width),
+          wrapMode: "none",
+          alignSelf: "flex-start",
+        })
+        texts.push(text)
+        container.add(text)
+      }
+      for (let index = 0; index < 6; index++) {
+        const width = 1 + ((round + index) % 15)
+        const textarea = new TextareaRenderable(renderer, {
+          initialValue: "Y".repeat(width),
+          wrapMode: "none",
+          alignSelf: "flex-start",
+        })
+        textareas.push(textarea)
+        container.add(textarea)
+      }
+
+      await renderOnce()
+
+      for (const [index, text] of texts.entries()) {
+        expectSize(text, { width: 1 + ((round + index) % 20), height: 1 })
+      }
+      for (const [index, textarea] of textareas.entries()) {
+        expectSize(textarea, { width: 1 + ((round + index) % 15), height: 1 })
+      }
+
+      // Alternate destroy orders: children-first and recursive subtree destroy.
+      if (round % 2 === 0) {
+        for (const text of texts) text.destroy()
+        for (const textarea of textareas) textarea.destroy()
+        container.destroy()
+      } else {
+        container.destroyRecursively()
+      }
+
+      if (round % 5 === 0) maybeCollectGarbage()
+      await renderOnce()
+    }
+  })
+})

package/src/tests/native-backed-measurement-parity.test.ts

@@ -0,0 +1,322 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test"
+import { BoxRenderable } from "../renderables/Box.js"
+import { TextareaRenderable } from "../renderables/Textarea.js"
+import { TextRenderable } from "../renderables/Text.js"
+import { createTestRenderer, type TestRenderer } from "../testing/test-renderer.js"
+
+// These tests lock the measurement behavior of the old TypeScript Yoga measure
+// functions at the renderable/Yoga boundary, now that TextRenderable and
+// TextareaRenderable use native-backed measurement. All expectations are
+// hardcoded so the tests stay valid across implementation refactors.
+
+const WORD_WRAP_CONTENT = "Hello wonderful world from OpenTUI"
+const PLACEHOLDER_CONTENT = "Placeholder text that is longer than content"
+
+let renderer: TestRenderer
+let renderOnce: () => Promise<void>
+
+beforeEach(async () => {
+  ;({ renderer, renderOnce } = await createTestRenderer({ width: 80, height: 30 }))
+})
+
+afterEach(() => {
+  renderer.destroy()
+})
+
+function expectCloseToLayout(actual: number, expected: number): void {
+  expect(actual).toBeCloseTo(expected, 5)
+}
+
+function expectLayout(
+  renderable: TextRenderable | TextareaRenderable,
+  expected: { width: number; height: number },
+): void {
+  expectCloseToLayout(renderable.width, expected.width)
+  expectCloseToLayout(renderable.height, expected.height)
+
+  const layout = renderable.getLayoutNode().getComputedLayout()
+  expectCloseToLayout(layout.width, expected.width)
+  expectCloseToLayout(layout.height, expected.height)
+}
+
+async function renderInConstrainedColumn(renderable: TextRenderable | TextareaRenderable): Promise<void> {
+  renderer.root.add(renderable)
+  await renderOnce()
+}
+
+async function renderInParent(
+  renderable: TextRenderable | TextareaRenderable,
+  options: { width: number; height?: number },
+): Promise<void> {
+  const parent = new BoxRenderable(renderer, {
+    width: options.width,
+    ...(options.height === undefined ? {} : { height: options.height }),
+    alignItems: "flex-start",
+  })
+  parent.add(renderable)
+  renderer.root.add(parent)
+  await renderOnce()
+}
+
+describe("native-backed measurement parity", () => {
+  describe("TextRenderable", () => {
+    test("matches native char-wrap measurement with relative AtMost clamping", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(text)
+
+      expectLayout(text, { width: 20, height: 1 })
+    })
+
+    test("matches native word-wrap measurement with relative AtMost clamping", async () => {
+      const text = new TextRenderable(renderer, {
+        content: WORD_WRAP_CONTENT,
+        wrapMode: "word",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(text)
+
+      expectLayout(text, { width: WORD_WRAP_CONTENT.length, height: 1 })
+    })
+
+    test("matches native no-wrap measurement", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "Short\nAVeryLongLineHere\nMedium",
+        wrapMode: "none",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(text)
+
+      expectLayout(text, { width: "AVeryLongLineHere".length, height: 3 })
+    })
+
+    test("clamps relative AtMost measurement to a narrower parent", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "none",
+        alignSelf: "flex-start",
+      })
+
+      await renderInParent(text, { width: 10 })
+
+      expectLayout(text, { width: 10, height: 1 })
+    })
+
+    test("stretches relative text to the root width by default", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "Short",
+        wrapMode: "char",
+      })
+
+      await renderInConstrainedColumn(text)
+
+      expectLayout(text, { width: 80, height: 1 })
+    })
+
+    test("preserves minimum Yoga measurement size for empty content", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "",
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(text)
+
+      expectLayout(text, { width: 1, height: 1 })
+    })
+
+    test("does not apply relative AtMost clamping for absolute-positioned text", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "none",
+        position: "absolute",
+        left: 0,
+        top: 0,
+      })
+
+      await renderInConstrainedColumn(text)
+
+      expectLayout(text, { width: 20, height: 1 })
+    })
+
+    test("recomputes measurement after content changes", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "Short",
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(text)
+      expectLayout(text, { width: 5, height: 1 })
+
+      text.content = "ABCDEFGHIJKLMNOPQRST"
+      await renderOnce()
+
+      expectLayout(text, { width: 20, height: 1 })
+    })
+
+    test("applies and removes AtMost clamping when position changes at runtime", async () => {
+      const text = new TextRenderable(renderer, {
+        content: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "none",
+        alignSelf: "flex-start",
+        left: 0,
+        top: 0,
+      })
+
+      await renderInParent(text, { width: 10 })
+      expectLayout(text, { width: 10, height: 1 })
+
+      text.position = "absolute"
+      await renderOnce()
+      expectLayout(text, { width: 20, height: 1 })
+
+      text.position = "relative"
+      await renderOnce()
+      expectLayout(text, { width: 10, height: 1 })
+    })
+  })
+
+  describe("TextareaRenderable", () => {
+    test("matches native char-wrap editor measurement with relative AtMost clamping", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: 20, height: 1 })
+    })
+
+    test("matches native word-wrap editor measurement with relative AtMost clamping", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: WORD_WRAP_CONTENT,
+        wrapMode: "word",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: WORD_WRAP_CONTENT.length, height: 1 })
+    })
+
+    test("matches native no-wrap editor measurement", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "Short\nAVeryLongLineHere\nMedium",
+        wrapMode: "none",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: "AVeryLongLineHere".length, height: 3 })
+    })
+
+    test("clamps relative editor AtMost measurement to a narrower parent", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "none",
+        alignSelf: "flex-start",
+      })
+
+      await renderInParent(textarea, { width: 10 })
+
+      expectLayout(textarea, { width: 10, height: 1 })
+    })
+
+    test("stretches relative editors to the root width by default", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "Short",
+        wrapMode: "char",
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: 80, height: 1 })
+    })
+
+    test("preserves minimum Yoga measurement size for an empty editor", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "",
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: 1, height: 1 })
+    })
+
+    test("does not apply relative AtMost clamping for absolute-positioned editors", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "none",
+        position: "absolute",
+        left: 0,
+        top: 0,
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: 20, height: 1 })
+    })
+
+    test("recomputes editor measurement after text changes", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "Short",
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(textarea)
+      expectLayout(textarea, { width: 5, height: 1 })
+
+      textarea.setText("ABCDEFGHIJKLMNOPQRST")
+      await renderOnce()
+
+      expectLayout(textarea, { width: 20, height: 1 })
+    })
+
+    test("captures current placeholder measurement behavior", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "",
+        placeholder: PLACEHOLDER_CONTENT,
+        wrapMode: "char",
+        alignSelf: "flex-start",
+      })
+
+      await renderInConstrainedColumn(textarea)
+
+      expectLayout(textarea, { width: PLACEHOLDER_CONTENT.length, height: 1 })
+    })
+
+    test("applies and removes AtMost clamping when position changes at runtime", async () => {
+      const textarea = new TextareaRenderable(renderer, {
+        initialValue: "ABCDEFGHIJKLMNOPQRST",
+        wrapMode: "none",
+        alignSelf: "flex-start",
+        left: 0,
+        top: 0,
+      })
+
+      await renderInParent(textarea, { width: 10 })
+      expectLayout(textarea, { width: 10, height: 1 })
+
+      textarea.position = "absolute"
+      await renderOnce()
+      expectLayout(textarea, { width: 20, height: 1 })
+
+      textarea.position = "relative"
+      await renderOnce()
+      expectLayout(textarea, { width: 10, height: 1 })
+    })
+  })
+})