From adf139b79557e3dbb9231406185b8cd677cdacbc Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 12 Dec 2018 17:05:23 +0100 Subject: [PATCH 01/26] Tests: added manual test. --- tests/plugins/image2/manual/maxsize.html | 22 +++++++++++++++++ tests/plugins/image2/manual/maxsize.md | 31 ++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 tests/plugins/image2/manual/maxsize.html create mode 100644 tests/plugins/image2/manual/maxsize.md diff --git a/tests/plugins/image2/manual/maxsize.html b/tests/plugins/image2/manual/maxsize.html new file mode 100644 index 00000000000..1d4d038575a --- /dev/null +++ b/tests/plugins/image2/manual/maxsize.html @@ -0,0 +1,22 @@ +
+ +
+
+ +
+ + diff --git a/tests/plugins/image2/manual/maxsize.md b/tests/plugins/image2/manual/maxsize.md new file mode 100644 index 00000000000..35dd95ca50b --- /dev/null +++ b/tests/plugins/image2/manual/maxsize.md @@ -0,0 +1,31 @@ +@bender-tags: 4.12.0, feature +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea + +1. Use resize handler to shrink image to minimum size. + +1. Open dialog for this image. + + ## Expected: + + Dialog fields are populated with correct width/height. + + ## Unexpected: + + Dialog fields have wrong values. + +1. Close dialog. + +1. Use resize handler to increase image to maximum size. + +## Expected: + +- Images can't be resized beyond maximum values: + + - First editor: width/height: `350px` + + - Second editor: width/height: `image natural size`. This means image can't be bigger than it is at start. + +## Unexpected: + +- Images can be resized beyond maximum values. From bdfb76775bf64ef006a890905299276849a4a6fe Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 12 Dec 2018 17:06:10 +0100 Subject: [PATCH 02/26] Image2: added max size support for resize handler. --- plugins/image2/plugin.js | 42 ++++++++++++++++++++++++++++++++-------- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/plugins/image2/plugin.js b/plugins/image2/plugin.js index 2a5c685d35a..a504a21e925 100644 --- a/plugins/image2/plugin.js +++ b/plugins/image2/plugin.js @@ -1160,6 +1160,15 @@ resizer.on( 'mousedown', function( evt ) { var image = widget.parts.image, + // Don't update attributes if less than 15. + // This is to prevent images to visually disappear. + min = { + width: 15, + height: 15 + }, + + max = getMaxSize(), + // "factor" can be either 1 or -1. I.e.: For right-aligned images, we need to // subtract the difference to get proper width, etc. Without "factor", // resizer starts working the opposite way. @@ -1315,13 +1324,9 @@ } } - // Don't update attributes if less than 10. - // This is to prevent images to visually disappear. - if ( newWidth >= 15 && newHeight >= 15 ) { - image.setAttributes( { width: newWidth, height: newHeight } ); - updateData = true; - } else { - updateData = false; + if ( isAllowedSize() ) { + updateData = { width: newWidth, height: newHeight }; + image.setAttributes( updateData ); } } @@ -1338,7 +1343,7 @@ resizer.removeClass( 'cke_image_resizing' ); if ( updateData ) { - widget.setData( { width: newWidth, height: newHeight } ); + widget.setData( updateData ); // Save another undo snapshot: after resizing. editor.fire( 'saveSnapshot' ); @@ -1347,6 +1352,27 @@ // Don't update data twice or more. updateData = false; } + + function getMaxSize() { + var maxSize = editor.config.image2_maxSize, + natural; + + if ( !maxSize ) { + return null; + } + + maxSize = CKEDITOR.tools.copy( maxSize ); + natural = CKEDITOR.plugins.image2.getNatural( image ); + + maxSize.width = Math.max( maxSize.width === 'naturalWidth' ? natural.width : maxSize.width, min.width ); + maxSize.height = Math.max( maxSize.height === 'naturalHeight' ? natural.height : maxSize.height, min.width ); + + return maxSize; + } + + function isAllowedSize() { + return newWidth >= min.width && newWidth <= max.width && newHeight >= min.height && newHeight <= max.height; + } } ); // Change the position of the widget resizer when data changes. From 10e81e896a45bc1a4fcd647abb9c8ca8352fbfb3 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Thu, 13 Dec 2018 12:28:50 +0100 Subject: [PATCH 03/26] Tests: added unit test. --- tests/plugins/image2/resizehandler.js | 133 ++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 tests/plugins/image2/resizehandler.js diff --git a/tests/plugins/image2/resizehandler.js b/tests/plugins/image2/resizehandler.js new file mode 100644 index 00000000000..322c30709eb --- /dev/null +++ b/tests/plugins/image2/resizehandler.js @@ -0,0 +1,133 @@ +/* bender-tags: editor,widget */ +/* bender-ckeditor-plugins: image2,toolbar */ + +( function() { + 'use strict'; + + bender.editors = { + limitedSize: { + config: { + image2_maxSize: { + width: 350, + height: 350 + } + } + }, + naturalSize: { + config: { + image2_maxSize: { + width: 'naturalWidth', + height: 'naturalHeight' + } + } + } + }; + + var tests = { + //2672 + 'test resize close to minimum size': assertResize( { + data: { + screenX: 40, + screenY: 15 + }, + expected: { + width: 40, + height: 15 + } + } ), + + //2672 + 'test resize lower than minimum size': assertResize( { + data: { + screenX: 14, + screenY: 14 + }, + expected: { + width: null, + height: null + } + } ), + + //2048 + 'test resize close to maximum size': assertResize( { + limitedSize: { + data: { + screenX: 350, + screenY: 131 + }, + expected: { + width: 350, + height: 131 + } + }, + naturalSize: { + data: { + screenX: 163, + screenY: 61 + }, + expected: { + width: 163, + height: 61 + } + } + } ), + + //2048 + 'test resize above maximum size': assertResize( { + limitedSize: { + data: { + screenX: 351, + screenY: 132 + }, + expected: { + width: null, + height: null + } + }, + naturalSize: { + data: { + screenX: 165, + screenY: 65 + }, + expected: { + width: null, + height: null + } + } + } ) + }; + + bender.test( bender.tools.createTestsForEditors( CKEDITOR.tools.objectKeys( bender.editors ), tests ) ); + + function assertResize( options ) { + return function( editor, bot ) { + bot.setData( '', function() { + editor.widgets.instances[ editor.widgets._.nextId - 1 ].resizer.fire( 'mousedown', { + $: { + screenX: 163, + screenY: 61 + } + } ); + + var doc = CKEDITOR.document, + image = editor.editable().findOne( 'img' ), + data = options[ editor.name ] ? options[ editor.name ].data : options.data, + expected = options[ editor.name ] ? options[ editor.name ].expected : options.expected, + actual; + + doc.fire( 'mousemove', { + $: data + } ); + + doc.fire( 'mouseup' ); + + actual = { + width: image.getAttribute( 'width' ), + height: image.getAttribute( 'height' ) + }; + + assert.isTrue( CKEDITOR.tools.objectCompare( actual, expected ) ); + } ); + }; + } +} )(); From cbf531da6b28a194e58cdb56b8df9c6fe753390c Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 12:35:20 +0100 Subject: [PATCH 04/26] Fixed type error when maxSize is unset. --- plugins/image2/plugin.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/image2/plugin.js b/plugins/image2/plugin.js index a504a21e925..7b68ce72661 100644 --- a/plugins/image2/plugin.js +++ b/plugins/image2/plugin.js @@ -1371,7 +1371,9 @@ } function isAllowedSize() { - return newWidth >= min.width && newWidth <= max.width && newHeight >= min.height && newHeight <= max.height; + var isTooSmall = newWidth < min.width || newHeight < min.height, + isTooBig = max && ( ( max.width && newWidth > max.width ) || ( max.height && newHeight > max.height ) ); + return !isTooSmall && !isTooBig; } } ); From 73517bea12d0d299d9f7699978924904fa0a9e1a Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 12:35:32 +0100 Subject: [PATCH 05/26] Tests: added third editor to test. --- tests/plugins/image2/manual/maxsize.html | 5 +++++ tests/plugins/image2/manual/maxsize.md | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/tests/plugins/image2/manual/maxsize.html b/tests/plugins/image2/manual/maxsize.html index 1d4d038575a..19382433e59 100644 --- a/tests/plugins/image2/manual/maxsize.html +++ b/tests/plugins/image2/manual/maxsize.html @@ -4,6 +4,9 @@
+
+ +
diff --git a/tests/plugins/image2/manual/maxsize.md b/tests/plugins/image2/manual/maxsize.md index 35dd95ca50b..c2d7cd2d34a 100644 --- a/tests/plugins/image2/manual/maxsize.md +++ b/tests/plugins/image2/manual/maxsize.md @@ -1,4 +1,4 @@ -@bender-tags: 4.12.0, feature +@bender-tags: 4.12.0, feature, bug @bender-ui: collapsed @bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea From a6e6b7674e8a7bcaaf34de8a0416cf61750af8ef Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 12:43:40 +0100 Subject: [PATCH 06/26] Tests: updated manual test description. --- tests/plugins/image2/manual/maxsize.html | 15 +++++++++++++++ tests/plugins/image2/manual/maxsize.md | 20 ++++++++++---------- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/tests/plugins/image2/manual/maxsize.html b/tests/plugins/image2/manual/maxsize.html index 19382433e59..7899facd90b 100644 --- a/tests/plugins/image2/manual/maxsize.html +++ b/tests/plugins/image2/manual/maxsize.html @@ -1,9 +1,24 @@ +

