Image jumps when resizing in container that has padding

packages/ckeditor5-image/src/imageresize/imageresizehandles.ts

@@ -101,8 +101,7 @@ export default class ImageResizeHandles extends Plugin {
 						return domWidgetElement.querySelector( 'img' )!;
 					},
 					getResizeHost() {
-						// Return the model image element parent to avoid setting an inline element (<a>/<span>) as a resize host.
-						return domConverter.mapViewToDom( mapper.toViewElement( imageModel.parent as Element )! ) as HTMLElement;
+						return domConverter.mapViewToDom( mapper.toViewElement( imageModel as Element )! ) as HTMLElement;
 					},
 
 					isCentered() {

packages/ckeditor5-image/tests/imageresize/imageresizehandles.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global document */
+/* global document, window */
 
 // ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
@@ -995,7 +995,7 @@ describe( 'ImageResizeHandles', () => {
 				attachToSpy.restore();
 			} );
 
-			it( 'should set the paragraph as the resize host for an image wrapped with a link', async () => {
+			it( 'should set non-inline element as the resize host for an image wrapped with a link', async () => {
 				await setModelAndWaitForImages( editor,
 					'<paragraph>' +
 						`[<imageInline linkHref="http://ckeditor.com" src="${ IMAGE_SRC_FIXTURE }" alt="alt text"></imageInline>]` +
@@ -1004,7 +1004,7 @@ describe( 'ImageResizeHandles', () => {
 
 				const resizer = Array.from( editor.plugins.get( 'WidgetResize' )._resizers.values() )[ 0 ];
 
-				expect( resizer._getResizeHost().nodeName ).to.equal( 'P' );
+				expect( window.getComputedStyle( resizer._getResizeHost() ).display ).not.to.equal( 'inline' );
 			} );
 		} );
 
@@ -1039,7 +1039,7 @@ describe( 'ImageResizeHandles', () => {
 		} );
 
 		describe( 'to-do list integration', () => {
-			it( 'should set the list item as the resize host if an image is inside a to-do list', async () => {
+			it( 'should set non-inline as the resize host if an image is inside a to-do list', async () => {
 				editor = await createEditor( {
 					plugins: [ Image, ImageResizeEditing, ImageResizeHandles, LegacyTodoList, Paragraph ]
 				} );
@@ -1052,7 +1052,7 @@ describe( 'ImageResizeHandles', () => {
 
 				const resizer = Array.from( editor.plugins.get( 'WidgetResize' )._resizers.values() )[ 0 ];
 
-				expect( resizer._getResizeHost().nodeName ).to.equal( 'LI' );
+				expect( window.getComputedStyle( resizer._getResizeHost() ).display ).not.to.equal( 'inline' );
 
 				await editor.destroy();
 			} );

packages/ckeditor5-image/tests/imageresize/utils/getselectedimagepossibleresizerange.js

@@ -91,7 +91,13 @@ describe( 'getSelectedImagePossibleResizeRange', () => {
 		} );
 
 		editor.editing.view.change( writer => {
-			writer.setStyle( 'width', '500px', editor.editing.view.document.getRoot() );
+			writer.setStyle(
+				{
+					width: '500px',
+					padding: '0px'
+				},
+				editor.editing.view.document.getRoot()
+			);
 		} );
 
 		model = editor.model;

packages/ckeditor5-image/tests/imageresize/utils/getselectedimagewidthinunits.js

@@ -59,17 +59,16 @@ describe( 'getSelectedImageWidthInUnits', () => {
 		const { unit, value } = getSelectedImageWidthInUnits( editor, 'px' );
 
 		expect( unit ).to.be.equal( 'px' );
-		expect( value ).to.be.greaterThan( 400 );
+		expect( value ).to.be.equal( 310 );
 	} );
 
 	it( 'should return casted pixels value to percentage', () => {
-		setData( model, `[<imageBlock src="${ IMAGE_SRC_FIXTURE }" resizedWidth="380px"></imageBlock>]` );
+		setData( model, `[<imageBlock src="${ IMAGE_SRC_FIXTURE }" resizedWidth="250px"></imageBlock>]` );
 
 		const { unit, value } = getSelectedImageWidthInUnits( editor, '%' );
 
 		expect( unit ).to.be.equal( '%' );
-		expect( value ).to.be.greaterThan( 30 );
-		expect( value ).to.be.lessThan( 40 );
+		expect( value ).to.be.equal( 50 );
 	} );
 
 	async function createEditor( config ) {
@@ -80,6 +79,16 @@ describe( 'getSelectedImageWidthInUnits', () => {
 			}
 		} );
 
+		editor.editing.view.change( writer => {
+			writer.setStyle(
+				{
+					width: '500px',
+					padding: '0px'
+				},
+				editor.editing.view.document.getRoot()
+			);
+		} );
+
 		model = editor.model;
 		return editor;
 	}

packages/ckeditor5-widget/src/utils.ts

@@ -453,20 +453,26 @@ function addSelectionHandle( widgetElement: ViewContainerElement, writer: Downca
  * Starting from a DOM resize host element (an element that receives dimensions as a result of resizing),
  * this helper returns the width of the found ancestor element.
  *
- * **Note**: This helper searches up to 5 levels of ancestors only.
+ *	* It searches up to 5 levels of ancestors only.
  *
  * @param domResizeHost Resize host DOM element that receives dimensions as a result of resizing.
  * @returns Width of ancestor element in pixels or 0 if no ancestor with a computed width has been found.
  */
 export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ): number {
+	const getElementComputedWidth = ( element: HTMLElement ) => {
+		const { width, paddingLeft, paddingRight } = element.ownerDocument.defaultView!.getComputedStyle( element! );
+
+		return parseFloat( width ) - ( parseFloat( paddingLeft ) || 0 ) - ( parseFloat( paddingRight ) || 0 );
+	};
+
 	const domResizeHostParent = domResizeHost.parentElement;
 
 	if ( !domResizeHostParent ) {
 		return 0;
 	}
 
 	// Need to use computed style as it properly excludes parent's paddings from the returned value.
-	let parentWidth = parseFloat( domResizeHostParent!.ownerDocument.defaultView!.getComputedStyle( domResizeHostParent! ).width );
+	let parentWidth = getElementComputedWidth( domResizeHostParent! );
 
 	// Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree
 	// and try to get width from next ancestor.
@@ -483,9 +489,7 @@ export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ):
 			return 0;
 		}
 
-		parentWidth = parseFloat(
-				domResizeHostParent!.ownerDocument.defaultView!.getComputedStyle( checkedElement ).width
-		);
+		parentWidth = getElementComputedWidth( checkedElement );
 	}
 
 	return parentWidth;