diff --git a/CHANGES.md b/CHANGES.md index 2823c4a50d1..14b6564f1d5 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -16,6 +16,7 @@ New Features: * [#12448](http://dev.ckeditor.com/ticket/12448): Set of new methods, params and events giving the developer more control over HTML insertion. See the [`editable.insertHtml()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtml) param `range`, the [`editable.insertHtmlIntoRange()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtmlIntoRange) method and the [`editor.afterInsertHtml`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterInsertHtml) event. * [#12036](http://dev.ckeditor.com/ticket/12036): Initialize editor in [`readOnly`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) mode when `
// if ( hasCaption ) { - wrapper.addClass( alignClasses[1] ); + wrapper.addClass( alignClasses[ 1 ] ); } } else if ( align != 'none' ) { wrapper.addClass( alignClasses[ alignmentsObj[ align ] ] ); @@ -871,7 +871,7 @@ // Upcast linked image like . } else if ( isLinkedOrStandaloneImage( el ) ) { - image = el.name == 'a' ? el.children[0] : el; + image = el.name == 'a' ? el.children[ 0 ] : el; } if ( !image ) @@ -1536,6 +1536,14 @@ */ CKEDITOR.config.image2_captionedClass = 'image'; +/** + * Determine whether dimensions inputs should be automatically filled when image src changes in image2 dialog. + * + * @since 4.5.0 + * @cfg {Boolean} [image2_prefillDimensions=true] + * @member CKEDITOR.config + */ + /** * CSS classes applied to aligned images. Useful to take control over the way * the images are aligned, i.e. to customize output HTML and integrate external stylesheets. diff --git a/tests/_benderjs/ckeditor/static/tools.js b/tests/_benderjs/ckeditor/static/tools.js index cfbc7cea71d..572ddf87c6a 100644 --- a/tests/_benderjs/ckeditor/static/tools.js +++ b/tests/_benderjs/ckeditor/static/tools.js @@ -990,8 +990,37 @@ } return outputTests; - } + }, + + /** + * Downloads image and call callback after that. + * + * @param {String} src Image source. + * @param {Function} callback Callback function with image (CKEDITOR.dom.element) + * or `null` in case of error or abort. + */ + downloadImage: function( src, callback ) { + var img = new CKEDITOR.dom.element( 'img' ); + + img.once( 'load', function() { + // Because this function may be used to wait until editor download image, the callback in + // this test helper must be called later then editors. + setTimeout( function() { + callback( img ); + }, 10 ); + } ); + + img.once( 'error', function() { + callback( null ); + } ); + img.once( 'abort', function() { + callback( null ); + } ); + + // Add random string to be sure that the image will be downloaded, not taken from cache. + img.setAttribute( 'src', src + '?' + Math.random().toString( 16 ).substring( 2 ) ); + } }; bender.tools.range = { diff --git a/tests/plugins/image/image.js b/tests/plugins/image/image.js index 8a8c3b99441..e48ccb9e4f9 100644 --- a/tests/plugins/image/image.js +++ b/tests/plugins/image/image.js @@ -10,7 +10,12 @@ } }; - var SRC = '%BASE_PATH%_assets/logo.png'; + var SRC = '%BASE_PATH%_assets/logo.png', + imgs = [ + { url: '%BASE_PATH%_assets/logo.png', width: '163', height: '61' }, + { url: '%BASE_PATH%_assets/large.jpg', width: '1008', height: '550' } + ], + downloadImage = bender.tools.downloadImage; bender.test( { 'test read image (inline styles)': function() { @@ -348,6 +353,103 @@ } ); }, + /** + * #12126 + * + * 1. Open image dialog. + * 2. Set some proper image url and focus out. + * 3. Dimensions inputs should be empty. + * 4. Set another proper image url and focus out. + * 5. Again dimensions inputs should be empty. + */ + 'test dimensions not set automatically when disbled in option': function() { + bender.editorBot.create( { + name: 'editor_disabled_autodimensions', + creator: 'inline', + config: { + image_prefillDimensions: false + } + }, + function( bot ) { + bot.dialog( 'image', function( dialog ) { + var i = 0, + heightInput = dialog.getContentElement( 'info', 'txtHeight' ), + widthInput = dialog.getContentElement( 'info', 'txtWidth' ); + + dialog.setValueOf( 'info', 'txtUrl', imgs[ i ].url ); + downloadImage( imgs[ i ].url, onDownload ); + + function onDownload() { + resume( onResume ); + } + + function onResume() { + dialog.getContentElement( 'info', 'txtHeight' ).getValue(); + assert.areSame( '', widthInput.getValue() ); + assert.areSame( '', heightInput.getValue() ); + + if ( i === 0 ) { + dialog.setValueOf( 'info', 'txtUrl', imgs[ ++i ].url ); + downloadImage( imgs[ i ].url, onDownload ); + wait(); + } + } + + wait(); + } ); + } ); + }, + + /** + * #12126 + * + * 1. Open image dialog. + * 2. Set some proper image url and focus out. + * 3. Click button "Reset Size". + * 4. Set some proper image url and focus out. + * 5. Dimensions inputs should be empty. + */ + 'test dimension should be empty after resetting size and loading image': function() { + bender.editorBot.create( { + name: 'editor_disabled_autodimensions2', + creator: 'inline', + config: { + image_prefillDimensions: false + } + }, + function( bot ) { + bot.dialog( 'image', function( dialog ) { + var i = 0, + resetBtn = bot.editor.document.getById( dialog.getContentElement( 'info', 'ratioLock' ).domId ).find( '.cke_btn_reset' ).getItem( 0 ); + + dialog.setValueOf( 'info', 'txtUrl', imgs[ i ].url ); + downloadImage( imgs[ i ].url, onDownload ); + + function onDownload() { + resume( onResume ); + } + + function onResume() { + resetBtn.fire( 'click' ); + assert.areSame( imgs[ i ].width, dialog.getContentElement( 'info', 'txtWidth' ).getValue() ); + assert.areSame( imgs[ i ].height, dialog.getContentElement( 'info', 'txtHeight' ).getValue() ); + + dialog.setValueOf( 'info', 'txtUrl', imgs[ ++i ].url ); + downloadImage( imgs[ i ].url, function() { + resume( function() { + assert.areSame( '', dialog.getContentElement( 'info', 'txtWidth' ).getValue() ); + assert.areSame( '', dialog.getContentElement( 'info', 'txtHeight' ).getValue() ); + } ); + } ); + + wait(); + } + + wait(); + } ); + } ); + }, + // This TC verifies also the above test's correctness. 'test width and height are automatically set': function() { var bot = this.editorBot, @@ -374,19 +476,5 @@ } ); } } ); - - function downloadImage( src, cb ) { - var img = new CKEDITOR.dom.element( 'img' ); - - img.once( 'load', onDone ); - img.once( 'error', onDone ); - - function onDone() { - setTimeout( cb, 0 ); - } - - img.setAttribute( 'src', src ); - } - } )(); //]]> \ No newline at end of file diff --git a/tests/plugins/image/manual/emptydimensions.html b/tests/plugins/image/manual/emptydimensions.html new file mode 100644 index 00000000000..7c83a93df57 --- /dev/null +++ b/tests/plugins/image/manual/emptydimensions.html @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/tests/plugins/image/manual/emptydimensions.md b/tests/plugins/image/manual/emptydimensions.md new file mode 100644 index 00000000000..ccddc7977be --- /dev/null +++ b/tests/plugins/image/manual/emptydimensions.md @@ -0,0 +1,19 @@ +@bender-tags: 4.5.0, tc +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, floatingspace, image + +**Please note**: You can use such link: `http://lorempixel.com/200/100`. + +1. Open image dialog. +2. Set some proper image url and focus out. + * **Expected result**: Dimensions inputs should be empty. +3. Set another proper image url and focus out. + * **Expected result**: Again - dimensions inputs should be empty. + +---- + +1. Open image dialog. +2. Set some proper image url and focus out. +3. Click button "Reset Size". +4. Set some proper image url and focus out. + * **Expected result**: Dimensions inputs should be empty. \ No newline at end of file diff --git a/tests/plugins/image2/editing.js b/tests/plugins/image2/editing.js index d312e631b30..07d56d08958 100644 --- a/tests/plugins/image2/editing.js +++ b/tests/plugins/image2/editing.js @@ -20,7 +20,12 @@ ''; + '', + imgs = [ + { url: '%BASE_PATH%_assets/logo.png', width: '163', height: '61' }, + { url: '%BASE_PATH%_assets/large.jpg', width: '1008', height: '550' } + ], + downloadImage = bender.tools.downloadImage; function assertDialogFields( dialog, data ) { for ( var i in data ) @@ -106,6 +111,107 @@ }; assertWidgetDialog( editorBot, 'image', '', null, null, 'foo^bar
', onResume ); + }, + + /** + * #12126 + * + * 1. Open image2 dialog. + * 2. Set some proper image url and focus out. + * 3. Dimensions inputs should be empty. + * 4. Set another proper image url and focus out. + * 5. Again dimensions inputs should be empty. + */ + 'test dimensions not set automatically when disabled in option': function() { + bender.editorBot.create( { + name: 'editor_disabled_autodimensions', + creator: 'inline', + config: { + extraPlugins: 'image2', + image2_prefillDimensions: false + } + }, + function( bot ) { + bot.dialog( 'image', function( dialog ) { + var i = 0, + heightInput = dialog.getContentElement( 'info', 'height' ), + widthInput = dialog.getContentElement( 'info', 'width' ); + + dialog.setValueOf( 'info', 'src', imgs[ i ].url ); + downloadImage( imgs[ i ].url, onDownload ); + + function onDownload() { + resume( onResume ); + } + + function onResume() { + dialog.getContentElement( 'info', 'height' ).getValue(); + assert.areSame( '', widthInput.getValue() ); + assert.areSame( '', heightInput.getValue() ); + + if ( i === 0 ) { + dialog.setValueOf( 'info', 'src', imgs[ ++i ].url ); + downloadImage( imgs[ i ].url, onDownload ); + wait(); + } else { + dialog.hide(); + } + } + + wait(); + } ); + } ); + }, + + /** + * #12126 + * + * 1. Open image2 dialog. + * 2. Set some proper image url and focus out. + * 3. Click button "Reset Size". + * 4. Set some proper image url and focus out. + * 5. Dimensions inputs should be empty. + */ + 'test dimension should be empty after resetting size and loading image': function() { + bender.editorBot.create( { + name: 'editor_disabled_autodimensions2', + creator: 'inline', + config: { + extraPlugins: 'image2', + image2_prefillDimensions: false + } + }, + function( bot ) { + bot.dialog( 'image', function( dialog ) { + var i = 0, + resetBtn = bot.editor.document.getById( dialog.getContentElement( 'info', 'lock' ).domId ).find( '.cke_btn_reset' ).getItem( 0 ); + + dialog.setValueOf( 'info', 'src', imgs[ i ].url ); + downloadImage( imgs[ i ].url, onDownload ); + + function onDownload() { + resume( onResume ); + } + + function onResume() { + resetBtn.fire( 'click' ); + assert.areSame( imgs[ i ].width, dialog.getContentElement( 'info', 'width' ).getValue() ); + assert.areSame( imgs[ i ].height, dialog.getContentElement( 'info', 'height' ).getValue() ); + + dialog.setValueOf( 'info', 'src', imgs[ ++i ].url ); + downloadImage( imgs[ i ].url, function() { + resume( function() { + assert.areSame( '', dialog.getContentElement( 'info', 'width' ).getValue() ); + assert.areSame( '', dialog.getContentElement( 'info', 'height' ).getValue() ); + } ); + } ); + + wait(); + } + + wait(); + } ); + } ); } } ); } )(); \ No newline at end of file diff --git a/tests/plugins/image2/manual/emptydimensions.html b/tests/plugins/image2/manual/emptydimensions.html new file mode 100644 index 00000000000..e9344fa8dc1 --- /dev/null +++ b/tests/plugins/image2/manual/emptydimensions.html @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/tests/plugins/image2/manual/emptydimensions.md b/tests/plugins/image2/manual/emptydimensions.md new file mode 100644 index 00000000000..2e42b3666f6 --- /dev/null +++ b/tests/plugins/image2/manual/emptydimensions.md @@ -0,0 +1,19 @@ +@bender-tags: 4.5.0, tc +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, floatingspace, image2 + +**Please note**: You can use such link: `http://lorempixel.com/200/100`. + +1. Open image dialog. +2. Set some proper image url and focus out. + * **Expected result**: Dimensions inputs should be empty. +3. Set another proper image url and focus out. + * **Expected result**: Again - dimensions inputs should be empty. + +---- + +1. Open image dialog. +2. Set some proper image url and focus out. +3. Click button "Reset Size". +4. Set some proper image url and focus out. + * **Expected result**: Dimensions inputs should be empty. \ No newline at end of file