Editor 1:

+

+ Max width: 350
+ Max height: 350 +

+

Editor 2:

+

+ Max width: 'naturalWidth'
+ Max height: 'naturalHeight' +

+

Editor 3:

+

+ Max width: unset
+ Max height: unset +

diff --git a/tests/plugins/image2/manual/maxsize.md b/tests/plugins/image2/manual/maxsize.md index c2d7cd2d34a..fc261d56635 100644 --- a/tests/plugins/image2/manual/maxsize.md +++ b/tests/plugins/image2/manual/maxsize.md @@ -2,30 +2,30 @@ @bender-ui: collapsed @bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea +# For first editor: + 1. Use resize handler to shrink image to minimum size. 1. Open dialog for this image. - ## Expected: +## Expected: - Dialog fields are populated with correct width/height. +Dialog fields are populated with correct width/height. - ## Unexpected: +## Unexpected: - Dialog fields have wrong values. +Dialog fields have wrong values. -1. Close dialog. +# For each editors 1. Use resize handler to increase image to maximum size. ## Expected: -- Images can't be resized beyond maximum values: - - - First editor: width/height: `350px` +- Editor 1, Editor 2: Images can't be resized beyond maximum values. - - Second editor: width/height: `image natural size`. This means image can't be bigger than it is at start. +- Editor 3: Image can be resized to any size. ## Unexpected: -- Images can be resized beyond maximum values. +- Editor 1, Editor 2: Images can be resized beyond maximum values. From 06b539cf9d06272f014bffa281caf2eaa994ea9f Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 13:12:38 +0100 Subject: [PATCH 07/26] Tests: fixed unstable test in Firefox. --- tests/plugins/image2/resizehandler.js | 62 ++++++++++++++++----------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/tests/plugins/image2/resizehandler.js b/tests/plugins/image2/resizehandler.js index 322c30709eb..5a950868247 100644 --- a/tests/plugins/image2/resizehandler.js +++ b/tests/plugins/image2/resizehandler.js @@ -1,5 +1,7 @@ /* bender-tags: editor,widget */ /* bender-ckeditor-plugins: image2,toolbar */ +/* bender-include: %BASE_PATH%/plugins/uploadfile/_helpers/waitForImage.js */ +/* global waitForImage */ ( function() { 'use strict'; @@ -25,7 +27,7 @@ var tests = { //2672 - 'test resize close to minimum size': assertResize( { + 'test resize close to minimum size': testResize( { data: { screenX: 40, screenY: 15 @@ -37,7 +39,7 @@ } ), //2672 - 'test resize lower than minimum size': assertResize( { + 'test resize lower than minimum size': testResize( { data: { screenX: 14, screenY: 14 @@ -49,7 +51,7 @@ } ), //2048 - 'test resize close to maximum size': assertResize( { + 'test resize close to maximum size': testResize( { limitedSize: { data: { screenX: 350, @@ -73,7 +75,7 @@ } ), //2048 - 'test resize above maximum size': assertResize( { + 'test resize above maximum size': testResize( { limitedSize: { data: { screenX: 351, @@ -99,34 +101,44 @@ bender.test( bender.tools.createTestsForEditors( CKEDITOR.tools.objectKeys( bender.editors ), tests ) ); - function assertResize( options ) { + function testResize( options ) { return function( editor, bot ) { bot.setData( '', function() { - editor.widgets.instances[ editor.widgets._.nextId - 1 ].resizer.fire( 'mousedown', { - $: { - screenX: 163, - screenY: 61 - } - } ); + var image = editor.editable().findOne( 'img' ); - var doc = CKEDITOR.document, - image = editor.editable().findOne( 'img' ), - data = options[ editor.name ] ? options[ editor.name ].data : options.data, - expected = options[ editor.name ] ? options[ editor.name ].expected : options.expected, - actual; + if ( CKEDITOR.env.chrome ) { + assertResize(); + } else { + waitForImage( image, assertResize ); + } + + function assertResize() { + editor.widgets.instances[ editor.widgets._.nextId - 1 ].resizer.fire( 'mousedown', { + $: { + screenX: 163, + screenY: 61 + } + } ); - doc.fire( 'mousemove', { - $: data - } ); + var doc = CKEDITOR.document, + image = editor.editable().findOne( 'img' ), + data = options[ editor.name ] ? options[ editor.name ].data : options.data, + expected = options[ editor.name ] ? options[ editor.name ].expected : options.expected, + actual; - doc.fire( 'mouseup' ); + doc.fire( 'mousemove', { + $: data + } ); - actual = { - width: image.getAttribute( 'width' ), - height: image.getAttribute( 'height' ) - }; + doc.fire( 'mouseup' ); - assert.isTrue( CKEDITOR.tools.objectCompare( actual, expected ) ); + actual = { + width: image.getAttribute( 'width' ), + height: image.getAttribute( 'height' ) + }; + + assert.isTrue( CKEDITOR.tools.objectCompare( actual, expected ) ); + } } ); }; } From 81d9490e8edb0c84a15ebcb520b03f3683ef5afb Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 13:54:00 +0100 Subject: [PATCH 08/26] Docs: added new entry. --- plugins/image2/plugin.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/plugins/image2/plugin.js b/plugins/image2/plugin.js index 7b68ce72661..27d4b08260f 100644 --- a/plugins/image2/plugin.js +++ b/plugins/image2/plugin.js @@ -1749,3 +1749,33 @@ CKEDITOR.config.image2_captionedClass = 'image'; * @cfg {Boolean} [image2_altRequired=false] * @member CKEDITOR.config */ + +/** + * Determines maximum size that image can be resized to with resize handler. + * + * It holds two properties: `width` and `height`, which can be set with one of two types: + * + * A number representing value that limits max size in pixel units: + * + * ```javascript + * config.image2_maxSize = { + * height: 300, + * width: 250 + * }; + * ``` + * + * A string representing image natural size, so each image resize is limited to it's own natural height/width: + * + * ```javascript + * config.image2_maxSize = { + * height: 'naturalHeight', + * width: 'naturalWidth' + * } + * ``` + * + * Note: Image can still be resized to bigger dimensions, when using image dialog. + * + * @since 4.12.0 + * @cfg {Object.} [image2_maxSize] + * @member CKEDITOR.config + */ From acce41c5a8b78235c731229cc7860c3cbc612d99 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 15:39:22 +0100 Subject: [PATCH 09/26] Changelog: added entry on config.image2_maxSize. --- CHANGES.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index fc03a4f769d..8153002bfcb 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -17,6 +17,10 @@ API Changes: ## CKEditor 4.11.3 +New Features: + +* [#2048](https://github.com/ckeditor/ckeditor-dev/issues/2048): [Enhanced Image](https://ckeditor.com/cke4/addon/image2) added config option [CKEDITOR.config.image2_maxSize](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-image2_maxSize) that allows seting maximum size that image can be resized to with resizer. + ## CKEditor 4.11.2 Fixed Issues: From 121071b0b258424c01a26cd37dfc51d0df1c1648 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Dec 2018 15:40:04 +0100 Subject: [PATCH 10/26] Changelog: added entry on bugfix when image2 resizer doesn't update widget.size. --- CHANGES.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 8153002bfcb..adba4e65fd4 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -21,6 +21,10 @@ New Features: * [#2048](https://github.com/ckeditor/ckeditor-dev/issues/2048): [Enhanced Image](https://ckeditor.com/cke4/addon/image2) added config option [CKEDITOR.config.image2_maxSize](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-image2_maxSize) that allows seting maximum size that image can be resized to with resizer. +Fixed Issues: + +* [#2672](https://github.com/ckeditor/ckeditor-dev/issues/2672): Fixed: When resizing [Enhanced Image](https://ckeditor.com/cke4/addon/image2) to minimum size with resizer imaga dialog doesn't show actual values. + ## CKEditor 4.11.2 Fixed Issues: From 15f78ab98c39f2d188790edfecd3a9c9e92ce9db Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 14:26:31 +0100 Subject: [PATCH 11/26] image2_maxSize options: renamed 'naturalWidth' and 'naturalHeight' to 'natural'. --- plugins/image2/plugin.js | 16 ++++++++-------- tests/plugins/image2/manual/maxsize.html | 8 ++++---- tests/plugins/image2/resizehandler.js | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/plugins/image2/plugin.js b/plugins/image2/plugin.js index 27d4b08260f..88c49528d3f 100644 --- a/plugins/image2/plugin.js +++ b/plugins/image2/plugin.js @@ -1324,7 +1324,7 @@ } } - if ( isAllowedSize() ) { + if ( isAllowedSize( newWidth, newHeight ) ) { updateData = { width: newWidth, height: newHeight }; image.setAttributes( updateData ); } @@ -1364,15 +1364,15 @@ maxSize = CKEDITOR.tools.copy( maxSize ); natural = CKEDITOR.plugins.image2.getNatural( image ); - maxSize.width = Math.max( maxSize.width === 'naturalWidth' ? natural.width : maxSize.width, min.width ); - maxSize.height = Math.max( maxSize.height === 'naturalHeight' ? natural.height : maxSize.height, min.width ); + maxSize.width = Math.max( maxSize.width === 'natural' ? natural.width : maxSize.width, min.width ); + maxSize.height = Math.max( maxSize.height === 'natural' ? natural.height : maxSize.height, min.width ); return maxSize; } - function isAllowedSize() { - var isTooSmall = newWidth < min.width || newHeight < min.height, - isTooBig = max && ( ( max.width && newWidth > max.width ) || ( max.height && newHeight > max.height ) ); + function isAllowedSize( width, height ) { + var isTooSmall = width < min.width || height < min.height, + isTooBig = max && ( ( max.width && width > max.width ) || ( max.height && height > max.height ) ); return !isTooSmall && !isTooBig; } } ); @@ -1768,8 +1768,8 @@ CKEDITOR.config.image2_captionedClass = 'image'; * * ```javascript * config.image2_maxSize = { - * height: 'naturalHeight', - * width: 'naturalWidth' + * height: 'natural', + * width: 'natural' * } * ``` * diff --git a/tests/plugins/image2/manual/maxsize.html b/tests/plugins/image2/manual/maxsize.html index 7899facd90b..cbeb8e1dd90 100644 --- a/tests/plugins/image2/manual/maxsize.html +++ b/tests/plugins/image2/manual/maxsize.html @@ -8,8 +8,8 @@

