@@ -0,0 +1,106 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures/muya';
+import { getMarkdown } from '../helpers/api';
+import { editor, floats } from '../helpers/selectors';
+
+/**
+ * Both resize handles must track the pointer 1:1 (#5392).
+ *
+ * A left-aligned image grows on its right side, so its right edge is not an
+ * invariant the left handle can measure against: reading it live once per
+ * mousemove made every event re-add the whole accumulated delta, so a 60 px
+ * drag grew the image by 210 px and kept the pointer far behind the handle.
+ *
+ * The fixture is 400×300 on purpose. `usesDefaultObjectSize` pins an inline
+ * `style="width"` on any image measuring 300 wide or 150 tall (#4991), and
+ * that style beats the `width` attribute the bar writes, so such an image
+ * never resizes at all. 400 also leaves room inside the editor column for the
+ * drags below, so no `max-width: 100%` clamp interferes.
+ */
+const IMAGE = `data:image/svg+xml;base64,${btoa(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="#48c"/></svg>',
+)}`;
+
+const DRAG = 60;
+// Only sub-pixel geometry and the integer truncation of the written width
+// separate the two; the accumulation bug missed by 150 px on this drag.
+const TOLERANCE = 4;
+
+async function showHandles(page: Page) {
+    await page.evaluate(uri => window.muya!.setContent(`![alt](${uri})`), IMAGE);
+
+    const image = page.locator(editor.image).first();
+    await expect(image).toBeVisible();
+    await expect.poll(async () => image.evaluate(el =>
+        el.classList.contains('mu-image-success')), { timeout: 5_000 }).toBe(true);
+
+    const innerImg = image.locator('img').first();
+    await expect(innerImg).toBeVisible();
+    await innerImg.click();
+    await expect(page.locator(floats.imageTransformerHandle)).toHaveCount(2);
+
+    const box = await innerImg.boundingBox();
+    if (!box)
+        throw new Error('image has no bounding box');
+
+    return { startWidth: Math.round(box.width) };
+}
+
+/** Drags one handle `dx` px and reports the width it saved and the width it shows. */
+async function dragHandle(page: Page, position: 'left' | 'right', dx: number) {
+    const box = await page.locator(`${floats.imageTransformer} .bar.${position}`).boundingBox();
+    if (!box)
+        throw new Error(`${position} handle has no bounding box`);
+
+    const cx = box.x + box.width / 2;
+    const cy = box.y + box.height / 2;
+    await page.mouse.move(cx, cy);
+    await page.mouse.down();
+    // Six discrete moves: the bug compounded per event, so a stepped drag
+    // separates "follows the pointer" from "re-adds the delta every time".
+    for (let i = 1; i <= 6; i++)
+        await page.mouse.move(cx + (dx * i) / 6, cy);
+
+    await page.mouse.up();
+
+    // Mouseup rewrites the markdown around the image as an explicit <img>.
+    await expect.poll(async () => getMarkdown(page), {
+        timeout: 5_000,
+        intervals: [50, 100, 250, 500],
+    }).toMatch(/<img\s[^>]*width="\d+"/i);
+
+    const saved = Number.parseInt((await getMarkdown(page)).match(/<img\s[^>]*width="(\d+)"/i)![1]);
+    const shown = await page.locator(editor.image).first().locator('img').first()
+        .evaluate(el => Math.round(el.getBoundingClientRect().width));
+
+    return { saved, shown };
+}
+
+test.describe('ImageResizeBar handle tracking (#5392)', () => {
+    test('dragging the left handle outwards widens by the distance dragged', async ({ page }) => {
+        const { startWidth } = await showHandles(page);
+
+        const { saved, shown } = await dragHandle(page, 'left', -DRAG);
+
+        expect(Math.abs(saved - (startWidth + DRAG))).toBeLessThanOrEqual(TOLERANCE);
+        // The width written to the file is the width on screen — the runaway
+        // used to save 710 for an image displayed at the 650 px column width.
+        expect(Math.abs(shown - saved)).toBeLessThanOrEqual(TOLERANCE);
+    });
+
+    test('dragging the left handle inwards narrows by the distance dragged', async ({ page }) => {
+        const { startWidth } = await showHandles(page);
+
+        const { saved } = await dragHandle(page, 'left', DRAG);
+
+        expect(Math.abs(saved - (startWidth - DRAG))).toBeLessThanOrEqual(TOLERANCE);
+    });
+
+    test('dragging the right handle outwards widens by the distance dragged', async ({ page }) => {
+        const { startWidth } = await showHandles(page);
+
+        const { saved } = await dragHandle(page, 'right', DRAG);
+
+        expect(Math.abs(saved - (startWidth + DRAG))).toBeLessThanOrEqual(TOLERANCE);
+    });
+});
@@ -88,19 +88,24 @@ function contentBar(): HTMLElement {
     return bar;
 }
 
