Image jumps when resizing in container that has padding

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,13 @@ 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,36 @@ 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.
+ *	* It will skip search if passed element (or it's parent) has `contenteditable` attribute or is root document editable.
+ *	  It's crucial for features such like pagination because editable root element might have different width than whole editor itself.
  *
  * @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 );
+	};
+
+	if ( isMaximumResizeHostAncestorElement( domResizeHost ) ) {
+		return getElementComputedWidth( domResizeHost );
+	}
+
 	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! );
+
+	if ( isMaximumResizeHostAncestorElement( domResizeHostParent ) ) {
+		return parentWidth;
+	}
 
 	// 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,14 +499,23 @@ export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ):
 			return 0;
 		}
 
-		parentWidth = parseFloat(
-				domResizeHostParent!.ownerDocument.defaultView!.getComputedStyle( checkedElement ).width
-		);
+		parentWidth = getElementComputedWidth( checkedElement );
+
+		if ( isMaximumResizeHostAncestorElement( checkedElement ) ) {
+			break;
+		}
 	}
 
 	return parentWidth;
 }
 
+/**
+ * Checks if passed HTML has `contenteditable` attribute.
+ */
+function isMaximumResizeHostAncestorElement( element: HTMLElement ) {
+	return element.getAttribute( 'contenteditable' ) === 'true' || element.classList.contains( 'ck-editor__editable' );
+}
+
 /**
  * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
  *

packages/ckeditor5-widget/tests/utils.js

@@ -741,6 +741,49 @@ describe( 'widget utils', () => {
 
 	describe( 'Calculate resize host ancestor width utils', () => {
 		describe( 'calculateResizeHostAncestorWidth()', () => {
+			it( 'should return passed element width with excluded padding if it\'s resize root element', () => {
+				const editable = editorEditableTag();
+				document.body.appendChild( editable );
+
+				const width = calculateResizeHostAncestorWidth( editable );
+				expect( width ).to.be.equal( 560 );
+
+				editable.remove();
+			} );
+
+			it( 'should pick editable grandparent width if current element is not editable', () => {
+				const editable = editorEditableTag( {}, [
+					tag( 'div' )
+				] );
+
+				document.body.appendChild( editable );
+
+				const width = calculateResizeHostAncestorWidth( editable.firstChild );
+				expect( width ).to.be.equal( 560 );
+
+				editable.remove();
+			} );
+
+			it( 'should break lookup on nearest editable element (excluding grandparent)', () => {
+				const child = document.createElement( 'div' );
+				const editable = editorEditableTag( { width: '100px' }, [
+					editorEditableTag( { width: '800px' }, [
+						tag( 'span', {}, [
+							tag( 'span', {}, [
+								child
+							] )
+						] )
+					] )
+				] );
+
+				document.body.appendChild( editable );
+
+				const width = calculateResizeHostAncestorWidth( child );
+				expect( width ).to.be.equal( 760 );
+
+				editable.remove();
+			} );
+
 			it( 'should get size from parent of passed element', () => {
 				const domResizeHost = tag( 'div' );
 				const tree = tag( 'div', sizeAttributes( 200 ), [
@@ -862,6 +905,19 @@ describe( 'widget utils', () => {
 			} );
 		} );
 
+		function editorEditableTag( style = {}, children = [] ) {
+			const element = tag( 'div', { contenteditable: 'true' }, children );
+
+			element.classList.add( 'ck-editor__editable' );
+			Object.assign( element.style, {
+				padding: '0 20px',
+				width: '600px',
+				...style
+			} );
+
+			return element;
+		}
+
 		function tag( name, attributes = {}, children = [] ) {
 			const element = document.createElement( name );