Editor 1:

Editor 2:

- Max width: 'naturalWidth'
- Max height: 'naturalHeight' + Max width: 'natural'
+ Max height: 'natural'

@@ -33,8 +33,8 @@

Editor 3:

CKEDITOR.replace( 'editor2', { image2_maxSize: { - width: 'naturalWidth', - height: 'naturalHeight' + width: 'natural', + height: 'natural' } } ); diff --git a/tests/plugins/image2/resizehandler.js b/tests/plugins/image2/resizehandler.js index 5a950868247..2a95d62c80b 100644 --- a/tests/plugins/image2/resizehandler.js +++ b/tests/plugins/image2/resizehandler.js @@ -18,8 +18,8 @@ naturalSize: { config: { image2_maxSize: { - width: 'naturalWidth', - height: 'naturalHeight' + width: 'natural', + height: 'natural' } } } From 349926a33271c1c9e17799fb64f6b6ad65c8a86d Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 14:28:08 +0100 Subject: [PATCH 12/26] Simplified conditional. --- plugins/image2/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/image2/plugin.js b/plugins/image2/plugin.js index 88c49528d3f..b2d6802567e 100644 --- a/plugins/image2/plugin.js +++ b/plugins/image2/plugin.js @@ -1372,7 +1372,7 @@ function isAllowedSize( width, height ) { var isTooSmall = width < min.width || height < min.height, - isTooBig = max && ( ( max.width && width > max.width ) || ( max.height && height > max.height ) ); + isTooBig = max && ( width > max.width || height > max.height ); return !isTooSmall && !isTooBig; } } ); From cb2843e52bcb1526b109a7695e7e45fac86e32b8 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 14:44:36 +0100 Subject: [PATCH 13/26] Tests: split manual test into two. --- .../plugins/image2/manual/dialogafterresize.html | 7 +++++++ tests/plugins/image2/manual/dialogafterresize.md | 15 +++++++++++++++ tests/plugins/image2/manual/maxsize.md | 16 +--------------- 3 files changed, 23 insertions(+), 15 deletions(-) create mode 100644 tests/plugins/image2/manual/dialogafterresize.html create mode 100644 tests/plugins/image2/manual/dialogafterresize.md diff --git a/tests/plugins/image2/manual/dialogafterresize.html b/tests/plugins/image2/manual/dialogafterresize.html new file mode 100644 index 00000000000..2cb79fe7b60 --- /dev/null +++ b/tests/plugins/image2/manual/dialogafterresize.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/tests/plugins/image2/manual/dialogafterresize.md b/tests/plugins/image2/manual/dialogafterresize.md new file mode 100644 index 00000000000..7c513c5729b --- /dev/null +++ b/tests/plugins/image2/manual/dialogafterresize.md @@ -0,0 +1,15 @@ +@bender-tags: 4.12.0, feature, bug, 2672 +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea + +1. Use resize handler to shrink image to minimum size. + +1. Open dialog for this image. + +## Expected: + +Dialog fields are populated with correct width/height. + +## Unexpected: + +Dialog fields have wrong values. diff --git a/tests/plugins/image2/manual/maxsize.md b/tests/plugins/image2/manual/maxsize.md index fc261d56635..3807ee1e48f 100644 --- a/tests/plugins/image2/manual/maxsize.md +++ b/tests/plugins/image2/manual/maxsize.md @@ -1,21 +1,7 @@ -@bender-tags: 4.12.0, feature, bug +@bender-tags: 4.12.0, feature, bug, 2048 @bender-ui: collapsed @bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea -# For first editor: - -1. Use resize handler to shrink image to minimum size. - -1. Open dialog for this image. - -## Expected: - -Dialog fields are populated with correct width/height. - -## Unexpected: - -Dialog fields have wrong values. - # For each editors 1. Use resize handler to increase image to maximum size. From fe93d4a33740d4f64b63a09ce53afec96d130aaa Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 15:09:10 +0100 Subject: [PATCH 14/26] Tests: added test case. --- tests/plugins/uploadfile/uploadfile.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/tests/plugins/uploadfile/uploadfile.js b/tests/plugins/uploadfile/uploadfile.js index e71c4271dab..68f6dba5f83 100644 --- a/tests/plugins/uploadfile/uploadfile.js +++ b/tests/plugins/uploadfile/uploadfile.js @@ -226,5 +226,20 @@ bender.test( { loader.abort(); assert.areSame( 'abort', loader.status, 'Loader status' ); + }, + + 'test waitForImage when image is loaded': function() { + if ( CKEDITOR.env.ie ) { + assert.ignore(); + } + + var callback = sinon.spy(), + imageMock = { + $: { complete: true } + }; + + waitForImage( imageMock, callback ); + + assert.isTrue( callback.called ); } } ); From e2aac5396bc123ad42ef00d19a901033c554c276 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 15:10:28 +0100 Subject: [PATCH 15/26] waitForImage will trigger callback if image is already loaded. --- tests/plugins/uploadfile/_helpers/waitForImage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/plugins/uploadfile/_helpers/waitForImage.js b/tests/plugins/uploadfile/_helpers/waitForImage.js index 1a8dbc55c6a..86b4ac06152 100644 --- a/tests/plugins/uploadfile/_helpers/waitForImage.js +++ b/tests/plugins/uploadfile/_helpers/waitForImage.js @@ -4,6 +4,8 @@ function waitForImage( image, callback ) { // IE needs to wait for image to be loaded so it can read width and height of the image. if ( CKEDITOR.env.ie ) { wait( callback, 100 ); + } else if ( image.$.complete ) { + callback(); } else { image.once( 'load', function() { resume( callback ); From 5e2e0ba03e1d5456a21da610859de47066dee56d Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 15:11:02 +0100 Subject: [PATCH 16/26] Tests: added ticket number. --- tests/plugins/uploadfile/uploadfile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/plugins/uploadfile/uploadfile.js b/tests/plugins/uploadfile/uploadfile.js index 68f6dba5f83..b022c0e4c51 100644 --- a/tests/plugins/uploadfile/uploadfile.js +++ b/tests/plugins/uploadfile/uploadfile.js @@ -228,6 +228,7 @@ bender.test( { assert.areSame( 'abort', loader.status, 'Loader status' ); }, + // #2714 'test waitForImage when image is loaded': function() { if ( CKEDITOR.env.ie ) { assert.ignore(); From 6b1b39b7ca435ce7e020d0e0d6e4916638abcfe1 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 15:59:08 +0100 Subject: [PATCH 17/26] Tests: simplified by using waitForImage with every browser. --- tests/plugins/image2/resizehandler.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/tests/plugins/image2/resizehandler.js b/tests/plugins/image2/resizehandler.js index 2a95d62c80b..612797de4ca 100644 --- a/tests/plugins/image2/resizehandler.js +++ b/tests/plugins/image2/resizehandler.js @@ -106,13 +106,7 @@ bot.setData( '', function() { var image = editor.editable().findOne( 'img' ); - if ( CKEDITOR.env.chrome ) { - assertResize(); - } else { - waitForImage( image, assertResize ); - } - - function assertResize() { + waitForImage( image, function() { editor.widgets.instances[ editor.widgets._.nextId - 1 ].resizer.fire( 'mousedown', { $: { screenX: 163, @@ -138,7 +132,7 @@ }; assert.isTrue( CKEDITOR.tools.objectCompare( actual, expected ) ); - } + } ); } ); }; } From 454b6ac449f40cf3b840a88716f9f295d9048eeb Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 2 Jan 2019 16:00:36 +0100 Subject: [PATCH 18/26] Tests: removed duplicate variable declaration. --- tests/plugins/image2/resizehandler.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/plugins/image2/resizehandler.js b/tests/plugins/image2/resizehandler.js index 612797de4ca..62afc13272e 100644 --- a/tests/plugins/image2/resizehandler.js +++ b/tests/plugins/image2/resizehandler.js @@ -115,7 +115,6 @@ } ); var doc = CKEDITOR.document, - image = editor.editable().findOne( 'img' ), data = options[ editor.name ] ? options[ editor.name ].data : options.data, expected = options[ editor.name ] ? options[ editor.name ].expected : options.expected, actual; From 3b9e6e0e9a3c81a3a84e235331e2f281112189af Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 5 Feb 2019 15:16:52 +0100 Subject: [PATCH 19/26] Tests: corrected issue ticket references. --- tests/plugins/image2/manual/dialogafterresize.md | 2 +- tests/plugins/image2/resizehandler.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/tests/plugins/image2/manual/dialogafterresize.md b/tests/plugins/image2/manual/dialogafterresize.md index 7c513c5729b..631192addaf 100644 --- a/tests/plugins/image2/manual/dialogafterresize.md +++ b/tests/plugins/image2/manual/dialogafterresize.md @@ -1,4 +1,4 @@ -@bender-tags: 4.12.0, feature, bug, 2672 +@bender-tags: 4.12.0, bug, 2672 @bender-ui: collapsed @bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea diff --git a/tests/plugins/image2/resizehandler.js b/tests/plugins/image2/resizehandler.js index 62afc13272e..00f2e12a5bf 100644 --- a/tests/plugins/image2/resizehandler.js +++ b/tests/plugins/image2/resizehandler.js @@ -26,7 +26,7 @@ }; var tests = { - //2672 + // (#2672) 'test resize close to minimum size': testResize( { data: { screenX: 40, @@ -38,7 +38,7 @@ } } ), - //2672 + // (#2672) 'test resize lower than minimum size': testResize( { data: { screenX: 14, @@ -50,7 +50,7 @@ } } ), - //2048 + // (#2048) 'test resize close to maximum size': testResize( { limitedSize: { data: { @@ -74,7 +74,7 @@ } } ), - //2048 + // (#2048) 'test resize above maximum size': testResize( { limitedSize: { data: { From e411a791814c408e9bb7d48a786e0a0367dc0816 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 5 Feb 2019 15:27:08 +0100 Subject: [PATCH 20/26] Tests: added image dimensions preview. --- .../image2/manual/dialogafterresize.html | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/tests/plugins/image2/manual/dialogafterresize.html b/tests/plugins/image2/manual/dialogafterresize.html index 2cb79fe7b60..5432b421fe8 100644 --- a/tests/plugins/image2/manual/dialogafterresize.html +++ b/tests/plugins/image2/manual/dialogafterresize.html @@ -1,7 +1,21 @@
- +