-// happy-dom's MouseEvent has no `x`, and `_mouseMove` ignores events without it.
-function mouseMove(clientX: number): MouseEvent {
-    const event = new MouseEvent('mousemove', { bubbles: true, clientX });
+// happy-dom's MouseEvent has no `x`, which is how the bar recognises a mouse
+// event; real browsers always set it, on mousedown as much as on mousemove.
+function mouseEvent(type: string, clientX: number): MouseEvent {
+    const event = new MouseEvent(type, { bubbles: true, clientX });
     Object.defineProperty(event, 'x', { value: clientX });
     return event;
 }
 
+function mouseMove(clientX: number): MouseEvent {
+    return mouseEvent('mousemove', clientX);
+}
+
 // happy-dom rethrows listener errors from dispatchEvent; collect them per
 // step so a throwing mousemove still lets the mouseup run.
 function dragFrom(target: HTMLElement, clientX = 40): unknown[] {
     const listenerErrors: unknown[] = [];
     const steps: Array<[EventTarget, Event]> = [
-        [target, new MouseEvent('mousedown', { bubbles: true })],
+        [target, mouseEvent('mousedown', 0)],
         [document.body, mouseMove(clientX)],
         [document.body, new MouseEvent('mouseup', { bubbles: true })],
     ];
@@ -202,8 +207,9 @@ describe('image resize bar and document content with class "bar" (#5116)', () =>
         const errors = dragFrom(document.querySelector<HTMLElement>('.mu-transformer .bar.right')!, 200);
 
         expect(errors).toEqual([]);
-        // happy-dom has no layout, so the left handle sits at x 0: 200 - 0 - CIRCLE_RADIO.
-        expect(block.updateImage).toHaveBeenCalledWith(imageInfo, 'width', '195');
+        // The width grows by the pointer's travel since mousedown. happy-dom
+        // has no layout, so the image starts at width 0 and the press at x 0.
+        expect(block.updateImage).toHaveBeenCalledWith(imageInfo, 'width', '200');
     });
 });
 
@@ -216,7 +222,7 @@ describe('image resize bar and document content with class "bar" (#5116)', () =>
 function dragOutsideWindow(handle: HTMLElement, clientX: number): unknown[] {
     const listenerErrors: unknown[] = [];
     const steps: Array<[EventTarget, Event]> = [
-        [handle, new MouseEvent('mousedown', { bubbles: true })],
+        [handle, mouseEvent('mousedown', 0)],
         [document.body, mouseMove(clientX / 2)],
         [document.documentElement, mouseMove(clientX)],
         [document.documentElement, new MouseEvent('mouseup', { bubbles: true })],
@@ -250,8 +256,8 @@ describe('image resize released outside the window (#5393)', () => {
         );
 
         expect(errors).toEqual([]);
-        expect(block.updateImage).toHaveBeenCalledWith(imageInfo, 'width', '195');
-        expect(reference.querySelector('img')!.getAttribute('width')).toBe('195');
+        expect(block.updateImage).toHaveBeenCalledWith(imageInfo, 'width', '200');
+        expect(reference.querySelector('img')!.getAttribute('width')).toBe('200');
     });
 
     it('leaves no drag listeners behind', () => {
 
@@ -24,6 +24,10 @@ export class ImageResizeBar {
     private _movingAnchor: string | null = null;
     private _status: boolean = false;
     private _width: number | null = null;
+    // Pointer position and image width as of mousedown. Writing a width moves
+    // the image's own edges, so live geometry is not a usable reference while
+    // dragging — only this snapshot is (#5392).
+    private _dragStart: { clientX: number; width: number } | null = null;
     private _eventId: string[] = [];
     private _lastScrollTop: number | null = null;
     private _resizing: boolean = false;
@@ -138,6 +142,10 @@ export class ImageResizeBar {
 
         const { eventCenter } = this.muya;
         this._movingAnchor = handle.getAttribute('data-position');
+        const image = this._reference?.querySelector('img');
+        this._dragStart = isMouseEvent(event) && image
+            ? { clientX: event.clientX, width: image.getBoundingClientRect().width }
+            : null;
         // A pointer dragged past the window's edge keeps driving the resize,
         // but those out-of-viewport coordinates hit test to `<html>`, whose
         // bubble path skips `<body>`. Listening on the document keeps the
@@ -165,27 +173,21 @@ export class ImageResizeBar {
 
         event.preventDefault();
         const { clientX } = event;
+        const dragStart = this._dragStart;
         let width: number;
-        let relativeAnchor: HTMLDivElement;
         const image = this._reference!.querySelector('img');
-        if (!image)
+        if (!image || !dragStart)
             return;
 
+        // Each handle moves the edge it sits on, so the image grows by however
+        // far the pointer has travelled away from where it was grabbed.
         switch (this._movingAnchor) {
             case 'left':
-                relativeAnchor = this._container.querySelector('.right')!;
-                width = Math.max(
-                    relativeAnchor.getBoundingClientRect().left + CIRCLE_RADIO - clientX,
-                    50,
-                );
+                width = Math.max(dragStart.width + dragStart.clientX - clientX, 50);
                 break;
 
             case 'right':
-                relativeAnchor = this._container.querySelector('.left')!;
-                width = Math.max(
-                    clientX - relativeAnchor.getBoundingClientRect().left - CIRCLE_RADIO,
-                    50,
-                );
+                width = Math.max(dragStart.width + clientX - dragStart.clientX, 50);
                 break;
 
             default:
@@ -208,6 +210,7 @@ export class ImageResizeBar {
         }
 
         this._width = null;
+        this._dragStart = null;
         this._resizing = false;
         this._movingAnchor = null;
     };
@@ -226,6 +229,7 @@ export class ImageResizeBar {
         this._cleanup = null;
         this._detachResizeListeners();
         this._width = null;
+        this._dragStart = null;
         this._resizing = false;
         this._movingAnchor = null;
         const circles = this._container.querySelectorAll('.bar');