From f17cfb0daf8da141125e7493b7b9bc0295dfec09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 5 Feb 2020 17:51:53 +0100
Subject: [PATCH 01/23] Expose method for refreshing widget mask.

---
 plugins/widget/plugin.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 970a2603139..038b1c7ce07 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -1420,6 +1420,10 @@
 			this.editor.focus();
 		},
 
+		refreshMask: function() {
+			setupMask( this );
+		},
+
 		/**
 		 * Removes a class from the widget element. This method is used by
 		 * the {@link #removeStyle} method and should be overriden by widgets

From e5e4549c657f09438fc56ed93b23b4f29fa2cf82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Tue, 11 Feb 2020 16:38:09 +0100
Subject: [PATCH 02/23] Expose 'refreshParts()' method.

---
 plugins/widget/plugin.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 038b1c7ce07..5234003fc84 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -1424,6 +1424,10 @@
 			setupMask( this );
 		},
 
+		refreshParts: function() {
+			setupParts( this );
+		},
+
 		/**
 		 * Removes a class from the widget element. This method is used by
 		 * the {@link #removeStyle} method and should be overriden by widgets
@@ -3609,8 +3613,13 @@
 				partName;
 
 			for ( partName in widget.parts ) {
+				if ( typeof widget.parts[ partName ] !== "string" ) {
+					parts[ partName ] = widget.parts[ partName ];
+					continue;
+				}
+
 				el = widget.wrapper.findOne( widget.parts[ partName ] );
-				parts[ partName ] = el;
+				parts[ partName ] = el ? el : widget.parts[ partName ];
 			}
 			widget.parts = parts;
 		}
@@ -3731,8 +3740,8 @@
 		var part = this.parts[ this.maskPart ],
 			mask;
 
-		// If requested part is invalid, don't create mask.
-		if ( !part ) {
+		// If requested part is invalid or wasn't fetched yet (#3775), don't create mask.
+		if ( !part || typeof part == 'string' ) {
 			return;
 		}
 

From cf43bb71fe177d099bfdb252ff0bbce28680665c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 12 Feb 2020 11:01:32 +0100
Subject: [PATCH 03/23] Add manual test.

---
 .../plugins/widget/manual/maskrefreshapi.html | 78 +++++++++++++++++++
 tests/plugins/widget/manual/maskrefreshapi.md | 35 +++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 tests/plugins/widget/manual/maskrefreshapi.html
 create mode 100644 tests/plugins/widget/manual/maskrefreshapi.md

diff --git a/tests/plugins/widget/manual/maskrefreshapi.html b/tests/plugins/widget/manual/maskrefreshapi.html
new file mode 100644
index 00000000000..d1d644b0489
--- /dev/null
+++ b/tests/plugins/widget/manual/maskrefreshapi.html
@@ -0,0 +1,78 @@
+<div id="editor">
+	<p>bar</p>
+	<div class="partialMasked"><div class="notmasked">You can type here...</div></div>
+</div>
+<button id="fill-widget">Fetch widget</button>
+
+<script>
+	// Ignore on mobiles.
+	if ( bender.tools.env.mobile ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.addCss( '.left { float: left; width: 200px; } .right { float: right; width: 200px; } .cke_widget_partial_mask { border: 1px solid red };' );
+
+	CKEDITOR.stylesSet.add( 'default', [
+		{ name: 'None', type: 'widget', widget: 'partialMasked', attributes: { 'class': '' }, group: 'alignment' },
+		{ name: 'Left', type: 'widget', widget: 'partialMasked', attributes: { 'class': 'left' }, group: 'alignment' },
+		{ name: 'Right', type: 'widget', widget: 'partialMasked', attributes: { 'class': 'right' }, group: 'alignment' }
+	] );
+
+	CKEDITOR.plugins.add( 'partialMasked', {
+		requires: 'widget',
+		init: function( editor ) {
+			editor.widgets.add( 'partialMasked', {
+				button: 'Partial mask widget',
+				pathName: 'test-widget',
+
+				template:
+					'<div class="partialMasked">' +
+						'<div class="notmasked"></div>' +
+						'<div class="content"></div>' +
+					'</div>',
+
+				editables: {
+					nomask: {
+						selector: '.notmasked',
+						allowedContent: 'br'
+					},
+					content: {
+						selector: '.content',
+						allowedContent: 'br'
+					}
+				},
+
+				parts: {
+					nomask: '.notmasked',
+					content: '.content'
+				},
+
+				allowedContent: 'div(partialMasked,content,notmasked,left,right)',
+				requiredContent: 'div(partialMasked)',
+
+				mask: 'content',
+
+				upcast: function( element ) {
+					return element.name == 'div' && element.hasClass( 'partialMasked' );
+				}
+			} );
+		}
+	} );
+
+	var editor = CKEDITOR.replace( 'editor', {
+		extraPlugins: 'partialMasked'
+	} );
+
+	CKEDITOR.document.findOne( '#fill-widget' ).on( 'click', function() {
+		var div = new CKEDITOR.dom.element( 'div' ),
+			widget = editor.widgets.instances[ 0 ];
+
+		div.setText( '...but not here' );
+		div.addClass( 'content' );
+
+		widget.element.append( div );
+		widget.refreshParts();
+		widget.refreshMask();
+	} );
+
+</script>
diff --git a/tests/plugins/widget/manual/maskrefreshapi.md b/tests/plugins/widget/manual/maskrefreshapi.md
new file mode 100644
index 00000000000..52b42f330ca
--- /dev/null
+++ b/tests/plugins/widget/manual/maskrefreshapi.md
@@ -0,0 +1,35 @@
+@bender-ui: collapsed
+@bender-tags: 4.14.0, feature, 3775
+@bender-ckeditor-plugins: wysiwygarea,toolbar,clipboard,image2,sourcearea,list,undo,stylescombo
+
+**Note:** Mask has a red border so it's positioning is visible without inspecting mask element.
+
+1. Click `Fetch widget` button below editor.
+
+  **Expected:**
+
+  Widget expanded by the second row, which is covered by partial mask.
+
+  **Unexpected:**
+
+  Second row or mask didn't appear.
+
+1. Add a new row in the widget's editable.
+
+  **Expected:**
+
+  Mask moved and still covers the right part of widget.
+
+  **Unexpected:**
+
+  Mask didn't move.
+
+1. Switch to source mode and back.
+
+  **Expected:**
+
+  Mask is still visible.
+
+  **Unexpected:**
+
+  Mask disappeared.

From 2e51c5627217bf52e83b51a426f722ec0cb7ce5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 12 Feb 2020 15:15:52 +0100
Subject: [PATCH 04/23] Add unit test.

---
 tests/plugins/widget/maskrefreshapi.js | 81 ++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 tests/plugins/widget/maskrefreshapi.js

diff --git a/tests/plugins/widget/maskrefreshapi.js b/tests/plugins/widget/maskrefreshapi.js
new file mode 100644
index 00000000000..18510a447fe
--- /dev/null
+++ b/tests/plugins/widget/maskrefreshapi.js
@@ -0,0 +1,81 @@
+/* bender-tags: widget, 3775 */
+/* bender-ckeditor-plugins: widget,undo */
+
+( function() {
+	'use strict';
+
+	bender.editor = {
+		config: {
+			allowedContent: true,
+			on: {
+				instanceReady: function( evt ) {
+					evt.editor.dataProcessor.writer.sortAttributes = 1;
+				}
+			}
+		}
+	};
+
+	bender.test( {
+		// This test needs to always be the first in the suite because it uses 'elementFromPoint()' method
+		// which on IE breaks if there is any message about earlier tests displayed.
+		'test partial mask refresh': function() {
+			CKEDITOR.addCss( '.left { float: left; width: 200px; } .right { float: right; width: 200px; } .cke_widget_partial_mask { border: 1px solid red };' );
+			var editor = this.editor;
+
+			var widgetDef = {
+				mask: 'cksource',
+
+				parts: {
+					foo: '#foo',
+					bar: '#bar',
+					cksource: '.cksource'
+				},
+
+				editables: {
+					editable1: '#foo',
+					editable2: '#bar',
+					editable3: '.cksource'
+				}
+			};
+
+			editor.widgets.add( 'testPartialMask', widgetDef );
+
+			this.editorBot.setData( '<div data-widget="testPartialMask" id="widget">' +
+				'<p id="foo">foo</p><p id="bar">bar</p></div>',
+				function() {
+					var div = new CKEDITOR.dom.element( 'div' ),
+						element = editor.document.getById( 'widget' ),
+						widget = editor.widgets.getByElement( element ),
+						firstEditable = editor.document.$.elementFromPoint( 40, 30 ),
+						secondEditable = editor.document.$.elementFromPoint( 40, 60 ),
+						thirdEditable;
+
+					assert.areEqual( '.cksource', widget.parts.cksource, 'Part should still be just a selector.' );
+
+					div.setText( 'cksource' );
+					div.addClass( 'cksource' );
+					widget.element.append( div );
+					widget.refreshParts();
+
+					assert.isInstanceOf( CKEDITOR.dom.element, widget.parts.cksource, 'Part should already be an element instance.' );
+
+					widget.refreshMask();
+
+					assert.isNull( widget.wrapper.findOne( '.cke_widget_mask' ), 'Complete mask was created instead of partial.' );
+					assert.isInstanceOf( CKEDITOR.dom.element, widget.wrapper.findOne( '.cke_widget_partial_mask' ), 'Mask element was not found.' );
+					assert.areSame( 'foo', firstEditable.innerText, 'Mask covers the first editable instead of the third.' );
+					assert.areSame( 'bar', secondEditable.innerText, 'Mask covers the second editable instead of the third.' );
+
+					thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
+
+					// IE8 is just IE8. It needs to do the same again (as for the first time it returns null).
+					if ( CKEDITOR.env.ie && CKEDITOR.env.version <= 8 ) {
+						thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
+					}
+
+					assert.areSame( '', thirdEditable.innerText, 'Mask doesn\'t cover the third editable.' );
+				}
+			);
+		}
+	} );
+} )();

From 6e0b398d20336b39068848573d909c3138fede47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 12 Feb 2020 15:16:08 +0100
Subject: [PATCH 05/23] Update existing test according to new spec.

---
 tests/plugins/widget/definition.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/plugins/widget/definition.js b/tests/plugins/widget/definition.js
index 4c2968a7308..89dd2e22f11 100644
--- a/tests/plugins/widget/definition.js
+++ b/tests/plugins/widget/definition.js
@@ -411,7 +411,7 @@
 
 				assert.areSame( elP.getElementsByTag( 'b' ).getItem( 0 ), widget.parts.foo, 'foo' );
 				assert.areSame( elP.getElementsByTag( 'i' ).getItem( 0 ), widget.parts.bar, 'bar' );
-				assert.isNull( widget.parts.xxx, 'xxx' );
+				assert.areEqual( widget.parts.xxx, '#xxx' );
 				assert.areSame( elP, widget.parts.p, 'p' );
 				assert.areSame( elP.getElementsByTag( 'b' ).getItem( 0 ), fooInInit, 'parts are already ready when init method is executed' );
 			} );

From d0a59f16b304d75c1456461d0a23ddfd23731de2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 12 Feb 2020 15:18:57 +0100
Subject: [PATCH 06/23] Fix naming.

---
 .../plugins/widget/manual/maskrefreshapi.html | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/tests/plugins/widget/manual/maskrefreshapi.html b/tests/plugins/widget/manual/maskrefreshapi.html
index d1d644b0489..d82c28be581 100644
--- a/tests/plugins/widget/manual/maskrefreshapi.html
+++ b/tests/plugins/widget/manual/maskrefreshapi.html
@@ -1,6 +1,6 @@
 <div id="editor">
 	<p>bar</p>
-	<div class="partialMasked"><div class="notmasked">You can type here...</div></div>
+	<div class="partiallyMasked"><div class="notmasked">You can type here...</div></div>
 </div>
 <button id="fill-widget">Fetch widget</button>
 
@@ -13,20 +13,20 @@
 	CKEDITOR.addCss( '.left { float: left; width: 200px; } .right { float: right; width: 200px; } .cke_widget_partial_mask { border: 1px solid red };' );
 
 	CKEDITOR.stylesSet.add( 'default', [
-		{ name: 'None', type: 'widget', widget: 'partialMasked', attributes: { 'class': '' }, group: 'alignment' },
-		{ name: 'Left', type: 'widget', widget: 'partialMasked', attributes: { 'class': 'left' }, group: 'alignment' },
-		{ name: 'Right', type: 'widget', widget: 'partialMasked', attributes: { 'class': 'right' }, group: 'alignment' }
+		{ name: 'None', type: 'widget', widget: 'partiallyMasked', attributes: { 'class': '' }, group: 'alignment' },
+		{ name: 'Left', type: 'widget', widget: 'partiallyMasked', attributes: { 'class': 'left' }, group: 'alignment' },
+		{ name: 'Right', type: 'widget', widget: 'partiallyMasked', attributes: { 'class': 'right' }, group: 'alignment' }
 	] );
 
-	CKEDITOR.plugins.add( 'partialMasked', {
+	CKEDITOR.plugins.add( 'partiallyMasked', {
 		requires: 'widget',
 		init: function( editor ) {
-			editor.widgets.add( 'partialMasked', {
+			editor.widgets.add( 'partiallyMasked', {
 				button: 'Partial mask widget',
 				pathName: 'test-widget',
 
 				template:
-					'<div class="partialMasked">' +
+					'<div class="partiallyMasked">' +
 						'<div class="notmasked"></div>' +
 						'<div class="content"></div>' +
 					'</div>',
@@ -47,20 +47,20 @@
 					content: '.content'
 				},
 
-				allowedContent: 'div(partialMasked,content,notmasked,left,right)',
-				requiredContent: 'div(partialMasked)',
+				allowedContent: 'div(partiallyMasked,content,notmasked,left,right)',
+				requiredContent: 'div(partiallyMasked)',
 
 				mask: 'content',
 
 				upcast: function( element ) {
-					return element.name == 'div' && element.hasClass( 'partialMasked' );
+					return element.name == 'div' && element.hasClass( 'partiallyMasked' );
 				}
 			} );
 		}
 	} );
 
 	var editor = CKEDITOR.replace( 'editor', {
-		extraPlugins: 'partialMasked'
+		extraPlugins: 'partiallyMasked'
 	} );
 
 	CKEDITOR.document.findOne( '#fill-widget' ).on( 'click', function() {

From 9886698d7e87a9e61be3349168999961a23db436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 12 Feb 2020 15:21:41 +0100
Subject: [PATCH 07/23] Unignore manual test on mobiles.

---
 tests/plugins/widget/manual/maskrefreshapi.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/tests/plugins/widget/manual/maskrefreshapi.html b/tests/plugins/widget/manual/maskrefreshapi.html
index d82c28be581..12eecc46ab3 100644
--- a/tests/plugins/widget/manual/maskrefreshapi.html
+++ b/tests/plugins/widget/manual/maskrefreshapi.html
@@ -5,11 +5,6 @@
 <button id="fill-widget">Fetch widget</button>
 
 <script>
-	// Ignore on mobiles.
-	if ( bender.tools.env.mobile ) {
-		bender.ignore();
-	}
-
 	CKEDITOR.addCss( '.left { float: left; width: 200px; } .right { float: right; width: 200px; } .cke_widget_partial_mask { border: 1px solid red };' );
 
 	CKEDITOR.stylesSet.add( 'default', [

From 63cf47e3d0c80783d1d74940334255c9701e64a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Wed, 12 Feb 2020 15:42:35 +0100
Subject: [PATCH 08/23] Add API docs reference about refreshMask() and
 refreshParts().

---
 plugins/widget/plugin.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 5234003fc84..3023ca83d88 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -1420,10 +1420,17 @@
 			this.editor.focus();
 		},
 
+		/**
+		 * Refreshes widget's mask. Can be used together with {@link CKEDITOR.plugins.widget#refreshParts} method to reinitialize mask
+		 * for dynamically created widgets.
+		 */
 		refreshMask: function() {
 			setupMask( this );
 		},
 
+		/**
+		 * Reinitializes widget's {@link CKEDITOR.plugins.widget#parts parts}.
+		 */
 		refreshParts: function() {
 			setupParts( this );
 		},

From 0fbd9adb590ae232531b367463d9e883403f2b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarz=C4=99bski?= <d.jarzebski@cksource.com>
Date: Fri, 14 Feb 2020 12:09:19 +0100
Subject: [PATCH 09/23] Use single quotes instead of single ones.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Krzysztof Krztoń <k.krzton@cksource.com>
---
 plugins/widget/plugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 3023ca83d88..928a256451b 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -3620,7 +3620,7 @@
 				partName;
 
 			for ( partName in widget.parts ) {
-				if ( typeof widget.parts[ partName ] !== "string" ) {
+				if ( typeof widget.parts[ partName ] !== 'string' ) {
 					parts[ partName ] = widget.parts[ partName ];
 					continue;
 				}

From 78eb17dfb871fbea0c344b6454f4cc60c335d7b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Sat, 15 Feb 2020 20:22:43 +0100
Subject: [PATCH 10/23] Introduce partSelectors to reduce impact on other parts
 of code.

---
 plugins/widget/plugin.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 928a256451b..22ff346ef9b 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -3613,20 +3613,23 @@
 	// partName => selector pairs
 	// with:
 	// partName => element pairs
-	function setupParts( widget ) {
+	function setupParts( widget, refreshInitialised ) {
+		if ( !widget.partSelectors ) {
+			widget.partSelectors = widget.parts;
+		}
+
 		if ( widget.parts ) {
 			var parts = {},
 				el,
 				partName;
 
-			for ( partName in widget.parts ) {
-				if ( typeof widget.parts[ partName ] !== 'string' ) {
+			for ( partName in widget.partSelectors ) {
+				if ( refreshInitialised || !widget.parts[ partName ] || typeof widget.parts[ partName ] == 'string' ) {
+					el = widget.wrapper.findOne( widget.partSelectors[ partName ] );
+					parts[ partName ] = el;
+				} else {
 					parts[ partName ] = widget.parts[ partName ];
-					continue;
 				}
-
-				el = widget.wrapper.findOne( widget.parts[ partName ] );
-				parts[ partName ] = el ? el : widget.parts[ partName ];
 			}
 			widget.parts = parts;
 		}

From b68ad471eeebec4d9e637d5e51d751bba1dc7491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Sat, 15 Feb 2020 20:37:55 +0100
Subject: [PATCH 11/23] Rename and adjust manual tests.

---
 tests/plugins/widget/manual/maskrefreshapi.md | 35 ----------
 ...askrefreshapi.html => refreshmaskapi.html} | 30 +++++---
 tests/plugins/widget/manual/refreshmaskapi.md | 68 +++++++++++++++++++
 3 files changed, 90 insertions(+), 43 deletions(-)
 delete mode 100644 tests/plugins/widget/manual/maskrefreshapi.md
 rename tests/plugins/widget/manual/{maskrefreshapi.html => refreshmaskapi.html} (68%)
 create mode 100644 tests/plugins/widget/manual/refreshmaskapi.md

diff --git a/tests/plugins/widget/manual/maskrefreshapi.md b/tests/plugins/widget/manual/maskrefreshapi.md
deleted file mode 100644
index 52b42f330ca..00000000000
--- a/tests/plugins/widget/manual/maskrefreshapi.md
+++ /dev/null
@@ -1,35 +0,0 @@
-@bender-ui: collapsed
-@bender-tags: 4.14.0, feature, 3775
-@bender-ckeditor-plugins: wysiwygarea,toolbar,clipboard,image2,sourcearea,list,undo,stylescombo
-
-**Note:** Mask has a red border so it's positioning is visible without inspecting mask element.
-
-1. Click `Fetch widget` button below editor.
-
-  **Expected:**
-
-  Widget expanded by the second row, which is covered by partial mask.
-
-  **Unexpected:**
-
-  Second row or mask didn't appear.
-
-1. Add a new row in the widget's editable.
-
-  **Expected:**
-
-  Mask moved and still covers the right part of widget.
-
-  **Unexpected:**
-
-  Mask didn't move.
-
-1. Switch to source mode and back.
-
-  **Expected:**
-
-  Mask is still visible.
-
-  **Unexpected:**
-
-  Mask disappeared.
diff --git a/tests/plugins/widget/manual/maskrefreshapi.html b/tests/plugins/widget/manual/refreshmaskapi.html
similarity index 68%
rename from tests/plugins/widget/manual/maskrefreshapi.html
rename to tests/plugins/widget/manual/refreshmaskapi.html
index 12eecc46ab3..0358dd51f52 100644
--- a/tests/plugins/widget/manual/maskrefreshapi.html
+++ b/tests/plugins/widget/manual/refreshmaskapi.html
@@ -1,8 +1,16 @@
 <div id="editor">
 	<p>bar</p>
-	<div class="partiallyMasked"><div class="notmasked">You can type here...</div></div>
+	<div id="widget" class="partiallyMasked"><div class="notmasked">You can type here...</div></div>
+</div>
+<div>
+	<button id="add-content">Add missing widget HTML</button>
+</div>
+<div>
+	<button id="refresh-parts">Refresh widget parts</button>
+</div>
+<div>
+	<button id="refresh-mask">Refresh mask</button>
 </div>
-<button id="fill-widget">Fetch widget</button>
 
 <script>
 	CKEDITOR.addCss( '.left { float: left; width: 200px; } .right { float: right; width: 200px; } .cke_widget_partial_mask { border: 1px solid red };' );
@@ -58,16 +66,22 @@
 		extraPlugins: 'partiallyMasked'
 	} );
 
-	CKEDITOR.document.findOne( '#fill-widget' ).on( 'click', function() {
+	CKEDITOR.document.findOne( '#add-content' ).on( 'click', function() {
 		var div = new CKEDITOR.dom.element( 'div' ),
 			widget = editor.widgets.instances[ 0 ];
 
-		div.setText( '...but not here' );
-		div.addClass( 'content' );
+		if ( !widget.element.findOne( '.content' ) ) {
+			div.setText( '...but not here' );
+			div.addClass( 'content' );
 
-		widget.element.append( div );
-		widget.refreshParts();
-		widget.refreshMask();
+			widget.element.append( div );
+		}
+	} );
+	CKEDITOR.document.findOne( '#refresh-parts' ).on( 'click', function() {
+		editor.widgets.instances[ 0 ].refreshParts();
+	} );
+	CKEDITOR.document.findOne( '#refresh-mask' ).on( 'click', function() {
+		editor.widgets.instances[ 0 ].refreshMask();
 	} );
 
 </script>
diff --git a/tests/plugins/widget/manual/refreshmaskapi.md b/tests/plugins/widget/manual/refreshmaskapi.md
new file mode 100644
index 00000000000..d625f3369e6
--- /dev/null
+++ b/tests/plugins/widget/manual/refreshmaskapi.md
@@ -0,0 +1,68 @@
+@bender-ui: collapsed
+@bender-tags: 4.14.0, feature, 3775
+@bender-ckeditor-plugins: wysiwygarea,toolbar,clipboard,image2,sourcearea,list,undo,stylescombo
+
+**Note:** Mask has a red border so it's positioning is visible without inspecting mask element,
+but still keep the console opened and watch out for errors.
+
+1. Click `Refresh mask` button below editor.
+
+  **Expected:**
+
+  Nothing happened.
+
+  **Unexpected:**
+
+  Error was thrown.
+
+1. Click `Add missing HTML` button below editor.
+
+  **Expected:**
+
+  Widget expanded by the second row. It's not clickable, but there is no mask (red border).
+
+  **Unexpected:**
+
+  Second row didn't appear.
+
+1. Click `Refresh mask` button below editor.
+
+  **Expected:**
+
+  Nothing happened.
+
+  **Unexpected:**
+
+  Error was thrown.
+
+1. Click `Refresh parts` button below editor.
+
+1. Click `Refresh mask` button below editor.
+
+  **Expected:**
+
+  Mask appeared over the second row.
+
+  **Unexpected:**
+
+  Mask didn't appear or error was thrown.
+
+1. Add a new row in the widget's editable.
+
+  **Expected:**
+
+  Mask moved and still covers the right part of widget.
+
+  **Unexpected:**
+
+  Mask didn't move.
+
+1. Switch to source mode and back.
+
+  **Expected:**
+
+  Mask is still visible and in the right place.
+
+  **Unexpected:**
+
+  Mask disappeared.

From eb9ac6097e7cb4480a107cca4be944e442528d89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Sat, 15 Feb 2020 20:38:52 +0100
Subject: [PATCH 12/23] Revert unit test to previous form.

---
 tests/plugins/widget/definition.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/plugins/widget/definition.js b/tests/plugins/widget/definition.js
index 89dd2e22f11..4c2968a7308 100644
--- a/tests/plugins/widget/definition.js
+++ b/tests/plugins/widget/definition.js
@@ -411,7 +411,7 @@
 
 				assert.areSame( elP.getElementsByTag( 'b' ).getItem( 0 ), widget.parts.foo, 'foo' );
 				assert.areSame( elP.getElementsByTag( 'i' ).getItem( 0 ), widget.parts.bar, 'bar' );
-				assert.areEqual( widget.parts.xxx, '#xxx' );
+				assert.isNull( widget.parts.xxx, 'xxx' );
 				assert.areSame( elP, widget.parts.p, 'p' );
 				assert.areSame( elP.getElementsByTag( 'b' ).getItem( 0 ), fooInInit, 'parts are already ready when init method is executed' );
 			} );

From 6bce733811a8a506548557f3d94812fdacbfcf80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Sat, 15 Feb 2020 20:51:51 +0100
Subject: [PATCH 13/23] Rename unit test and adjust expected behavior for
 widget parts.

---
 tests/plugins/widget/{maskrefreshapi.js => refreshmaskapi.js} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename tests/plugins/widget/{maskrefreshapi.js => refreshmaskapi.js} (96%)

diff --git a/tests/plugins/widget/maskrefreshapi.js b/tests/plugins/widget/refreshmaskapi.js
similarity index 96%
rename from tests/plugins/widget/maskrefreshapi.js
rename to tests/plugins/widget/refreshmaskapi.js
index 18510a447fe..94e265aafb7 100644
--- a/tests/plugins/widget/maskrefreshapi.js
+++ b/tests/plugins/widget/refreshmaskapi.js
@@ -50,7 +50,7 @@
 						secondEditable = editor.document.$.elementFromPoint( 40, 60 ),
 						thirdEditable;
 
-					assert.areEqual( '.cksource', widget.parts.cksource, 'Part should still be just a selector.' );
+					assert.areEqual( null, widget.parts.cksource, 'Part should be null.' );
 
 					div.setText( 'cksource' );
 					div.addClass( 'cksource' );

From 390198cecd8e215ef8a917da134d1752b66ab250 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Sat, 15 Feb 2020 21:09:58 +0100
Subject: [PATCH 14/23] Add docs and fix spelling typo.

---
 plugins/widget/plugin.js | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 22ff346ef9b..b70775d299e 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -986,11 +986,23 @@
 		 *
 		 * For every `partName => selector` pair in {@link CKEDITOR.plugins.widget.definition#parts},
 		 * one `partName => element` pair is added to this object during the widget initialization.
+		 * Parts can be reinitialized via {@link #refreshParts} method.
 		 *
 		 * @readonly
 		 * @property {Object} parts
 		 */
 
+		/**
+		 * An object containing definitions of widget components (`part name => CSS selector`).
+		 *
+		 * Unlike {@link #parts} object, it stays unchanged throughout the widget lifecycle
+		 * and is used in {@link #refreshParts} method.
+		 *
+		 * @readonly
+		 * @property {Object} partSelectors
+		 * @since 4.14.0
+		 */
+
 		/**
 		 * The template which will be used to create a new widget element (when the widget's command is executed).
 		 * It will be populated with {@link #defaults default values}.
@@ -1421,18 +1433,25 @@
 		},
 
 		/**
-		 * Refreshes widget's mask. Can be used together with {@link CKEDITOR.plugins.widget#refreshParts} method to reinitialize mask
+		 * Refreshes widget's mask. Can be used together with {@link #refreshParts} method to reinitialize mask
 		 * for dynamically created widgets.
+		 *
+		 * @since 4.14.0
 		 */
 		refreshMask: function() {
 			setupMask( this );
 		},
 
 		/**
-		 * Reinitializes widget's {@link CKEDITOR.plugins.widget#parts parts}.
+		 * Reinitializes widget's {@link #parts}. This method can be used to link new DOM elements to parts,
+		 * e.g. in the case when widget's HTML is created asynchronously or modified during widget lifecycle.
+		 *
+		 * @since 4.14.0
+		 * @param {Boolean} [refreshInitialized=false] A flag telling if parts that are already initialized should be reinitialized.
 		 */
-		refreshParts: function() {
-			setupParts( this );
+		refreshParts: function( refreshInitialized ) {
+			refreshInitialized = refreshInitialized || false;
+			setupParts( this, refreshInitialized );
 		},
 
 		/**
@@ -3613,7 +3632,7 @@
 	// partName => selector pairs
 	// with:
 	// partName => element pairs
-	function setupParts( widget, refreshInitialised ) {
+	function setupParts( widget, refreshInitialized ) {
 		if ( !widget.partSelectors ) {
 			widget.partSelectors = widget.parts;
 		}
@@ -3624,7 +3643,7 @@
 				partName;
 
 			for ( partName in widget.partSelectors ) {
-				if ( refreshInitialised || !widget.parts[ partName ] || typeof widget.parts[ partName ] == 'string' ) {
+				if ( refreshInitialized || !widget.parts[ partName ] || typeof widget.parts[ partName ] == 'string' ) {
 					el = widget.wrapper.findOne( widget.partSelectors[ partName ] );
 					parts[ partName ] = el;
 				} else {

From 5005b928feb66a7c47689239834b98247f53e24c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Sat, 15 Feb 2020 21:24:34 +0100
Subject: [PATCH 15/23] Add reference about refreshing manually created widget
 parts.

---
 plugins/widget/plugin.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index b70775d299e..b87c220a0d2 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -1443,8 +1443,11 @@
 		},
 
 		/**
-		 * Reinitializes widget's {@link #parts}. This method can be used to link new DOM elements to parts,
-		 * e.g. in the case when widget's HTML is created asynchronously or modified during widget lifecycle.
+		 * Reinitializes widget's {@link #parts}.
+		 *
+		 * This method can be used to link new DOM elements to parts, * e.g. in the case when widget's HTML is created
+		 * asynchronously or modified during widget lifecycle. Note that it uses {@link #partSelectors }, so it doesn't
+		 * refresh parts that were created manually.
 		 *
 		 * @since 4.14.0
 		 * @param {Boolean} [refreshInitialized=false] A flag telling if parts that are already initialized should be reinitialized.

From bf00974962a4d8a89f33579bba058802074f4b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Mon, 17 Feb 2020 09:57:57 +0100
Subject: [PATCH 16/23] Change default value for 'refresgInitialized' flag.

---
 plugins/widget/plugin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index b87c220a0d2..dfbc56434cd 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -1446,11 +1446,11 @@
 		 * Reinitializes widget's {@link #parts}.
 		 *
 		 * This method can be used to link new DOM elements to parts, * e.g. in the case when widget's HTML is created
-		 * asynchronously or modified during widget lifecycle. Note that it uses {@link #partSelectors }, so it doesn't
+		 * asynchronously or modified during widget lifecycle. Note that it uses {@link #partSelectors } object, so it doesn't
 		 * refresh parts that were created manually.
 		 *
 		 * @since 4.14.0
-		 * @param {Boolean} [refreshInitialized=false] A flag telling if parts that are already initialized should be reinitialized.
+		 * @param {Boolean} [refreshInitialized=true] A flag telling if parts that are already initialized should be reinitialized.
 		 */
 		refreshParts: function( refreshInitialized ) {
 			refreshInitialized = refreshInitialized || false;

From 9cf4de0922777a18c044760817840eb1ff49ce9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= <k.krzton@cksource.com>
Date: Tue, 18 Feb 2020 09:24:30 +0100
Subject: [PATCH 17/23] Minor rewording. [skip ci]

---
 plugins/widget/plugin.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index dfbc56434cd..7d9143fdaf5 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -986,14 +986,14 @@
 		 *
 		 * For every `partName => selector` pair in {@link CKEDITOR.plugins.widget.definition#parts},
 		 * one `partName => element` pair is added to this object during the widget initialization.
-		 * Parts can be reinitialized via {@link #refreshParts} method.
+		 * Parts can be reinitialized with {@link #refreshParts} method.
 		 *
 		 * @readonly
 		 * @property {Object} parts
 		 */
 
 		/**
-		 * An object containing definitions of widget components (`part name => CSS selector`).
+		 * An object containing definitions of widget parts (`part name => CSS selector`).
 		 *
 		 * Unlike {@link #parts} object, it stays unchanged throughout the widget lifecycle
 		 * and is used in {@link #refreshParts} method.
@@ -1445,12 +1445,12 @@
 		/**
 		 * Reinitializes widget's {@link #parts}.
 		 *
-		 * This method can be used to link new DOM elements to parts, * e.g. in the case when widget's HTML is created
-		 * asynchronously or modified during widget lifecycle. Note that it uses {@link #partSelectors } object, so it doesn't
+		 * This method can be used to link new DOM elements to widget parts, for example in case when widget's HTML is created
+		 * asynchronously or modified during widget lifecycle. Note that it uses {@link #partSelectors} object, so it doesn't
 		 * refresh parts that were created manually.
 		 *
 		 * @since 4.14.0
-		 * @param {Boolean} [refreshInitialized=true] A flag telling if parts that are already initialized should be reinitialized.
+		 * @param {Boolean} [refreshInitialized=true] Whether parts that are already initialized should be reinitialized.
 		 */
 		refreshParts: function( refreshInitialized ) {
 			refreshInitialized = refreshInitialized || false;

From a53f57cc124eb77b5e2822bf712e6197af09bb77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= <k.krzton@cksource.com>
Date: Tue, 18 Feb 2020 10:09:14 +0100
Subject: [PATCH 18/23] Tests: Manual scenario minor rewording. [skip ci]

---
 tests/plugins/widget/manual/refreshmaskapi.html |  2 +-
 tests/plugins/widget/manual/refreshmaskapi.md   | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/plugins/widget/manual/refreshmaskapi.html b/tests/plugins/widget/manual/refreshmaskapi.html
index 0358dd51f52..8cd8f7af1d1 100644
--- a/tests/plugins/widget/manual/refreshmaskapi.html
+++ b/tests/plugins/widget/manual/refreshmaskapi.html
@@ -9,7 +9,7 @@
 	<button id="refresh-parts">Refresh widget parts</button>
 </div>
 <div>
-	<button id="refresh-mask">Refresh mask</button>
+	<button id="refresh-mask">Refresh widget mask</button>
 </div>
 
 <script>
diff --git a/tests/plugins/widget/manual/refreshmaskapi.md b/tests/plugins/widget/manual/refreshmaskapi.md
index d625f3369e6..7857d09b418 100644
--- a/tests/plugins/widget/manual/refreshmaskapi.md
+++ b/tests/plugins/widget/manual/refreshmaskapi.md
@@ -5,7 +5,7 @@
 **Note:** Mask has a red border so it's positioning is visible without inspecting mask element,
 but still keep the console opened and watch out for errors.
 
-1. Click `Refresh mask` button below editor.
+1. Click `Refresh widget mask` button below editor.
 
   **Expected:**
 
@@ -15,7 +15,7 @@ but still keep the console opened and watch out for errors.
 
   Error was thrown.
 
-1. Click `Add missing HTML` button below editor.
+1. Click `Add missing widget HTML` button below editor.
 
   **Expected:**
 
@@ -25,7 +25,7 @@ but still keep the console opened and watch out for errors.
 
   Second row didn't appear.
 
-1. Click `Refresh mask` button below editor.
+1. Click `Refresh widget mask` button below editor.
 
   **Expected:**
 
@@ -35,9 +35,9 @@ but still keep the console opened and watch out for errors.
 
   Error was thrown.
 
-1. Click `Refresh parts` button below editor.
+1. Click `Refresh widget parts` button below editor.
 
-1. Click `Refresh mask` button below editor.
+1. Click `Refresh widget mask` button below editor.
 
   **Expected:**
 

From e04e65f9aebf6cbe57d4ea11fa6a8ea579f284a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Tue, 18 Feb 2020 12:28:30 +0100
Subject: [PATCH 19/23] Change REAL default value for flag.

---
 plugins/widget/plugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
index 7d9143fdaf5..b6c24ae2d9d 100644
--- a/plugins/widget/plugin.js
+++ b/plugins/widget/plugin.js
@@ -1453,7 +1453,7 @@
 		 * @param {Boolean} [refreshInitialized=true] Whether parts that are already initialized should be reinitialized.
 		 */
 		refreshParts: function( refreshInitialized ) {
-			refreshInitialized = refreshInitialized || false;
+			refreshInitialized = typeof refreshInitialized !== 'undefined' ? refreshInitialized : true;
 			setupParts( this, refreshInitialized );
 		},
 

From c890c353d75c05db209f8dbe27fc1d9eb5949414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Tue, 18 Feb 2020 12:46:18 +0100
Subject: [PATCH 20/23] Add unit test for refreshParts() method.

---
 tests/plugins/widget/definition.js | 60 ++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/tests/plugins/widget/definition.js b/tests/plugins/widget/definition.js
index 4c2968a7308..3bbfa71aaf2 100644
--- a/tests/plugins/widget/definition.js
+++ b/tests/plugins/widget/definition.js
@@ -417,6 +417,66 @@
 			} );
 		},
 
+		'test parts refresh': function() {
+			var editor = this.editor,
+				bot = this.editorBot;
+
+			var widgetDef = {
+				parts: {
+					first: '.first',
+					second: '.second',
+					third: '.third'
+				}
+			};
+
+			editor.widgets.add( 'testparts2', widgetDef );
+
+			bot.setData( '<div data-widget="testparts2" id="w"><p class="first">Hello</p><p class="third">!</p></div>', function() {
+				var missingPart = CKEDITOR.dom.element.createFromHtml( '<p class="second">World</p>' ),
+					widget = getWidgetById( editor, 'w' );
+
+				assert.areEqual( 2, widget.element.getChildCount(), 'Middle part of widget should be missing.' );
+				assert.areEqual( widget.parts.second, null, 'Middle part of widget should be missing.' );
+
+				missingPart.insertAfter( widget.wrapper.findOne( '.first' ) );
+
+				widget.refreshParts();
+
+				assert.areEqual( 3, widget.element.getChildCount(), 'Middle part of widget should be inserted.' );
+				assert.areEqual( widget.parts.second, missingPart, 'Middle part of widget should be inserted.' );
+			} );
+		},
+
+		'test parts refresh flag': function() {
+			var editor = this.editor,
+				bot = this.editorBot;
+
+			var widgetDef = {
+				parts: {
+					first: '.first',
+					second: '.second'
+				}
+			};
+
+			editor.widgets.add( 'testparts2', widgetDef );
+
+			bot.setData( '<div data-widget="testparts2" id="w"><p class="first">Hello</p><p class="second">World!</p></div>', function() {
+				var widget = getWidgetById( editor, 'w' ),
+					partToRefresh = CKEDITOR.dom.element.createFromHtml( '<p class="second">World!</p>' );
+
+				widget.wrapper.findOne( '.second' ).remove();
+				partToRefresh.insertAfter( widget.element.findOne( '.first' ) );
+
+				widget.refreshParts( false );
+
+				assert.areEqual( widget.parts.second.getParent(), null, 'Deleted widget part should not be reinitialized.' );
+
+				widget.refreshParts();
+
+				assert.areEqual( widget.parts.second.getParent(), widget.element, 'Deleted widget part should be reinitialized.' );
+			} );
+		},
+
 		'test defined dialog name': function() {
 			var editor = this.editor;
 

From ef3b3f0a017bc5b49f4e2827d72b1451098838df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Tue, 18 Feb 2020 12:48:20 +0100
Subject: [PATCH 21/23] Add ticket references to unit tests.

---
 tests/plugins/widget/definition.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/plugins/widget/definition.js b/tests/plugins/widget/definition.js
index 3bbfa71aaf2..814f8c5b99f 100644
--- a/tests/plugins/widget/definition.js
+++ b/tests/plugins/widget/definition.js
@@ -417,6 +417,7 @@
 			} );
 		},
 
+		// (#3775)
 		'test parts refresh': function() {
 			var editor = this.editor,
 				bot = this.editorBot;
@@ -447,6 +448,7 @@
 			} );
 		},
 
+		// (#3775)
 		'test parts refresh flag': function() {
 			var editor = this.editor,
 				bot = this.editorBot;

From 6f8abf6d34cb0664e23273f4fdcdfbedbb01b037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dariusz=20Jarze=CC=A8bski?= <d.jarzebski@cksource.com>
Date: Tue, 18 Feb 2020 13:32:13 +0100
Subject: [PATCH 22/23] Rename existing test and create new as a replacement.

---
 tests/plugins/widget/refreshmaskapi.js      | 28 +++-----
 tests/plugins/widget/refreshpartsandmask.js | 76 +++++++++++++++++++++
 2 files changed, 85 insertions(+), 19 deletions(-)
 create mode 100644 tests/plugins/widget/refreshpartsandmask.js

diff --git a/tests/plugins/widget/refreshmaskapi.js b/tests/plugins/widget/refreshmaskapi.js
index 94e265aafb7..1b2eba608db 100644
--- a/tests/plugins/widget/refreshmaskapi.js
+++ b/tests/plugins/widget/refreshmaskapi.js
@@ -6,12 +6,7 @@
 
 	bender.editor = {
 		config: {
-			allowedContent: true,
-			on: {
-				instanceReady: function( evt ) {
-					evt.editor.dataProcessor.writer.sortAttributes = 1;
-				}
-			}
+			allowedContent: true
 		}
 	};
 
@@ -41,33 +36,28 @@
 			editor.widgets.add( 'testPartialMask', widgetDef );
 
 			this.editorBot.setData( '<div data-widget="testPartialMask" id="widget">' +
-				'<p id="foo">foo</p><p id="bar">bar</p></div>',
+				'<p id="foo">foo</p><p id="bar">bar</p><p class="cksource">cksource</p></div>',
 				function() {
-					var div = new CKEDITOR.dom.element( 'div' ),
-						element = editor.document.getById( 'widget' ),
+					var element = editor.document.getById( 'widget' ),
 						widget = editor.widgets.getByElement( element ),
 						firstEditable = editor.document.$.elementFromPoint( 40, 30 ),
 						secondEditable = editor.document.$.elementFromPoint( 40, 60 ),
 						thirdEditable;
 
-					assert.areEqual( null, widget.parts.cksource, 'Part should be null.' );
+					assert.isNull( widget.wrapper.findOne( '.cke_widget_mask' ), 'Complete mask was created instead of partial.' );
+					assert.isInstanceOf( CKEDITOR.dom.element, widget.wrapper.findOne( '.cke_widget_partial_mask' ), 'Mask element was not found.' );
 
-					div.setText( 'cksource' );
-					div.addClass( 'cksource' );
-					widget.element.append( div );
-					widget.refreshParts();
+					widget.wrapper.findOne( '.cke_widget_partial_mask' ).remove();
 
-					assert.isInstanceOf( CKEDITOR.dom.element, widget.parts.cksource, 'Part should already be an element instance.' );
+					assert.isNull( widget.wrapper.findOne( '.cke_widget_partial_mask' ), 'Mask wasn\t removed.' );
 
 					widget.refreshMask();
 
-					assert.isNull( widget.wrapper.findOne( '.cke_widget_mask' ), 'Complete mask was created instead of partial.' );
-					assert.isInstanceOf( CKEDITOR.dom.element, widget.wrapper.findOne( '.cke_widget_partial_mask' ), 'Mask element was not found.' );
+					thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
+
 					assert.areSame( 'foo', firstEditable.innerText, 'Mask covers the first editable instead of the third.' );
 					assert.areSame( 'bar', secondEditable.innerText, 'Mask covers the second editable instead of the third.' );
 
-					thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
-
 					// IE8 is just IE8. It needs to do the same again (as for the first time it returns null).
 					if ( CKEDITOR.env.ie && CKEDITOR.env.version <= 8 ) {
 						thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
diff --git a/tests/plugins/widget/refreshpartsandmask.js b/tests/plugins/widget/refreshpartsandmask.js
new file mode 100644
index 00000000000..a13740bffe1
--- /dev/null
+++ b/tests/plugins/widget/refreshpartsandmask.js
@@ -0,0 +1,76 @@
+/* bender-tags: widget, 3775 */
+/* bender-ckeditor-plugins: widget,undo */
+
+( function() {
+	'use strict';
+
+	bender.editor = {
+		config: {
+			allowedContent: true
+		}
+	};
+
+	bender.test( {
+		// This test needs to always be the first in the suite because it uses 'elementFromPoint()' method
+		// which on IE breaks if there is any message about earlier tests displayed.
+		'test partial mask refresh': function() {
+			CKEDITOR.addCss( '.left { float: left; width: 200px; } .right { float: right; width: 200px; } .cke_widget_partial_mask { border: 1px solid red };' );
+			var editor = this.editor;
+
+			var widgetDef = {
+				mask: 'cksource',
+
+				parts: {
+					foo: '#foo',
+					bar: '#bar',
+					cksource: '.cksource'
+				},
+
+				editables: {
+					editable1: '#foo',
+					editable2: '#bar',
+					editable3: '.cksource'
+				}
+			};
+
+			editor.widgets.add( 'testPartialMask', widgetDef );
+
+			this.editorBot.setData( '<div data-widget="testPartialMask" id="widget">' +
+				'<p id="foo">foo</p><p id="bar">bar</p></div>',
+				function() {
+					var div = new CKEDITOR.dom.element( 'div' ),
+						element = editor.document.getById( 'widget' ),
+						widget = editor.widgets.getByElement( element ),
+						firstEditable = editor.document.$.elementFromPoint( 40, 30 ),
+						secondEditable = editor.document.$.elementFromPoint( 40, 60 ),
+						thirdEditable;
+
+					assert.areEqual( null, widget.parts.cksource, 'Part should be null.' );
+
+					div.setText( 'cksource' );
+					div.addClass( 'cksource' );
+					widget.element.append( div );
+					widget.refreshParts();
+
+					assert.isInstanceOf( CKEDITOR.dom.element, widget.parts.cksource, 'Part should already be an element instance.' );
+
+					widget.refreshMask();
+
+					assert.isNull( widget.wrapper.findOne( '.cke_widget_mask' ), 'Complete mask was created instead of partial.' );
+					assert.isInstanceOf( CKEDITOR.dom.element, widget.wrapper.findOne( '.cke_widget_partial_mask' ), 'Mask element was not found.' );
+					assert.areSame( 'foo', firstEditable.innerText, 'Mask covers the first editable instead of the third.' );
+					assert.areSame( 'bar', secondEditable.innerText, 'Mask covers the second editable instead of the third.' );
+
+					thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
+
+					// IE8 is just IE8. It needs to do the same again (as for the first time it returns null).
+					if ( CKEDITOR.env.ie && CKEDITOR.env.version <= 8 ) {
+						thirdEditable = editor.document.$.elementFromPoint( 40, 90 );
+					}
+
+					assert.areSame( '', thirdEditable.innerText, 'Mask doesn\'t cover the third editable.' );
+				}
+			);
+		}
+	} );
+} )();

From 16577ac47e76942a545115d99ac0d338b539a438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= <k.krzton@cksource.com>
Date: Tue, 18 Feb 2020 15:31:47 +0100
Subject: [PATCH 23/23] Changelog entry.

---
 CHANGES.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGES.md b/CHANGES.md
index 5979a3f3a49..7d1bb994483 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -28,6 +28,7 @@ API Changes:
 * [#3727](https://github.com/ckeditor/ckeditor4/issues/3727): Added new commands `textColor` and `bgColor` which applies the selected color choosen by the [Color Button](https://ckeditor.com/cke4/addon/colorbutton) plugin.
 * [#3728](https://github.com/ckeditor/ckeditor4/issues/3728): Added new commands `font` and `fontSize` which applies the selected font style choosen by the [Font](https://ckeditor.com/cke4/addon/colorbutton) plugin.
 * [#3842](https://github.com/ckeditor/ckeditor4/issues/3842): Added [`editor.getSelectedRanges`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-getSelectedRanges) alias.
+* [#3775](https://github.com/ckeditor/ckeditor4/issues/3775): Widget [mask](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_widget.html#property-mask) and [parts](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_widget.html#property-parts) can now be refreshed dynamically via API calls.
 
 ## CKEditor 4.13.1