Width:
+ Height: +

From 937cc7d00b3b03a60446d904863f4e0385138e73 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 5 Feb 2019 15:28:28 +0100 Subject: [PATCH 21/26] Tests: made test steps more explicit, as it is important to release mouse button once image is at minimum size. --- tests/plugins/image2/manual/dialogafterresize.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/tests/plugins/image2/manual/dialogafterresize.md b/tests/plugins/image2/manual/dialogafterresize.md index 631192addaf..3ba5ec5bc2e 100644 --- a/tests/plugins/image2/manual/dialogafterresize.md +++ b/tests/plugins/image2/manual/dialogafterresize.md @@ -1,15 +1,19 @@ @bender-tags: 4.12.0, bug, 2672 @bender-ui: collapsed -@bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea +@bender-ckeditor-plugins: wysiwygarea, toolbar, image2, sourcearea, undo -1. Use resize handler to shrink image to minimum size. +1. Press and hold resize handler. + +1. Shrink image to minimum size. + +1. Release resize handler. 1. Open dialog for this image. ## Expected: -Dialog fields are populated with correct width/height. +Dialog fields are populated with same values as presented below editor. ## Unexpected: -Dialog fields have wrong values. +Dialog fields have other values. From d321ed2826ad395a94c0e61d0a4a76576f7cf920 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 5 Feb 2019 15:28:59 +0100 Subject: [PATCH 22/26] Tests: ignore mobiles. --- tests/plugins/image2/manual/dialogafterresize.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/plugins/image2/manual/dialogafterresize.html b/tests/plugins/image2/manual/dialogafterresize.html index 5432b421fe8..c10e9059475 100644 --- a/tests/plugins/image2/manual/dialogafterresize.html +++ b/tests/plugins/image2/manual/dialogafterresize.html @@ -5,6 +5,9 @@ Height: