Merge 1838622 into f1e36bc

tests/imageresize.js

@@ -26,7 +26,11 @@ describe( 'ImageResize', () => {
 	const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
 		'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
 
-	let absoluteContainer, widget, editor, view, viewDocument, editorElement;
+	const CONFIG_RESIZE_IN_PERCENTS = {
+		plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
+	};
+
+	let absoluteContainer, widget, editor, view, viewDocument, editorElement, customConfig;
 
 	before( () => {
 		// This container is required to position editor element in a reliable element.
@@ -50,7 +54,7 @@ describe( 'ImageResize', () => {
 		absoluteContainer.appendChild( editorElement );
 
 		return ClassicEditor
-			.create( editorElement, {
+			.create( editorElement, customConfig || {
 				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
 				image: {
 					resizeUnit: 'px'
@@ -202,7 +206,6 @@ describe( 'ImageResize', () => {
 			} );
 
 			it( 'is shown when image is focused', () => {
-				const widget = viewDocument.getRoot().getChild( 1 );
 				const allResizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' );
 				const domEventDataMock = {
 					target: widget,
@@ -435,6 +438,80 @@ describe( 'ImageResize', () => {
 		}
 	} );
 
+	describe( 'percent resizing', () => {
+		before( () => {
+			customConfig = CONFIG_RESIZE_IN_PERCENTS;
+		} );
+
+		after( () => {
+			customConfig = null;
+		} );
+
+		describe( 'standard image', () => {
+			beforeEach( () => {
+				setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
+
+				widget = viewDocument.getRoot().getChild( 1 );
+			} );
+
+			it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
+				expectedWidth: 16,
+				modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
+				pointerOffset: {
+					x: 10,
+					y: -10
+				},
+				resizerPosition: 'bottom-left'
+			} ) );
+
+			it( 'enlarges correctly with right-bottom handler', generateResizeTest( {
+				expectedWidth: 22,
+				modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
+				pointerOffset: {
+					x: 0,
+					y: 5
+				},
+				resizerPosition: 'bottom-right'
+			} ) );
+
+			it( 'enlarges correctly an image with unsupported width unit', async () => {
+				setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }" width="50pt"></image>]` );
+
+				widget = viewDocument.getRoot().getChild( 1 );
+
+				await generateResizeTest( {
+					expectedWidth: 15,
+					modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
+					pointerOffset: {
+						x: 0,
+						y: 5
+					},
+					resizerPosition: 'bottom-right'
+				} )();
+			} );
+		} );
+
+		describe( 'side image', () => {
+			beforeEach( () => {
+				setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
+
+				view = editor.editing.view;
+				viewDocument = view.document;
+				widget = viewDocument.getRoot().getChild( 1 );
+			} );
+
+			it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
+				expectedWidth: 18,
+				modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
+				pointerOffset: {
+					x: 10,
+					y: -10
+				},
+				resizerPosition: 'bottom-left'
+			} ) );
+		} );
+	} );
+
 	describe( 'undo integration', () => {
 		beforeEach( () => {
 			setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );