Fix autogrow width issue

CHANGES.md

@@ -6,6 +6,7 @@ CKEditor 4 Changelog
 Fixed Issues:
 
 * [#4253](https://github.com/ckeditor/ckeditor4/issues/4253): Fixed: [Editor Placeholder](https://ckeditor.com/cke4/addon/editorplaceholder) plugin throws an error during editor initialization with [fullpage](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-fullPage) enabled when there is no `body` tag in editor content.
+* [#4372](https://github.com/ckeditor/ckeditor4/issues/4372): Fixed: [Autogrow](https://ckeditor.com/cke4/addon/autogrow) plugin changes editor's width when used with absolute [`config.width`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-width) value.
 
 ## CKEditor 4.15.1
 

plugins/autogrow/plugin.js

@@ -147,7 +147,12 @@
 			// to the one set by previous resizeEditor() call.
 			if ( newHeight != currentHeight && lastHeight != newHeight ) {
 				newHeight = editor.fire( 'autoGrow', { currentHeight: currentHeight, newHeight: newHeight } ).newHeight;
-				editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
+
+				var boxSizingType = editor.container.getComputedStyle( 'box-sizing' ),
+					isBorderBox = boxSizingType === 'border-box',
+					width = editor.container.getSize( 'width', isBorderBox );
+
+				editor.resize( width, newHeight, true );
 				lastHeight = newHeight;
 			}
 

tests/plugins/autogrow/_helpers/tools.js

@@ -19,8 +19,38 @@ var autogrowTools = ( function() {
 		return html;
 	}
 
+	function testEditorSizeWithContent( editorWidth ) {
+		bender.editorBot.create( {
+			name: 'editor_' + new Date().getTime(),
+			config: {
+				width: editorWidth
+			}
+		}, function( bot ) {
+			var paragraphsCount = 10;
+
+			bot.setData( autogrowTools.getTestContent( paragraphsCount ), function() {
+				var editor = bot.editor,
+					initialEditorSize = autogrowTools.getEditorSize( editor );
+
+				editor.once( 'afterCommandExec', function() {
+					resume( function name() {
+						var editorSize = autogrowTools.getEditorSize( editor );
+
+						assert.isTrue( editorSize.height > initialEditorSize.height, 'Editor height should increase' );
+						assert.areEqual( editorSize.width, initialEditorSize.width, 'Editor width should not change' );
+					} );
+				} );
+
+				editor.execCommand( 'autogrow' );
+
+				wait();
+			} );
+		} );
+	}
+
 	return {
 		getTestContent: getTestContent,
-		getEditorSize: getEditorSize
+		getEditorSize: getEditorSize,
+		testEditorSizeWithContent: testEditorSizeWithContent
 	};
 } )();

tests/plugins/autogrow/autogrow.js

@@ -9,12 +9,37 @@
 	bender.editor = {};
 
 	bender.test( {
-		// (#4286)
-		'test autogrow': function() {
+		setUp: function() {
 			if ( bender.env.ie && bender.env.version < 9 ) {
 				assert.ignore();
 			}
-
+		},
+		// (#4372)
+		'test autogrow for editor width 200%': function() {
+			autogrowTools.testEditorSizeWithContent( '200%' );
+		},
+		// (#4372)
+		'test autogrow for editor width 20em': function() {
+			autogrowTools.testEditorSizeWithContent( '20em' );
+		},
+		// (#4372)
+		'test autogrow for editor width 200px': function() {
+			autogrowTools.testEditorSizeWithContent( '200px' );
+		},
+		// (#4372)
+		'test autogrow for editor width 200': function() {
+			autogrowTools.testEditorSizeWithContent( 200 );
+		},
+		// (#4372)
+		'test autogrow for editor width 0': function() {
+			autogrowTools.testEditorSizeWithContent( 0 );
+		},
+		// (#4372)
+		'test autogrow for editor width auto': function() {
+			autogrowTools.testEditorSizeWithContent( 'auto' );
+		},
+		// (#4286)
+		'test autogrow': function() {
 			var editor = this.editor,
 				bot = this.editorBot,
 				initialEditorSize = autogrowTools.getEditorSize( editor );

tests/plugins/autogrow/manual/autogrowboxsize.html

@@ -0,0 +1,13 @@
+<div contenteditable="true" id="editor">
+	<p>1</p>
+	<p>2</p>
+	<p>3</p>
+	<p>4</p>
+	<p>5</p>
+</div>
+
+<script>
+	var editor = CKEDITOR.replace( 'editor', {
+		width: 300
+	} );
+</script>

tests/plugins/autogrow/manual/autogrowboxsize.md

@@ -0,0 +1,13 @@
+@bender-tags: 4.15.2, bug, 4372
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, autogrow, basicstyles, toolbar, resize
+
+
+1. Focus the editor.
+2. Press `enter` multiple times to force the editor to resize.
+
+## Expected
+Editor width is not changing during auto-resize.
+
+## Unexpected
+With each vertical resize editor is shrinking for about 2 pixels.