Merge pull request #103 from ckeditor/t/306

Fix: Initial resize of a side image with no width predefined now gives correct percentage values.

src/widgetresize/resizer.js

@@ -467,6 +467,7 @@ class SizeView extends View {
 	}
 }
 
+// @private
 // @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
 // @returns {String} A prefixed HTML class name for the resizer element
 function getResizerClass( resizerPosition ) {

src/widgetresize/resizerstate.js

@@ -126,16 +126,8 @@ export default class ResizeState {
 
 		const widthStyle = domResizeHost.style.width;
 
-		if ( widthStyle ) {
-			if ( widthStyle.match( /^\d+\.?\d*%$/ ) ) {
-				this.originalWidthPercents = parseFloat( widthStyle );
-			} else {
-				// TODO we need to check it via comparing to the parent's width.
-				this.originalWidthPercents = 50;
-			}
-		} else {
-			this.originalWidthPercents = 100;
-		}
+		this.originalWidthPercents = widthStyle && widthStyle.match( /^\d+\.?\d*%$/ ) ?
+			parseFloat( widthStyle ) : calculateHostPercentageWidth( domResizeHost, clientRect );
 	}
 
 	update( newSize ) {
@@ -150,16 +142,28 @@ export default class ResizeState {
 
 mix( ResizeState, ObservableMixin );
 
-/**
- * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
- *
- * @private
- * @param {HTMLElement} element
- * @param {String} resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
- * @returns {Object} return
- * @returns {Number} return.x
- * @returns {Number} return.y
- */
+// Calculates a relative width of a `domResizeHost` compared to it's parent in percents.
+//
+// @private
+// @param {HTMLElement} domResizeHost
+// @param {module:utils/dom/rect~Rect} resizeHostRect
+// @returns {Number}
+function calculateHostPercentageWidth( domResizeHost, resizeHostRect ) {
+	const domResizeHostParent = domResizeHost.parentElement;
+	// Need to use computed style as it properly excludes parent's paddings from the returned value.
+	const parentWidth = parseFloat( domResizeHostParent.ownerDocument.defaultView.getComputedStyle( domResizeHostParent ).width );
+
+	return resizeHostRect.width / parentWidth * 100;
+}
+
+// Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
+//
+// @private
+// @param {HTMLElement} element
+// @param {String} resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
+// @returns {Object} return
+// @returns {Number} return.x
+// @returns {Number} return.y
 function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 	const elementRect = new Rect( element );
 	const positionParts = resizerPosition.split( '-' );
@@ -174,22 +178,18 @@ function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 	return ret;
 }
 
-/**
- * @private
- * @param {String} resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
- * @returns {String} A prefixed HTML class name for the resizer element.
- */
+// @private
+// @param {String} resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
+// @returns {String} A prefixed HTML class name for the resizer element.
 function getResizerHandleClass( resizerPosition ) {
 	return `ck-widget__resizer__handle-${ resizerPosition }`;
 }
 
-/**
- * Determines the position of a given resize handle.
- *
- * @private
- * @param {HTMLElement} domHandle Handler used to calculate the reference point.
- * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
- */
+// Determines the position of a given resize handle.
+//
+// @private
+// @param {HTMLElement} domHandle Handler used to calculate the reference point.
+// @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 function getHandlePosition( domHandle ) {
 	const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
@@ -200,10 +200,9 @@ function getHandlePosition( domHandle ) {
 	}
 }
 
-/**
- * @param {String} position Like `"top-left"`.
- * @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
- */
+// @private
+// @param {String} position Like `"top-left"`.
+// @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
 function getOppositePosition( position ) {
 	const parts = position.split( '-' );
 	const replacements = {