[Libreoffice-commits] online.git: 2 commits - cypress_test/integration_tests cypress_test/package.json loleaflet/src

Tamás Zolnai (via logerrit) logerrit at kemper.freedesktop.org
Wed Jul 8 15:00:42 UTC 2020


 cypress_test/integration_tests/common/helper.js                                 |   94 +++++++
 cypress_test/integration_tests/common/mobile_helper.js                          |    6 
 cypress_test/integration_tests/mobile/calc/alignment_options_spec.js            |   61 +---
 cypress_test/integration_tests/mobile/calc/apply_font_spec.js                   |   48 +--
 cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js                |    3 
 cypress_test/integration_tests/mobile/calc/cell_appearance_spec.js              |   52 +--
 cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js               |   15 -
 cypress_test/integration_tests/mobile/calc/number_format_spec.js                |   41 ---
 cypress_test/integration_tests/mobile/impress/apply_font_spec.js                |  111 ++------
 cypress_test/integration_tests/mobile/impress/apply_paragraph_props_spec.js     |   91 ++----
 cypress_test/integration_tests/mobile/impress/slide_properties_spec.js          |  132 +++-------
 cypress_test/integration_tests/mobile/writer/apply_font_spec.js                 |   70 +----
 cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js |  105 ++-----
 cypress_test/integration_tests/mobile/writer/focus_spec.js                      |   11 
 cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js             |   31 --
 cypress_test/integration_tests/mobile/writer/shape_properties_spec.js           |   55 +---
 cypress_test/integration_tests/mobile/writer/table_properties_spec.js           |   53 +---
 cypress_test/package.json                                                       |    1 
 loleaflet/src/control/Control.MobileWizard.js                                   |   12 
 loleaflet/src/layer/marker/Marker.js                                            |   81 +++++-
 20 files changed, 460 insertions(+), 613 deletions(-)

New commits:
commit b15f641297b44edc6e8dece4b61fd378a5170f76
Author:     Tamás Zolnai <tamas.zolnai at collabora.com>
AuthorDate: Tue Jul 7 12:28:33 2020 +0200
Commit:     Tamás Zolnai <tamas.zolnai at collabora.com>
CommitDate: Wed Jul 8 17:00:27 2020 +0200

    cypress: introduce clickOnIdle() and inputOnIdle() methods.
    
    This method waits until the item is idle,
    e.g. not detached for a while. Using this we can
    workaround false failures caused by GUI flickering.
    For example, mobile wizard is updated all the time
    which makes hard to test it reliably. We can use
    this clickOnIdle() method, which is slower than the
    simple click(), but is more reliable.
    
    Change-Id: I2f970eb0cf400382c8384c91ab7c84b1e02e63af
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98373
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Tamás Zolnai <tamas.zolnai at collabora.com>

diff --git a/cypress_test/integration_tests/common/helper.js b/cypress_test/integration_tests/common/helper.js
index baafe49fb..e23a9b40f 100644
--- a/cypress_test/integration_tests/common/helper.js
+++ b/cypress_test/integration_tests/common/helper.js
@@ -1,4 +1,6 @@
-/* global cy Cypress expect */
+/* global cy Cypress expect require */
+
+require('cypress-wait-until');
 
 function loadTestDoc(fileName, subFolder, mobile) {
 	cy.log('Loading test document - start.');
@@ -296,6 +298,94 @@ function imageShouldBeFullWhiteOrNot(selector, fullWhite = true) {
 		});
 }
 
+function waitUntilIdle(selector, content) {
+	cy.log('Waiting item to be idle - start.');
+
+	var item;
+	var waitingTime = 1000;
+	if (content) {
+		cy.contains(selector, content, { log: false })
+			.then(function(itemToIdle) {
+				item = itemToIdle;
+			});
+
+		cy.waitUntil(function() {
+			cy.wait(waitingTime);
+
+			return cy.contains(selector, content, { log: false })
+				.then(function(itemToIdle) {
+					if (Cypress.dom.isDetached(item[0])) {
+						cy.log('Item is detached.');
+						item = itemToIdle;
+						return false;
+					} else {
+						return true;
+					}
+				});
+		});
+	} else {
+		cy.get(selector, { log: false })
+			.then(function(itemToIdle) {
+				item = itemToIdle;
+			});
+
+		cy.waitUntil(function() {
+			cy.wait(waitingTime);
+
+			return cy.get(selector, { log: false })
+				.then(function(itemToIdle) {
+					if (Cypress.dom.isDetached(item[0])) {
+						cy.log('Item is detached.');
+						item = itemToIdle;
+						return false;
+					} else {
+						return true;
+					}
+				});
+		});
+	}
+
+	cy.log('Waiting item to be idle - end.');
+}
+
+// This is a workaround for avoid 'item detached from DOM'
+// failures caused by GUI flickering.
+// GUI flickering might mean bad design, but
+// until it's fixed we can use this method.
+// Known GUI flickering:
+// * mobile wizard
+// IMPORTANT: don't use this if there is no
+// flickering. Use simple click() instead. This method
+// is much slower.
+function clickOnIdle(selector, content) {
+	cy.log('Clicking on item when idle - start.');
+
+	waitUntilIdle(selector, content);
+	if (content) {
+		cy.contains(selector, content)
+			.click();
+	} else {
+		cy.get(selector)
+			.click();
+	}
+
+	cy.log('Clicking on item when idle - end.');
+}
+
+// See comments at clickOnIdle() method.
+function inputOnIdle(selector, input) {
+	cy.log('Type into an input item when idle - start.');
+
+	waitUntilIdle(selector);
+
+	cy.get(selector)
+		.clear()
+		.type(input)
+		.type('{enter}');
+
+	cy.log('Type into an input item when idle - end.');
+}
+
 module.exports.loadTestDoc = loadTestDoc;
 module.exports.assertCursorAndFocus = assertCursorAndFocus;
 module.exports.assertNoKeyboardInput = assertNoKeyboardInput;
@@ -314,3 +404,5 @@ module.exports.beforeAllDesktop = beforeAllDesktop;
 module.exports.typeText = typeText;
 module.exports.getLOVersion = getLOVersion;
 module.exports.imageShouldBeFullWhiteOrNot = imageShouldBeFullWhiteOrNot;
+module.exports.clickOnIdle = clickOnIdle;
+module.exports.inputOnIdle = inputOnIdle;
diff --git a/cypress_test/integration_tests/common/mobile_helper.js b/cypress_test/integration_tests/common/mobile_helper.js
index 054a87d41..b14113d02 100644
--- a/cypress_test/integration_tests/common/mobile_helper.js
+++ b/cypress_test/integration_tests/common/mobile_helper.js
@@ -114,12 +114,6 @@ function openMobileWizard() {
 	cy.get('#tb_actionbar_item_mobile_wizard table')
 		.should('have.class', 'checked');
 
-	// Mobile wizard is requested twice on opening
-	// The second request is sent after a 400 ms delay
-	// see _refreshSidebar() method. So let's just wait
-	// until mobile wizard gets it's final state.
-	cy.wait(1500);
-
 	cy.log('Opening mobile wizard - end.');
 }
 
diff --git a/cypress_test/integration_tests/mobile/calc/alignment_options_spec.js b/cypress_test/integration_tests/mobile/calc/alignment_options_spec.js
index 4ed008fe4..344ef8a36 100644
--- a/cypress_test/integration_tests/mobile/calc/alignment_options_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/alignment_options_spec.js
@@ -44,8 +44,7 @@ describe('Change alignment settings.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ScAlignmentPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScAlignmentPropertyPanel');
 
 		cy.get('#AlignLeft')
 			.should('be.visible');
@@ -55,8 +54,7 @@ describe('Change alignment settings.', function() {
 		openAlignmentPaneForFirstCell();
 
 		// Set right aligment first
-		cy.get('#AlignRight')
-			.click();
+		helper.clickOnIdle('#AlignRight');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -68,11 +66,9 @@ describe('Change alignment settings.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ScAlignmentPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScAlignmentPropertyPanel');
 
-		cy.get('#AlignLeft')
-			.click();
+		helper.clickOnIdle('#AlignLeft');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -83,8 +79,7 @@ describe('Change alignment settings.', function() {
 	it('Align to center horizontally.', function() {
 		openAlignmentPaneForFirstCell();
 
-		cy.get('#AlignHorizontalCenter')
-			.click();
+		helper.clickOnIdle('#AlignHorizontalCenter');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -95,8 +90,7 @@ describe('Change alignment settings.', function() {
 	it('Change to block alignment.', function() {
 		openAlignmentPaneForFirstCell();
 
-		cy.get('#AlignBlock')
-			.click();
+		helper.clickOnIdle('#AlignBlock');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -107,16 +101,13 @@ describe('Change alignment settings.', function() {
 	it('Right-to-left and left-to-right writing mode.', function() {
 		openAlignmentPaneForFirstCell();
 
-		cy.get('#ParaRightToLeft')
-			.click();
+		helper.clickOnIdle('#ParaRightToLeft');
 
 		// TODO: we don't have a way of testing this
 		// copy container doesn't have info about this
 		cy.wait(500);
 
-		// Set right aligment first
-		cy.get('#ParaLeftToRight')
-			.click();
+		helper.clickOnIdle('#ParaLeftToRight');
 
 		cy.wait(500);
 	});
@@ -124,8 +115,7 @@ describe('Change alignment settings.', function() {
 	it('Align to the top and to bottom.', function() {
 		openAlignmentPaneForFirstCell();
 
-		cy.get('#AlignTop')
-			.click();
+		helper.clickOnIdle('#AlignTop');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -137,11 +127,9 @@ describe('Change alignment settings.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ScAlignmentPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScAlignmentPropertyPanel');
 
-		cy.get('#AlignBottom')
-			.click();
+		helper.clickOnIdle('#AlignBottom');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -152,8 +140,7 @@ describe('Change alignment settings.', function() {
 	it('Align to center vertically.', function() {
 		openAlignmentPaneForFirstCell();
 
-		cy.get('#AlignVCenter')
-			.click();
+		helper.clickOnIdle('#AlignVCenter');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -175,8 +162,7 @@ describe('Change alignment settings.', function() {
 		openAlignmentPaneForFirstCell();
 
 		// Increase indent
-		cy.get('#IncrementIndent')
-			.click();
+		helper.clickOnIdle('#IncrementIndent');
 
 		// We use the text position as indicator
 		cy.get('body')
@@ -203,8 +189,7 @@ describe('Change alignment settings.', function() {
 		// Decrease indent
 		openAlignmentPaneForFirstCell();
 
-		cy.get('#DecrementIndent')
-			.click();
+		helper.clickOnIdle('#DecrementIndent');
 
 		// We use the text position as indicator
 		cy.get('body')
@@ -235,13 +220,11 @@ describe('Change alignment settings.', function() {
 		openAlignmentPaneForFirstCell();
 
 		// TODO: First we need to increase indent to make the input enabled
-		cy.get('#IncrementIndent')
-			.click();
+		helper.clickOnIdle('#IncrementIndent');
 
 		cy.wait(300);
 
-		cy.get('#IncrementIndent')
-			.click();
+		helper.clickOnIdle('#IncrementIndent');
 
 		calcMobileHelper.removeTextSelection();
 
@@ -285,8 +268,7 @@ describe('Change alignment settings.', function() {
 		cy.get('input#wraptext')
 			.should('not.have.prop', 'checked', true);
 
-		cy.get('input#wraptext')
-			.click();
+		helper.clickOnIdle('input#wraptext');
 
 		cy.get('input#wraptext')
 			.should('have.prop', 'checked', true);
@@ -312,8 +294,7 @@ describe('Change alignment settings.', function() {
 		cy.get('input#stacked')
 			.should('not.have.prop', 'checked', true);
 
-		cy.get('input#stacked')
-			.click();
+		helper.clickOnIdle('input#stacked');
 
 		cy.get('input#stacked')
 			.should('have.prop', 'checked', true);
@@ -333,8 +314,7 @@ describe('Change alignment settings.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ScAlignmentPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScAlignmentPropertyPanel');
 
 		cy.get('#AlignLeft')
 			.should('be.visible');
@@ -346,8 +326,7 @@ describe('Change alignment settings.', function() {
 		cy.get('input#mergecells')
 			.should('not.have.prop', 'checked', true);
 
-		cy.get('input#mergecells')
-			.click();
+		helper.clickOnIdle('input#mergecells');
 
 		cy.get('input#mergecells')
 			.should('have.prop', 'checked', true);
diff --git a/cypress_test/integration_tests/mobile/calc/apply_font_spec.js b/cypress_test/integration_tests/mobile/calc/apply_font_spec.js
index dbe8766bf..3f717edb3 100644
--- a/cypress_test/integration_tests/mobile/calc/apply_font_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/apply_font_spec.js
@@ -23,8 +23,7 @@ describe('Apply font changes.', function() {
 		mobileHelper.openMobileWizard();
 
 		// Open character properties
-		cy.get('#TextPropertyPanel')
-			.click();
+		helper.clickOnIdle('#TextPropertyPanel');
 
 		cy.get('#Bold')
 			.should('be.visible');
@@ -35,8 +34,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply bold.', function() {
-		cy.get('#Bold')
-			.click();
+		helper.clickOnIdle('#Bold');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -45,8 +43,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply italic.', function() {
-		cy.get('#Italic')
-			.click();
+		helper.clickOnIdle('#Italic');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -55,8 +52,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply underline.', function() {
-		cy.get('#Underline')
-			.click();
+		helper.clickOnIdle('#Underline');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -65,8 +61,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply strikeout.', function() {
-		cy.get('#Strikeout')
-			.click();
+		helper.clickOnIdle('#Strikeout');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -75,8 +70,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply shadowed.', function() {
-		cy.get('#Shadowed')
-			.click();
+		helper.clickOnIdle('#Shadowed');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -85,17 +79,14 @@ describe('Apply font changes.', function() {
 
 	it('Apply font name.', function() {
 		// Change font name
-		cy.get('#fontnamecombobox')
-			.click();
+		helper.clickOnIdle('#fontnamecombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', 'Linux Libertine G')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', 'Linux Libertine G');
 
 		cy.get('.level-1[title="Font Name"] .mobile-wizard.ui-combobox-text.selected')
 			.should('have.text', 'Linux Libertine G');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		// Combobox entry contains the selected font name
 		cy.get('#fontnamecombobox .ui-header-right .entry-value')
@@ -109,11 +100,9 @@ describe('Apply font changes.', function() {
 
 	it('Apply font size.', function() {
 		// Change font size
-		cy.get('#fontsizecombobox')
-			.click();
+		helper.clickOnIdle('#fontsizecombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', '14')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', '14');
 
 		if (helper.getLOVersion() === 'master')
 			cy.get('.level-1[title="Font Size"] .mobile-wizard.ui-combobox-text.selected')
@@ -122,8 +111,7 @@ describe('Apply font changes.', function() {
 			cy.get('.level-1[title="Font Size"] .mobile-wizard.ui-combobox-text.selected')
 				.should('have.text', '14');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		// Combobox entry contains the selected font name
 		cy.get('#fontsizecombobox .ui-header-right .entry-value')
@@ -136,9 +124,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply grow.', function() {
-		// Push grow
-		cy.get('#Grow')
-			.click();
+		helper.clickOnIdle('#Grow');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -147,9 +133,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply shrink.', function() {
-		// Push shrink
-		cy.get('#Shrink')
-			.click();
+		helper.clickOnIdle('#Shrink');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -158,9 +142,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply font color.', function() {
-		// Change font color
-		cy.get('#Color')
-			.click();
+		helper.clickOnIdle('#Color');
 
 		mobileHelper.selectFromColorPalette(0, 5);
 
diff --git a/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js b/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js
index ab21e53a2..229c0be18 100644
--- a/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js
+++ b/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js
@@ -20,9 +20,6 @@ function removeTextSelection() {
 		cy.get('.spreadsheet-cell-resize-marker')
 			.invoke('attr', 'style')
 			.should('contain', '-8px,');
-
-		cy.get('input#addressInput')
-			.should('have.prop', 'value', 'B1:B1048576');
 	}
 
 	cy.log('Removing text selection - end.');
diff --git a/cypress_test/integration_tests/mobile/calc/cell_appearance_spec.js b/cypress_test/integration_tests/mobile/calc/cell_appearance_spec.js
index 3ca11f1ff..b28013450 100644
--- a/cypress_test/integration_tests/mobile/calc/cell_appearance_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/cell_appearance_spec.js
@@ -22,8 +22,7 @@ describe('Change cell appearance.', function() {
 	function openAppearencePanel() {
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ScCellAppearancePropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScCellAppearancePropertyPanel');
 
 		cy.contains('.menu-entry-with-icon', 'Background Color')
 			.should('be.visible');
@@ -44,9 +43,7 @@ describe('Change cell appearance.', function() {
 	it('Apply background color', function() {
 		openAppearencePanelOnFirtsCell();
 
-		// Select a new color
-		cy.get('#BackgroundColor')
-			.click();
+		helper.clickOnIdle('#BackgroundColor');
 
 		mobileHelper.selectFromColorPalette(1, 2);
 
@@ -63,8 +60,7 @@ describe('Change cell appearance.', function() {
 	it('Apply left border', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-2')
-			.click();
+		helper.clickOnIdle('#border-2');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -76,8 +72,7 @@ describe('Change cell appearance.', function() {
 		openAppearencePanelOnFirtsCell();
 
 		// First add left border
-		cy.get('#border-2')
-			.click();
+		helper.clickOnIdle('#border-2');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -87,8 +82,7 @@ describe('Change cell appearance.', function() {
 		// Then remove it
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-1')
-			.click();
+		helper.clickOnIdle('#border-1');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -99,8 +93,7 @@ describe('Change cell appearance.', function() {
 	it('Apply right border', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-3')
-			.click();
+		helper.clickOnIdle('#border-3');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -111,8 +104,7 @@ describe('Change cell appearance.', function() {
 	it('Apply left and right border', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-4')
-			.click();
+		helper.clickOnIdle('#border-4');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -123,8 +115,7 @@ describe('Change cell appearance.', function() {
 	it('Apply top border', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-5')
-			.click();
+		helper.clickOnIdle('#border-5');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -135,8 +126,7 @@ describe('Change cell appearance.', function() {
 	it('Apply bottom border', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-6')
-			.click();
+		helper.clickOnIdle('#border-6');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -147,8 +137,7 @@ describe('Change cell appearance.', function() {
 	it('Apply top and bottom border', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-7')
-			.click();
+		helper.clickOnIdle('#border-7');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -159,8 +148,7 @@ describe('Change cell appearance.', function() {
 	it('Apply border for all sides', function() {
 		openAppearencePanelOnFirtsCell();
 
-		cy.get('#border-8')
-			.click();
+		helper.clickOnIdle('#border-8');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -171,8 +159,7 @@ describe('Change cell appearance.', function() {
 	it('Apply horizontal borders for multiple cells', function() {
 		openAppearencePanelOnAllCells();
 
-		cy.get('#border-9')
-			.click();
+		helper.clickOnIdle('#border-9');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -188,8 +175,7 @@ describe('Change cell appearance.', function() {
 	it('Apply horizontal inner borders and vertical outer borders', function() {
 		openAppearencePanelOnAllCells();
 
-		cy.get('#border-10')
-			.click();
+		helper.clickOnIdle('#border-10');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -212,8 +198,7 @@ describe('Change cell appearance.', function() {
 	it('Apply vertical inner borders and horizontal outer borders', function() {
 		openAppearencePanelOnAllCells();
 
-		cy.get('#border-11')
-			.click();
+		helper.clickOnIdle('#border-11');
 
 		// TODO
 		cy.wait(200);
@@ -239,8 +224,7 @@ describe('Change cell appearance.', function() {
 	it('Apply all inner and outer borders', function() {
 		openAppearencePanelOnAllCells();
 
-		cy.get('#border-12')
-			.click();
+		helper.clickOnIdle('#border-12');
 
 		calcMobileHelper.selectAllMobile();
 
@@ -264,12 +248,10 @@ describe('Change cell appearance.', function() {
 		openAppearencePanelOnFirtsCell();
 
 		// Apply left border first
-		cy.get('#border-2')
-			.click();
+		helper.clickOnIdle('#border-2');
 
 		// Then apply border color
-		cy.get('#FrameLineColor')
-			.click();
+		helper.clickOnIdle('#FrameLineColor');
 
 		mobileHelper.selectFromColorPalette(2, 3);
 
diff --git a/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js b/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js
index 7d631cc11..20f5fd986 100644
--- a/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js
@@ -866,17 +866,14 @@ describe('Trigger hamburger menu options.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ScCellAppearancePropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScCellAppearancePropertyPanel');
 
 		cy.contains('.menu-entry-with-icon', 'Background Color')
 			.should('be.visible');
 
-		cy.get('#border-12')
-			.click();
+		helper.clickOnIdle('#border-12');
 
-		cy.get('#FrameLineColor')
-			.click();
+		helper.clickOnIdle('#FrameLineColor');
 
 		mobileHelper.selectFromColorPalette(2, 0, 7);
 
@@ -884,14 +881,12 @@ describe('Trigger hamburger menu options.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#TextPropertyPanel')
-			.click();
+		helper.clickOnIdle('#TextPropertyPanel');
 
 		cy.get('#Bold')
 			.should('be.visible');
 
-		cy.get('#Color')
-			.click();
+		helper.clickOnIdle('#Color');
 
 		mobileHelper.selectFromColorPalette(0, 0, 7);
 
diff --git a/cypress_test/integration_tests/mobile/calc/number_format_spec.js b/cypress_test/integration_tests/mobile/calc/number_format_spec.js
index 1b2336068..ade1dea40 100644
--- a/cypress_test/integration_tests/mobile/calc/number_format_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/number_format_spec.js
@@ -21,9 +21,7 @@ describe('Apply number formatting.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		// Open character properties
-		cy.get('#ScNumberFormatPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScNumberFormatPropertyPanel');
 
 		cy.get('#numberformatcombobox')
 			.should('be.visible');
@@ -35,11 +33,9 @@ describe('Apply number formatting.', function() {
 
 	function selectFormatting(formattingString) {
 		// Select formatting list
-		cy.get('#numberformatcombobox')
-			.click();
+		helper.clickOnIdle('#numberformatcombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', formattingString)
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', formattingString);
 
 		// Combobox entry contains the selected format
 		cy.get('#numberformatcombobox .ui-header-left')
@@ -69,9 +65,7 @@ describe('Apply number formatting.', function() {
 	});
 
 	it('Push percent button.', function() {
-		// Change to percent
-		cy.get('#NumberFormatPercent')
-			.click();
+		helper.clickOnIdle('#NumberFormatPercent');
 
 		cy.get('#NumberFormatPercentimg')
 			.should('have.class', 'selected');
@@ -118,9 +112,7 @@ describe('Apply number formatting.', function() {
 	});
 
 	it('Push currency button.', function() {
-		// Change to currency
-		cy.get('#NumberFormatCurrency')
-			.click();
+		helper.clickOnIdle('#NumberFormatCurrency');
 
 		cy.get('#NumberFormatCurrencyimg')
 			.should('have.class', 'selected');
@@ -146,8 +138,7 @@ describe('Apply number formatting.', function() {
 
 	it('Push number button.', function() {
 		// Change to currency first
-		cy.get('#NumberFormatCurrency')
-			.click();
+		helper.clickOnIdle('#NumberFormatCurrency');
 
 		cy.get('#NumberFormatCurrencyimg')
 			.should('have.class', 'selected');
@@ -171,16 +162,13 @@ describe('Apply number formatting.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		// Open character properties
-		cy.get('#ScNumberFormatPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ScNumberFormatPropertyPanel');
 
 		cy.get('#NumberFormatDecimal')
 			.should('be.visible');
 
 		// Change to number formatting
-		cy.get('#NumberFormatDecimal')
-			.click();
+		helper.clickOnIdle('#NumberFormatDecimal');
 
 		cy.get('#NumberFormatDecimalimg')
 			.should('have.class', 'selected');
@@ -195,12 +183,9 @@ describe('Apply number formatting.', function() {
 	});
 
 	it('Select date format from list.', function() {
-		// Change to date
-		cy.get('#numberformatcombobox')
-			.click();
+		helper.clickOnIdle('#numberformatcombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', 'Date')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', 'Date');
 
 		// Combobox entry contains the selected format
 		cy.get('#numberformatcombobox .ui-header-left')
@@ -373,8 +358,7 @@ describe('Apply number formatting.', function() {
 			.should('not.have.prop', 'checked', true);
 
 		// Change the option
-		cy.get('#negativenumbersred input')
-			.click();
+		helper.clickOnIdle('#negativenumbersred input');
 
 		cy.get('#negativenumbersred input')
 			.should('have.prop', 'checked', true);
@@ -394,8 +378,7 @@ describe('Apply number formatting.', function() {
 			.should('not.have.prop', 'checked', true);
 
 		// Change the option
-		cy.get('#thousandseparator input')
-			.click();
+		helper.clickOnIdle('#thousandseparator input');
 
 		cy.get('#thousandseparator input')
 			.should('have.prop', 'checked', true);
diff --git a/cypress_test/integration_tests/mobile/impress/apply_font_spec.js b/cypress_test/integration_tests/mobile/impress/apply_font_spec.js
index 8412faef7..71c91b3be 100644
--- a/cypress_test/integration_tests/mobile/impress/apply_font_spec.js
+++ b/cypress_test/integration_tests/mobile/impress/apply_font_spec.js
@@ -26,8 +26,7 @@ describe('Apply font on text and on text shape.', function() {
 	function openTextPropertiesPanel() {
 		mobileHelper.openMobileWizard();
 
-		cy.get('#TextPropertyPanel')
-			.click();
+		helper.clickOnIdle('#TextPropertyPanel');
 
 		cy.get('.ui-content.level-0.mobile-wizard')
 			.should('be.visible');
@@ -36,8 +35,7 @@ describe('Apply font on text and on text shape.', function() {
 	it('Apply bold on text shape.', function() {
 		openTextPropertiesPanel();
 
-		cy.get('#Bold')
-			.click();
+		helper.clickOnIdle('#Bold');
 
 		triggerNewSVG();
 
@@ -48,8 +46,7 @@ describe('Apply font on text and on text shape.', function() {
 	it('Apply italic on text shape.', function() {
 		openTextPropertiesPanel();
 
-		cy.get('#Italic')
-			.click();
+		helper.clickOnIdle('#Italic');
 
 		triggerNewSVG();
 
@@ -60,8 +57,7 @@ describe('Apply font on text and on text shape.', function() {
 	it('Apply underline on text shape.', function() {
 		openTextPropertiesPanel();
 
-		cy.get('#Underline')
-			.click();
+		helper.clickOnIdle('#Underline');
 
 		triggerNewSVG();
 
@@ -72,8 +68,7 @@ describe('Apply font on text and on text shape.', function() {
 	it('Apply strikeout on text shape.', function() {
 		openTextPropertiesPanel();
 
-		cy.get('#Strikeout')
-			.click();
+		helper.clickOnIdle('#Strikeout');
 
 		triggerNewSVG();
 
@@ -84,8 +79,7 @@ describe('Apply font on text and on text shape.', function() {
 	it('Apply shadowed on text shape.', function() {
 		openTextPropertiesPanel();
 
-		cy.get('#Shadowed')
-			.click();
+		helper.clickOnIdle('#Shadowed');
 
 		triggerNewSVG();
 
@@ -96,14 +90,11 @@ describe('Apply font on text and on text shape.', function() {
 	it('Change font name of text shape.', function() {
 		openTextPropertiesPanel();
 
-		cy.get('#fontnamecombobox')
-			.click();
+		helper.clickOnIdle('#fontnamecombobox');
 
-		cy.contains('.ui-combobox-text', 'Linux Libertine G')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Linux Libertine G');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		cy.get('#fontnamecombobox .ui-header-right .entry-value')
 			.should('have.text', 'Linux Libertine G');
@@ -120,14 +111,11 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#fontsizecombobox')
-			.click();
+		helper.clickOnIdle('#fontsizecombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', '24')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', '24');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		cy.get('#fontsizecombobox .ui-header-right .entry-value')
 			.should('have.text', '24');
@@ -144,8 +132,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#Grow')
-			.click();
+		helper.clickOnIdle('#Grow');
 
 		triggerNewSVG();
 
@@ -159,8 +146,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#Shrink')
-			.click();
+		helper.clickOnIdle('#Shrink');
 
 		triggerNewSVG();
 
@@ -177,8 +163,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('not.have.attr', 'font-color');
 
-		cy.get('#Color')
-			.click();
+		helper.clickOnIdle('#Color');
 
 		mobileHelper.selectFromColorPalette(0, 5, 2);
 
@@ -194,8 +179,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('not.have.attr', 'font-color');
 
-		cy.get('#CharBackColor')
-			.click();
+		helper.clickOnIdle('#CharBackColor');
 
 		mobileHelper.selectFromColorPalette(1, 2, 2);
 
@@ -220,8 +204,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#SuperScript')
-			.click();
+		helper.clickOnIdle('#SuperScript');
 
 		triggerNewSVG();
 
@@ -239,8 +222,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#SubScript')
-			.click();
+		helper.clickOnIdle('#SubScript');
 
 		triggerNewSVG();
 
@@ -257,8 +239,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#Grow')
-			.click();
+		helper.clickOnIdle('#Grow');
 
 		triggerNewSVG();
 
@@ -268,8 +249,7 @@ describe('Apply font on text and on text shape.', function() {
 		// Remove direct formatting
 		openTextPropertiesPanel();
 
-		cy.get('#clearFormatting')
-			.click();
+		helper.clickOnIdle('#clearFormatting');
 
 		triggerNewSVG();
 
@@ -282,8 +262,7 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#Bold')
-			.click();
+		helper.clickOnIdle('#Bold');
 
 		triggerNewSVG();
 
@@ -296,8 +275,7 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#Italic')
-			.click();
+		helper.clickOnIdle('#Italic');
 
 		triggerNewSVG();
 
@@ -310,8 +288,7 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#Underline')
-			.click();
+		helper.clickOnIdle('#Underline');
 
 		triggerNewSVG();
 
@@ -324,8 +301,7 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#Strikeout')
-			.click();
+		helper.clickOnIdle('#Strikeout');
 
 		triggerNewSVG();
 
@@ -338,8 +314,7 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#Shadowed')
-			.click();
+		helper.clickOnIdle('#Shadowed');
 
 		triggerNewSVG();
 
@@ -352,14 +327,11 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#fontnamecombobox')
-			.click();
+		helper.clickOnIdle('#fontnamecombobox');
 
-		cy.contains('.ui-combobox-text', 'Linux Libertine G')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Linux Libertine G');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		cy.get('#fontnamecombobox .ui-header-right .entry-value')
 			.should('have.text', 'Linux Libertine G');
@@ -378,14 +350,11 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#fontsizecombobox')
-			.click();
+		helper.clickOnIdle('#fontsizecombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', '24')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', '24');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		cy.get('#fontsizecombobox .ui-header-right .entry-value')
 			.should('have.text', '24');
@@ -404,8 +373,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#Grow')
-			.click();
+		helper.clickOnIdle('#Grow');
 
 		triggerNewSVG();
 
@@ -421,8 +389,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#Shrink')
-			.click();
+		helper.clickOnIdle('#Shrink');
 
 		triggerNewSVG();
 
@@ -441,8 +408,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('not.have.attr', 'font-color');
 
-		cy.get('#Color')
-			.click();
+		helper.clickOnIdle('#Color');
 
 		mobileHelper.selectFromColorPalette(0, 5, 2);
 
@@ -457,8 +423,7 @@ describe('Apply font on text and on text shape.', function() {
 
 		openTextPropertiesPanel();
 
-		cy.get('#CharBackColor')
-			.click();
+		helper.clickOnIdle('#CharBackColor');
 
 		mobileHelper.selectFromColorPalette(1, 2, 2);
 
@@ -488,8 +453,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#SuperScript')
-			.click();
+		helper.clickOnIdle('#SuperScript');
 
 		triggerNewSVG();
 
@@ -509,8 +473,7 @@ describe('Apply font on text and on text shape.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		cy.get('#SubScript')
-			.click();
+		helper.clickOnIdle('#SubScript');
 
 		triggerNewSVG();
 
diff --git a/cypress_test/integration_tests/mobile/impress/apply_paragraph_props_spec.js b/cypress_test/integration_tests/mobile/impress/apply_paragraph_props_spec.js
index 43d15d99d..a49551dd2 100644
--- a/cypress_test/integration_tests/mobile/impress/apply_paragraph_props_spec.js
+++ b/cypress_test/integration_tests/mobile/impress/apply_paragraph_props_spec.js
@@ -26,20 +26,18 @@ describe('Apply paragraph properties.', function() {
 	function openParagraphPropertiesPanel() {
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ParaPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ParaPropertyPanel');
 
-		cy.get('.ui-content.level-0.mobile-wizard')
+		cy.get('#ParaLeftToRight')
 			.should('be.visible');
 	}
 
 	function openListsPropertiesPanel() {
 		mobileHelper.openMobileWizard();
 
-		cy.get('#ListsPropertyPanel')
-			.click();
+		helper.clickOnIdle('#ListsPropertyPanel');
 
-		cy.get('.ui-content.level-0.mobile-wizard')
+		cy.get('#DefaultBullet')
 			.should('be.visible');
 	}
 
@@ -50,8 +48,7 @@ describe('Apply paragraph properties.', function() {
 		// Set right alignment first
 		openParagraphPropertiesPanel();
 
-		cy.get('#RightPara')
-			.click();
+		helper.clickOnIdle('#RightPara');
 
 		triggerNewSVG();
 
@@ -61,8 +58,7 @@ describe('Apply paragraph properties.', function() {
 		// Set left alignment
 		openParagraphPropertiesPanel();
 
-		cy.get('#LeftPara')
-			.click();
+		helper.clickOnIdle('#LeftPara');
 
 		triggerNewSVG();
 
@@ -76,8 +72,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#CenterPara')
-			.click();
+		helper.clickOnIdle('#CenterPara');
 
 		triggerNewSVG();
 
@@ -92,8 +87,7 @@ describe('Apply paragraph properties.', function() {
 		// Set right alignment first
 		openParagraphPropertiesPanel();
 
-		cy.get('#RightPara')
-			.click();
+		helper.clickOnIdle('#RightPara');
 
 		triggerNewSVG();
 
@@ -103,8 +97,7 @@ describe('Apply paragraph properties.', function() {
 		// Then set justified alignment
 		openParagraphPropertiesPanel();
 
-		cy.get('#JustifyPara')
-			.click();
+		helper.clickOnIdle('#JustifyPara');
 
 		triggerNewSVG();
 
@@ -119,8 +112,7 @@ describe('Apply paragraph properties.', function() {
 		// Set bottom alignment first
 		openParagraphPropertiesPanel();
 
-		cy.get('#CellVertBottom')
-			.click();
+		helper.clickOnIdle('#CellVertBottom');
 
 		triggerNewSVG();
 
@@ -130,8 +122,7 @@ describe('Apply paragraph properties.', function() {
 		// Then set top alignment
 		openParagraphPropertiesPanel();
 
-		cy.get('#CellVertTop')
-			.click();
+		helper.clickOnIdle('#CellVertTop');
 
 		triggerNewSVG();
 
@@ -145,8 +136,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#CellVertCenter')
-			.click();
+		helper.clickOnIdle('#CellVertCenter');
 
 		triggerNewSVG();
 
@@ -161,8 +151,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#DefaultBullet')
-			.click();
+		helper.clickOnIdle('#DefaultBullet');
 
 		triggerNewSVG();
 
@@ -177,8 +166,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#DefaultNumbering')
-			.click();
+		helper.clickOnIdle('#DefaultNumbering');
 
 		triggerNewSVG();
 
@@ -233,8 +221,7 @@ describe('Apply paragraph properties.', function() {
 		// Set right alignment first
 		openParagraphPropertiesPanel();
 
-		cy.get('#RightPara')
-			.click();
+		helper.clickOnIdle('#RightPara');
 
 		triggerNewSVG();
 
@@ -246,8 +233,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#LeftPara')
-			.click();
+		helper.clickOnIdle('#LeftPara');
 
 		triggerNewSVG();
 
@@ -263,8 +249,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#CenterPara')
-			.click();
+		helper.clickOnIdle('#CenterPara');
 
 		triggerNewSVG();
 
@@ -281,8 +266,7 @@ describe('Apply paragraph properties.', function() {
 		// Set right alignment first
 		openParagraphPropertiesPanel();
 
-		cy.get('#RightPara')
-			.click();
+		helper.clickOnIdle('#RightPara');
 
 		triggerNewSVG();
 
@@ -294,8 +278,7 @@ describe('Apply paragraph properties.', function() {
 		// Then set justified alignment
 		openParagraphPropertiesPanel();
 
-		cy.get('#JustifyPara')
-			.click();
+		helper.clickOnIdle('#JustifyPara');
 
 		triggerNewSVG();
 
@@ -312,8 +295,7 @@ describe('Apply paragraph properties.', function() {
 		// Set bottom alignment first
 		openParagraphPropertiesPanel();
 
-		cy.get('#CellVertBottom')
-			.click();
+		helper.clickOnIdle('#CellVertBottom');
 
 		triggerNewSVG();
 
@@ -325,8 +307,7 @@ describe('Apply paragraph properties.', function() {
 		// Then set top alignment
 		openParagraphPropertiesPanel();
 
-		cy.get('#CellVertTop')
-			.click();
+		helper.clickOnIdle('#CellVertTop');
 
 		triggerNewSVG();
 
@@ -342,8 +323,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#CellVertCenter')
-			.click();
+		helper.clickOnIdle('#CellVertCenter');
 
 		triggerNewSVG();
 
@@ -360,8 +340,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#DefaultBullet')
-			.click();
+		helper.clickOnIdle('#DefaultBullet');
 
 		triggerNewSVG();
 
@@ -378,8 +357,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#DefaultNumbering')
-			.click();
+		helper.clickOnIdle('#DefaultNumbering');
 
 		triggerNewSVG();
 
@@ -437,8 +415,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#ParaspaceIncrease')
-			.click();
+		helper.clickOnIdle('#ParaspaceIncrease');
 
 		triggerNewSVG();
 
@@ -449,8 +426,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#ParaspaceDecrease')
-			.click();
+		helper.clickOnIdle('#ParaspaceDecrease');
 
 		triggerNewSVG();
 
@@ -467,8 +443,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#ParaRightToLeft')
-			.click();
+		helper.clickOnIdle('#ParaRightToLeft');
 
 		triggerNewSVG();
 
@@ -480,8 +455,7 @@ describe('Apply paragraph properties.', function() {
 
 		openParagraphPropertiesPanel();
 
-		cy.get('#ParaLeftToRight')
-			.click();
+		helper.clickOnIdle('#ParaLeftToRight');
 
 		triggerNewSVG();
 
@@ -499,8 +473,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#DefaultBullet')
-			.click();
+		helper.clickOnIdle('#DefaultBullet');
 
 		triggerNewSVG();
 
@@ -514,8 +487,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#OutlineRight')
-			.click();
+		helper.clickOnIdle('#OutlineRight');
 
 		triggerNewSVG();
 
@@ -527,8 +499,7 @@ describe('Apply paragraph properties.', function() {
 
 		openListsPropertiesPanel();
 
-		cy.get('#OutlineLeft')
-			.click();
+		helper.clickOnIdle('#OutlineLeft');
 
 		triggerNewSVG();
 
diff --git a/cypress_test/integration_tests/mobile/impress/slide_properties_spec.js b/cypress_test/integration_tests/mobile/impress/slide_properties_spec.js
index fb18d99bf..a9ab41bb0 100644
--- a/cypress_test/integration_tests/mobile/impress/slide_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/impress/slide_properties_spec.js
@@ -26,8 +26,7 @@ describe('Changing slide properties.', function() {
 	}
 
 	function switchToMasterView() {
-		cy.get('#masterslidebutton')
-			.click();
+		helper.clickOnIdle('#masterslidebutton');
 
 		cy.get('#closemasterslide')
 			.should('exist');
@@ -37,11 +36,9 @@ describe('Changing slide properties.', function() {
 
 	it('Apply solid color background.', function() {
 		// Change fill style
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'Color')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Color');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'Color');
@@ -51,8 +48,7 @@ describe('Changing slide properties.', function() {
 			.should('have.attr', 'style', 'background-color: rgb(114, 159, 207);');
 
 		// Change the color
-		cy.get('#fillattr')
-			.click();
+		helper.clickOnIdle('#fillattr');
 
 		mobileHelper.selectFromColorPalette(0, 5);
 
@@ -74,11 +70,9 @@ describe('Changing slide properties.', function() {
 
 	it('Apply gradient fill.', function() {
 		// Change fill style
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'Gradient')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Gradient');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'Gradient');
@@ -91,13 +85,11 @@ describe('Changing slide properties.', function() {
 			.should('have.attr', 'style', 'background-color: rgb(255, 215, 215);');
 
 		// Change the colors
-		cy.get('#fillattr2')
-			.click();
+		helper.clickOnIdle('#fillattr2');
 
 		mobileHelper.selectFromColorPalette(0, 2);
 
-		cy.get('#fillattr3')
-			.click();
+		helper.clickOnIdle('#fillattr3');
 
 		mobileHelper.selectFromColorPalette(1, 4);
 
@@ -125,11 +117,9 @@ describe('Changing slide properties.', function() {
 
 	it('Apply hatching fill.', function() {
 		// Change fill style
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'Hatching')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Hatching');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'Hatching');
@@ -139,11 +129,9 @@ describe('Changing slide properties.', function() {
 			.should('have.text', 'Black 0 Degrees');
 
 		// Change the hatching
-		cy.get('#fillattr1')
-			.click();
+		helper.clickOnIdle('#fillattr1');
 
-		cy.contains('.ui-combobox-text', 'Blue Triple 90 Degrees')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Blue Triple 90 Degrees');
 
 		cy.get('#fillattr1 .ui-header-left')
 			.should('have.text', 'Blue Triple 90 Degrees');
@@ -163,11 +151,9 @@ describe('Changing slide properties.', function() {
 
 	it('Apply bitmap fill.', function() {
 		// Change fill style
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'Bitmap')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Bitmap');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'Bitmap');
@@ -177,11 +163,9 @@ describe('Changing slide properties.', function() {
 			.should('have.text', 'Painted White');
 
 		// Change the value
-		cy.get('#fillattr1')
-			.click();
+		helper.clickOnIdle('#fillattr1');
 
-		cy.contains('.ui-combobox-text', 'Wooden Board')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Wooden Board');
 
 		cy.get('#fillattr1 .ui-header-left')
 			.should('have.text', 'Wooden Board');
@@ -201,11 +185,9 @@ describe('Changing slide properties.', function() {
 
 	it('Apply pattern fill.', function() {
 		// Change fill style
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'Pattern')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Pattern');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'Pattern');
@@ -215,11 +197,9 @@ describe('Changing slide properties.', function() {
 			.should('have.text', '5 Percent');
 
 		// Change the value
-		cy.get('#fillattr1')
-			.click();
+		helper.clickOnIdle('#fillattr1');
 
-		cy.contains('.ui-combobox-text', '50 Percent')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', '50 Percent');
 
 		cy.get('#fillattr1 .ui-header-left')
 			.should('have.text', '50 Percent');
@@ -239,11 +219,9 @@ describe('Changing slide properties.', function() {
 
 	it('Remove slide fill.', function() {
 		// Apply color fill first
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'Color')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Color');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'Color');
@@ -258,11 +236,9 @@ describe('Changing slide properties.', function() {
 			.should('have.text', 'Color');
 
 		// Remove fill
-		cy.get('#fillstyle')
-			.click();
+		helper.clickOnIdle('#fillstyle');
 
-		cy.contains('.ui-combobox-text', 'None')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'None');
 
 		cy.get('#fillstyle .ui-header-left')
 			.should('have.text', 'None');
@@ -280,11 +256,9 @@ describe('Changing slide properties.', function() {
 	it('Change master background.', function() {
 		// The default master slide does not have background
 		// So switch to a different master slide first
-		cy.get('#masterslide')
-			.click();
+		helper.clickOnIdle('#masterslide');
 
-		cy.contains('.ui-combobox-text', 'Colored')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Colored');
 
 		cy.get('#masterslide .ui-header-left')
 			.should('have.text', 'Colored');
@@ -298,8 +272,7 @@ describe('Changing slide properties.', function() {
 		cy.get('input#displaymasterbackground')
 			.should('have.prop', 'checked', true);
 
-		cy.get('input#displaymasterbackground')
-			.click();
+		helper.clickOnIdle('input#displaymasterbackground');
 
 		cy.get('input#displaymasterbackground')
 			.should('not.have.prop', 'checked', true);
@@ -313,8 +286,7 @@ describe('Changing slide properties.', function() {
 		cy.get('input#displaymasterbackground')
 			.should('not.have.prop', 'checked', true);
 
-		cy.get('input#displaymasterbackground')
-			.click();
+		helper.clickOnIdle('input#displaymasterbackground');
 
 		cy.get('input#displaymasterbackground')
 			.should('have.prop', 'checked', true);
@@ -327,8 +299,7 @@ describe('Changing slide properties.', function() {
 		cy.get('input#displaymasterobjects')
 			.should('not.have.prop', 'checked', true);
 
-		cy.get('input#displaymasterobjects')
-			.click();
+		helper.clickOnIdle('input#displaymasterobjects');
 
 		cy.get('input#displaymasterobjects')
 			.should('have.prop', 'checked', true);
@@ -343,8 +314,7 @@ describe('Changing slide properties.', function() {
 		cy.get('input#displaymasterobjects')
 			.should('have.prop', 'checked', true);
 
-		cy.get('input#displaymasterobjects')
-			.click();
+		helper.clickOnIdle('input#displaymasterobjects');
 
 		cy.get('input#displaymasterobjects')
 			.should('not.have.prop', 'checked', true);
@@ -366,11 +336,9 @@ describe('Changing slide properties.', function() {
 				expect(sizeRatio).to.be.lessThan(16 / 9 + EPS);
 			});
 
-		cy.get('#paperformat')
-			.click();
+		helper.clickOnIdle('#paperformat');
 
-		cy.contains('.ui-combobox-text', 'Screen 4:3')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Screen 4:3');
 
 		cy.get('#paperformat .ui-header-left')
 			.should('have.text', 'Screen 4:3');
@@ -400,11 +368,9 @@ describe('Changing slide properties.', function() {
 		cy.get('#orientation .ui-header-left')
 			.should('have.text', 'Landscape');
 
-		cy.get('#orientation')
-			.click();
+		helper.clickOnIdle('#orientation');
 
-		cy.contains('.ui-combobox-text', 'Portrait')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Portrait');
 
 		cy.get('#orientation .ui-header-left')
 			.should('have.text', 'Portrait');
@@ -428,11 +394,9 @@ describe('Changing slide properties.', function() {
 		cy.get('#masterslide .ui-header-left')
 			.should('have.text', 'Default');
 
-		cy.get('#masterslide')
-			.click();
+		helper.clickOnIdle('#masterslide');
 
-		cy.contains('.ui-combobox-text', 'Colored')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Colored');
 
 		cy.get('#masterslide .ui-header-left')
 			.should('have.text', 'Colored');
@@ -449,8 +413,7 @@ describe('Changing slide properties.', function() {
 
 	it('Apply layout.', function() {
 		// Apply title / subtitle layout
-		cy.get('#Layouts')
-			.click();
+		helper.clickOnIdle('#Layouts');
 
 		// Blank is the default
 		// TODO: wring item is selected by default
@@ -458,8 +421,7 @@ describe('Changing slide properties.', function() {
 		//	.should('have.class', 'loleaflet-context-down');
 
 		// Select layout with title and content shape
-		cy.get('.layout:nth-of-type(3)')
-			.click();
+		helper.clickOnIdle('.layout:nth-of-type(3)');
 
 		previewShouldBeFullWhite(false);
 
@@ -467,8 +429,7 @@ describe('Changing slide properties.', function() {
 		mobileHelper.closeMobileWizard();
 		mobileHelper.openMobileWizard();
 
-		cy.get('#Layouts')
-			.click();
+		helper.clickOnIdle('#Layouts');
 
 		cy.get('.layout:nth-of-type(3)')
 			.should('have.class', 'loleaflet-context-down');
@@ -490,11 +451,9 @@ describe('Changing slide properties.', function() {
 				expect(sizeRatio).to.be.lessThan(16 / 9 + EPS);
 			});
 
-		cy.get('#paperformat')
-			.click();
+		helper.clickOnIdle('#paperformat');
 
-		cy.contains('.ui-combobox-text', 'Screen 4:3')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Screen 4:3');
 
 		cy.get('#paperformat .ui-header-left')
 			.should('have.text', 'Screen 4:3');
@@ -526,11 +485,9 @@ describe('Changing slide properties.', function() {
 		cy.get('#orientation .ui-header-left')
 			.should('have.text', 'Landscape');
 
-		cy.get('#orientation')
-			.click();
+		helper.clickOnIdle('#orientation');
 
-		cy.contains('.ui-combobox-text', 'Portrait')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Portrait');
 
 		cy.get('#orientation .ui-header-left')
 			.should('have.text', 'Portrait');
@@ -577,8 +534,7 @@ describe('Changing slide properties.', function() {
 			.should('have.class', 'disabled');
 
 		// Switch back to normal mode
-		cy.get('#closemasterslide')
-			.click();
+		helper.clickOnIdle('#closemasterslide');
 
 		cy.get('#masterslidebutton')
 			.should('exist');
diff --git a/cypress_test/integration_tests/mobile/writer/apply_font_spec.js b/cypress_test/integration_tests/mobile/writer/apply_font_spec.js
index 1d1b800d9..1d5473970 100644
--- a/cypress_test/integration_tests/mobile/writer/apply_font_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/apply_font_spec.js
@@ -29,15 +29,12 @@ describe('Apply font changes.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		// Change font name
-		cy.get('#applystyle')
-			.click();
+		helper.clickOnIdle('#applystyle');
 
 		cy.get('#mobile-wizard-back')
 			.should('be.visible');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', styleName)
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', styleName);
 
 		// Combobox entry contains the selected font name
 		if (styleName !== 'Clear formatting') {
@@ -49,18 +46,14 @@ describe('Apply font changes.', function() {
 	}
 
 	it('Apply font name.', function() {
-		// Change font name
-		cy.get('#fontnamecombobox')
-			.click();
+		helper.clickOnIdle('#fontnamecombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', 'Linux Libertine G')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', 'Linux Libertine G');
 
 		cy.get('.level-1[title="Font Name"] .mobile-wizard.ui-combobox-text.selected')
 			.should('have.text', 'Linux Libertine G');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		// Combobox entry contains the selected font name
 		cy.get('#fontnamecombobox .ui-header-right .entry-value')
@@ -74,11 +67,9 @@ describe('Apply font changes.', function() {
 
 	it('Apply font size.', function() {
 		// Change font size
-		cy.get('#fontsizecombobox')
-			.click();
+		helper.clickOnIdle('#fontsizecombobox');
 
-		cy.contains('.mobile-wizard.ui-combobox-text', '36')
-			.click();
+		helper.clickOnIdle('.mobile-wizard.ui-combobox-text', '36');
 
 		if (helper.getLOVersion() === 'master')
 			cy.get('.level-1[title="Font Size"] .mobile-wizard.ui-combobox-text.selected')
@@ -87,8 +78,7 @@ describe('Apply font changes.', function() {
 			cy.get('.level-1[title="Font Size"] .mobile-wizard.ui-combobox-text.selected')
 				.should('have.text', '36');
 
-		cy.get('#mobile-wizard-back')
-			.click();
+		helper.clickOnIdle('#mobile-wizard-back');
 
 		// Combobox entry contains the selected font name
 		cy.get('#fontsizecombobox .ui-header-right .entry-value')
@@ -101,9 +91,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply bold font.', function() {
-		// Apply bold
-		cy.get('#Bold')
-			.click();
+		helper.clickOnIdle('#Bold');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -112,9 +100,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply italic font.', function() {
-		// Apply italic
-		cy.get('#Italic')
-			.click();
+		helper.clickOnIdle('#Italic');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -123,9 +109,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply underline.', function() {
-		// Change underline
-		cy.get('#Underlineimg')
-			.click();
+		helper.clickOnIdle('#Underline');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -134,9 +118,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply strikeout.', function() {
-		// Change strikeout
-		cy.get('#Strikeoutimg')
-			.click();
+		helper.clickOnIdle('#Strikeout');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -145,9 +127,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply shadowed.', function() {
-		// Apply shadowed
-		cy.get('#Shadowedimg')
-			.click();
+		helper.clickOnIdle('#Shadowed');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -155,9 +135,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply grow.', function() {
-		// Push grow
-		cy.get('#Growimg')
-			.click();
+		helper.clickOnIdle('#Grow');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -166,9 +144,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply shrink.', function() {
-		// Push shrink
-		cy.get('#Shrinkimg')
-			.click();
+		helper.clickOnIdle('#Shrink');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -177,9 +153,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply font color.', function() {
-		// Change font color
-		cy.get('#FontColor')
-			.click();
+		helper.clickOnIdle('#FontColor');
 
 		mobileHelper.selectFromColorPalette(0, 5, 2);
 
@@ -190,9 +164,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply highlight color.', function() {
-		// Change highlight color
-		cy.get('#BackColor')
-			.click();
+		helper.clickOnIdle('#BackColor');
 
 		mobileHelper.selectFromColorPalette(1, 5, 4);
 
@@ -203,9 +175,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply superscript.', function() {
-		// Apply superscript
-		cy.get('#SuperScriptimg')
-			.click();
+		helper.clickOnIdle('#SuperScript');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -214,9 +184,7 @@ describe('Apply font changes.', function() {
 	});
 
 	it('Apply subscript.', function() {
-		// Apply superscript
-		cy.get('#SubScriptimg')
-			.click();
+		helper.clickOnIdle('#SubScript');
 
 		writerMobileHelper.selectAllMobile();
 
diff --git a/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js b/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js
index 5f897285d..ff24e5b0c 100644
--- a/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js
@@ -19,11 +19,13 @@ describe('Apply paragraph properties.', function() {
 		mobileHelper.openMobileWizard();
 
 		// Open paragraph properties
-		cy.get('#Paragraph')
-			.click();
+		helper.clickOnIdle('#Paragraph');
 
 		cy.get('#Paragraph')
 			.should('have.class', 'selected');
+
+		cy.get('#LeftPara')
+			.should('be.visible');
 	});
 
 	afterEach(function() {
@@ -31,15 +33,12 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply left alignment.', function() {
-		// Change alignment
-		cy.get('#CenterPara')
-			.click();
+		helper.clickOnIdle('#CenterPara');
 
 		cy.get('#CenterParaimg')
 			.should('have.class', 'selected');
 
-		cy.get('#LeftPara')
-			.click();
+		helper.clickOnIdle('#LeftPara');
 
 		cy.get('#LeftParaimg')
 			.should('have.class', 'selected');
@@ -51,9 +50,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply center alignment.', function() {
-		// Change alignment
-		cy.get('#CenterPara')
-			.click();
+		helper.clickOnIdle('#CenterPara');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -62,9 +59,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply right alignment.', function() {
-		// Change alignment
-		cy.get('#RightPara')
-			.click();
+		helper.clickOnIdle('#RightPara');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -73,9 +68,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply justify alignment.', function() {
-		// Change alignment
-		cy.get('#JustifyPara')
-			.click();
+		helper.clickOnIdle('#JustifyPara');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -84,9 +77,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Change writing direction.', function() {
-		// Change writing mode
-		cy.get('#ParaRightToLeft')
-			.click();
+		helper.clickOnIdle('#ParaRightToLeft');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -99,12 +90,10 @@ describe('Apply paragraph properties.', function() {
 		mobileHelper.openMobileWizard();
 
 		// Open paragraph properties
-		cy.get('#Paragraph')
-			.click();
+		helper.clickOnIdle('#Paragraph');
 
 		// Change writing mode
-		cy.get('#ParaLeftToRight')
-			.click();
+		helper.clickOnIdle('#ParaLeftToRight');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -113,8 +102,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply default bulleting.', function() {
-		cy.get('#DefaultBullet')
-			.click();
+		helper.clickOnIdle('#DefaultBullet');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -123,8 +111,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply default numbering.', function() {
-		cy.get('#DefaultNumbering')
-			.click();
+		helper.clickOnIdle('#DefaultNumbering');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -133,9 +120,7 @@ describe('Apply paragraph properties.', function() {
 	});
 
 	it('Apply background color.', function() {
-		// Change background color
-		cy.get('#BackgroundColor')
-			.click();
+		helper.clickOnIdle('#BackgroundColor');
 
 		mobileHelper.selectFromColorPalette(2, 5, 2);
 
@@ -148,10 +133,9 @@ describe('Apply paragraph properties.', function() {
 
 	it('Increase / decrease para spacing.', function() {
 		// Increase para spacing
-		cy.get('#ParaspaceIncrease')
-			.click();
-		cy.get('#ParaspaceIncrease')
-			.click();
+		helper.clickOnIdle('#ParaspaceIncrease');
+
+		helper.clickOnIdle('#ParaspaceIncrease');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -169,12 +153,10 @@ describe('Apply paragraph properties.', function() {
 		mobileHelper.openMobileWizard();
 
 		// Open paragraph properties
-		cy.get('#Paragraph')
-			.click();
+		helper.clickOnIdle('#Paragraph');
 
 		// Decrease para spacing
-		cy.get('#ParaspaceDecrease')
-			.click();
+		helper.clickOnIdle('#ParaspaceDecrease');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -195,21 +177,19 @@ describe('Apply paragraph properties.', function() {
 			.should('have.attr', 'value', '0');
 
 		// Change spacing
-		cy.get('#aboveparaspacing .spinfieldcontrols .plus')
-			.click();
+		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
 			.should('have.attr', 'value', '0.02');
-		cy.get('#aboveparaspacing .spinfieldcontrols .plus')
-			.click();
+
+		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
 			.should('have.attr', 'value', '0.04');
-		cy.get('#aboveparaspacing .spinfieldcontrols .plus')
-			.click();
+
+		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
 			.should('have.attr', 'value', '0.06');
 
-		cy.get('#belowparaspacing .spinfieldcontrols .plus')
-			.click();
+		helper.clickOnIdle('#belowparaspacing .plus');
 		cy.get('#belowparaspacing .spinfield')
 			.should('have.attr', 'value', '0.02');
 
@@ -226,10 +206,8 @@ describe('Apply paragraph properties.', function() {
 
 	it('Increase / decrease indent.', function() {
 		// Increase indent
-		cy.get('#IncrementIndent')
-			.click();
-		cy.get('#IncrementIndent')
-			.click();
+		helper.clickOnIdle('#IncrementIndent');
+		helper.clickOnIdle('#IncrementIndent');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -243,12 +221,10 @@ describe('Apply paragraph properties.', function() {
 		mobileHelper.openMobileWizard();
 
 		// Open paragraph properties
-		cy.get('#Paragraph')
-			.click();
+		helper.clickOnIdle('#Paragraph');
 
 		// Decrease indent
-		cy.get('#DecrementIndent')
-			.click();
+		helper.clickOnIdle('#DecrementIndent');
 
 		writerMobileHelper.selectAllMobile();
 
@@ -259,12 +235,11 @@ describe('Apply paragraph properties.', function() {
 
 	it('Apply before text indent.', function() {
 		// Change indent
-		cy.get('#beforetextindent .spinfieldcontrols .plus')
-			.click();
+		helper.clickOnIdle('#beforetextindent .plus');
 		cy.get('#beforetextindent .spinfield')
 			.should('have.attr', 'value', '0.02');
-		cy.get('#beforetextindent .spinfieldcontrols .plus')
-			.click();
+
+		helper.clickOnIdle('#beforetextindent .plus');
 		cy.get('#beforetextindent .spinfield')
 			.should('have.attr', 'value', '0.04');
 
@@ -277,12 +252,11 @@ describe('Apply paragraph properties.', function() {
 
 	it('Apply after text indent.', function() {
 		// Change indent
-		cy.get('#aftertextindent .spinfieldcontrols .plus')
-			.click();
+		helper.clickOnIdle('#aftertextindent .plus');
 		cy.get('#aftertextindent .spinfield')
 			.should('have.attr', 'value', '0.02');
-		cy.get('#aftertextindent .spinfieldcontrols .plus')
-			.click();
+
+		helper.clickOnIdle('#aftertextindent .plus');
 		cy.get('#aftertextindent .spinfield')
 			.should('have.attr', 'value', '0.04');
 
@@ -295,12 +269,11 @@ describe('Apply paragraph properties.', function() {
 
 	it('Apply first line indent.', function() {
 		// Increase firstline indent
-		cy.get('#firstlineindent .spinfieldcontrols .plus')
-			.click();
+		helper.clickOnIdle('#firstlineindent .plus');
 		cy.get('#firstlineindent .spinfield')
 			.should('have.attr', 'value', '0.02');
-		cy.get('#firstlineindent .spinfieldcontrols .plus')
-			.click();
+
+		helper.clickOnIdle('#firstlineindent .plus');
 		cy.get('#firstlineindent .spinfield')
 			.should('have.attr', 'value', '0.04');
 
diff --git a/cypress_test/integration_tests/mobile/writer/focus_spec.js b/cypress_test/integration_tests/mobile/writer/focus_spec.js
index 156c81013..6e4b4055d 100644
--- a/cypress_test/integration_tests/mobile/writer/focus_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/focus_spec.js
@@ -88,12 +88,12 @@ describe('Focus tests', function() {
 		mobileHelper.openMobileWizard();
 
 		// Open paragraph properties
-		cy.get('#Paragraph')
-			.click();
+		helper.clickOnIdle('#Paragraph');
 
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0')
-			.click();
+			.should('have.attr', 'value', '0');
+
+		helper.clickOnIdle('#aboveparaspacing .spinfield');
 
 		// The spinfield should have the focus now.
 		cy.document().its('activeElement.className')
@@ -226,8 +226,7 @@ describe('Focus tests', function() {
 			.should('be.eq', 'BODY');
 
 		// Apply bold
-		cy.get('#Bold')
-			.click();
+		helper.clickOnIdle('#Bold');
 
 		cy.get('#Boldimg')
 			.should('have.class', 'selected');
diff --git a/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js b/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js
index c0e921e8d..41dabed7d 100644
--- a/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js
@@ -24,8 +24,7 @@ describe('Trigger hamburger menu options.', function() {
 
 		mobileHelper.openMobileWizard();
 
-		cy.get('#FontColor')
-			.click();
+		helper.clickOnIdle('#FontColor');
 
 		mobileHelper.selectFromColorPalette(0, 0, 7);
 
@@ -723,11 +722,9 @@ describe('Trigger hamburger menu options.', function() {
 
 		openPageWizard();
 
-		cy.get('#papersize')
-			.click();
+		helper.clickOnIdle('#papersize');
 
-		cy.contains('.ui-combobox-text', 'C6 Envelope')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'C6 Envelope');
 
 		// Smaller paper size makes center tile to contain text too.
 		helper.imageShouldBeFullWhiteOrNot(centerTile, false);
@@ -747,10 +744,7 @@ describe('Trigger hamburger menu options.', function() {
 
 		openPageWizard();
 
-		cy.get('#paperwidth .spinfield')
-			.clear()
-			.type('5')
-			.type('{enter}');
+		helper.inputOnIdle('#paperwidth .spinfield', '5');
 
 		// Smaller paper size makes center tile to contain text too.
 		helper.imageShouldBeFullWhiteOrNot(centerTile, false);
@@ -773,10 +767,7 @@ describe('Trigger hamburger menu options.', function() {
 
 		openPageWizard();
 
-		cy.get('#paperheight .spinfield')
-			.clear()
-			.type('3.0')
-			.type('{enter}');
+		helper.inputOnIdle('#paperheight .spinfield', '3.0');
 
 		// Smaller paper size makes center tile to contain the end of the page.
 		helper.imageShouldBeFullWhiteOrNot(centerTile, false);
@@ -799,11 +790,9 @@ describe('Trigger hamburger menu options.', function() {
 
 		openPageWizard();
 
-		cy.get('#paperorientation')
-			.click();
+		helper.clickOnIdle('#paperorientation');
 
-		cy.contains('.ui-combobox-text', 'Landscape')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Landscape');
 
 		// We got some extra tiles horizontally.
 		cy.get('.leaflet-tile-loaded[style=\'width: 256px; height: 256px; left: 1023px; top: 5px;\']')
@@ -824,11 +813,9 @@ describe('Trigger hamburger menu options.', function() {
 
 		openPageWizard();
 
-		cy.get('#marginLB')
-			.click();
+		helper.clickOnIdle('#marginLB');
 
-		cy.contains('.ui-combobox-text', 'None')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'None');
 
 		// Text is moved up by margin removal, so the the center tile will be empty.
 		helper.imageShouldBeFullWhiteOrNot(centerTile, true);
diff --git a/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js b/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js
index 29ee9c069..e8c442cee 100644
--- a/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js
@@ -47,8 +47,9 @@ describe('Change shape properties via mobile wizard.', function() {
 		openPosSizePanel();
 
 		cy.get('#selectwidth .plus')
-			.should('be.visible')
-			.click();
+			.should('be.visible');
+
+		helper.clickOnIdle('#selectwidth .plus');
 
 		mobileHelper.closeMobileWizard();
 	}
@@ -56,20 +57,18 @@ describe('Change shape properties via mobile wizard.', function() {
 	function openPosSizePanel() {
 		mobileHelper.openMobileWizard();
 
-		cy.get('#PosSizePropertyPanel')
-			.click();
+		helper.clickOnIdle('#PosSizePropertyPanel');
 
-		cy.get('.ui-content.level-0.mobile-wizard')
+		cy.get('#selectwidth')
 			.should('be.visible');
 	}
 
 	function openLinePropertyPanel() {
 		mobileHelper.openMobileWizard();
 
-		cy.get('#LinePropertyPanel')
-			.click();
+		helper.clickOnIdle('#LinePropertyPanel');
 
-		cy.get('.ui-content.level-0.mobile-wizard')
+		cy.get('#linestyle')
 			.should('be.visible');
 	}
 
@@ -118,8 +117,7 @@ describe('Change shape properties via mobile wizard.', function() {
 		openPosSizePanel();
 
 		// Enable keep ratio
-		cy.get('#ratio #ratio')
-			.click();
+		helper.clickOnIdle('#ratio #ratio');
 
 		cy.get('#ratio #ratio')
 			.should('have.prop', 'checked', true);
@@ -143,8 +141,7 @@ describe('Change shape properties via mobile wizard.', function() {
 	it('Vertical mirroring', function() {
 		openPosSizePanel();
 
-		cy.get('#FlipVertical')
-			.click();
+		helper.clickOnIdle('#FlipVertical');
 
 		cy.get('.leaflet-pane.leaflet-overlay-pane svg g svg g g g path')
 			.should('not.have.attr', 'd', defaultGeometry);
@@ -156,8 +153,7 @@ describe('Change shape properties via mobile wizard.', function() {
 	it('Horizontal mirroring', function() {
 		openPosSizePanel();
 
-		cy.get('#FlipHorizontal')
-			.click();
+		helper.clickOnIdle('#FlipHorizontal');
 
 		triggerNewSVG();
 
@@ -173,30 +169,25 @@ describe('Change shape properties via mobile wizard.', function() {
 
 		// We can't test the result, so we just trigger
 		// the events to catch crashes, consoler errors.
-		cy.get('#BringToFront')
-			.click();
+		helper.clickOnIdle('#BringToFront');
 		cy.wait(300);
 
-		cy.get('#ObjectForwardOne')
-			.click();
+		helper.clickOnIdle('#ObjectForwardOne');
 		cy.wait(300);
 
-		cy.get('#ObjectBackOne')
-			.click();
+		helper.clickOnIdle('#ObjectBackOne');
 		cy.wait(300);
 
-		cy.get('#SendToBack')
-			.click();
+		helper.clickOnIdle('#SendToBack');
+		cy.wait(300);
 	});
 
 	it('Change line color', function() {
 		openLinePropertyPanel();
 
-		cy.get('#XLineColor')
-			.click();
+		helper.clickOnIdle('#XLineColor');
 
-		cy.get('.ui-content[title="Line Color"] .color-sample-small[style="background-color: rgb(152, 0, 0);"]')
-			.click();
+		helper.clickOnIdle('.ui-content[title="Line Color"] .color-sample-small[style="background-color: rgb(152, 0, 0);"]');
 
 		triggerNewSVG();
 
@@ -207,11 +198,9 @@ describe('Change shape properties via mobile wizard.', function() {
 	it.skip('Change line style', function() {
 		openLinePropertyPanel();
 
-		cy.get('#linestyle')
-			.click();
+		helper.clickOnIdle('#linestyle');
 
-		cy.contains('.ui-combobox-text', 'Dashed')
-			.click();
+		helper.clickOnIdle('.ui-combobox-text', 'Dashed');
 
 		triggerNewSVG();
 
@@ -225,8 +214,7 @@ describe('Change shape properties via mobile wizard.', function() {
 		cy.get('#linewidth .spinfield')
 			.should('have.attr', 'readonly', 'readonly');
 
-		cy.get('#linewidth .plus')
-			.click();
+		helper.clickOnIdle('#linewidth .plus');
 
 		triggerNewSVG();
 
@@ -235,8 +223,7 @@ describe('Change shape properties via mobile wizard.', function() {
 
 		openLinePropertyPanel();
 
-		cy.get('#linewidth .minus')
-			.click();
+		helper.clickOnIdle('#linewidth .minus');
 
 		triggerNewSVG();
 
diff --git a/cypress_test/integration_tests/mobile/writer/table_properties_spec.js b/cypress_test/integration_tests/mobile/writer/table_properties_spec.js
index c9f62e148..1c82c323e 100644
--- a/cypress_test/integration_tests/mobile/writer/table_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/table_properties_spec.js
@@ -22,14 +22,10 @@ describe('Change table properties / layout via mobile wizard.', function() {
 	function openTablePanel() {
 		mobileHelper.openMobileWizard();
 
-		// Open table panel
-		cy.get('#TableEditPanel')
-			.click();
+		helper.clickOnIdle('#TableEditPanel');
 
 		cy.get('#InsertRowsBefore')
 			.should('be.visible');
-
-		cy.wait(500);
 	}
 
 	function moveCursorToFirstCell() {
@@ -57,8 +53,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#InsertRowsBefore')
-			.click();
+		helper.clickOnIdle('#InsertRowsBefore');
 
 		cy.get('.leaflet-marker-icon.table-row-resize-marker')
 			.should('have.length', 4);
@@ -81,8 +76,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#InsertRowsAfter')
-			.click();
+		helper.clickOnIdle('#InsertRowsAfter');
 
 		cy.get('.leaflet-marker-icon.table-row-resize-marker')
 			.should('have.length', 4);
@@ -105,8 +99,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#InsertColumnsBefore')
-			.click();
+		helper.clickOnIdle('#InsertColumnsBefore');
 
 		cy.get('.leaflet-marker-icon.table-column-resize-marker')
 			.should('have.length', 4);
@@ -129,8 +122,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#InsertColumnsAfter')
-			.click();
+		helper.clickOnIdle('#InsertColumnsAfter');
 
 		cy.get('.leaflet-marker-icon.table-column-resize-marker')
 			.should('have.length', 4);
@@ -153,8 +145,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#DeleteRows')
-			.click();
+		helper.clickOnIdle('#DeleteRows');
 
 		cy.get('.leaflet-marker-icon.table-row-resize-marker')
 			.should('have.length', 2);
@@ -178,8 +169,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 		// Insert column first
 		openTablePanel();
 
-		cy.get('#InsertColumnsBefore')
-			.click();
+		helper.clickOnIdle('#InsertColumnsBefore');
 
 		cy.get('.leaflet-marker-icon.table-column-resize-marker')
 			.should('have.length', 4);
@@ -188,8 +178,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 		mobileHelper.closeMobileWizard();
 		openTablePanel();
 
-		cy.get('#DeleteColumns')
-			.click();
+		helper.clickOnIdle('#DeleteColumns');
 
 		cy.get('.leaflet-marker-icon.table-column-resize-marker')
 			.should('have.length', 3);
@@ -200,8 +189,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#DeleteTable')
-			.click();
+		helper.clickOnIdle('#DeleteTable');
 
 		cy.get('.leaflet-marker-icon.table-column-resize-marker')
 			.should('not.exist');
@@ -228,10 +216,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#MergeCells')
-			.scrollIntoView();
-		cy.get('#MergeCells')
-			.click();
+		helper.clickOnIdle('#MergeCells');
 
 		selectFullTable();
 
@@ -295,8 +280,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#SetMinimalRowHeight')
-			.click();
+		helper.clickOnIdle('#SetMinimalRowHeight');
 
 		selectFullTable();
 
@@ -314,8 +298,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#SetOptimalRowHeight')
-			.click();
+		helper.clickOnIdle('#SetOptimalRowHeight');
 
 		selectFullTable();
 
@@ -343,8 +326,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#DistributeRows')
-			.click();
+		helper.clickOnIdle('#DistributeRows');
 
 		selectFullTable();
 
@@ -372,8 +354,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#SetMinimalColumnWidth')
-			.click();
+		helper.clickOnIdle('#SetMinimalColumnWidth');
 
 		selectFullTable();
 
@@ -390,8 +371,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#SetOptimalColumnWidth')
-			.click();
+		helper.clickOnIdle('#SetOptimalColumnWidth');
 
 		selectFullTable();
 
@@ -410,8 +390,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 
 		openTablePanel();
 
-		cy.get('#DistributeColumns')
-			.click();
+		helper.clickOnIdle('#DistributeColumns');
 
 		selectFullTable();
 
diff --git a/cypress_test/package.json b/cypress_test/package.json
index 004acbc77..a951edcbe 100644
--- a/cypress_test/package.json
+++ b/cypress_test/package.json
@@ -8,6 +8,7 @@
     "cypress-failed-log": "2.7.0",
     "cypress-file-upload": "4.0.7",
     "cypress-select-tests": "1.5.7",
+    "cypress-wait-until": "1.7.1",
     "eslint": "6.8.0",
     "eslint-plugin-cypress-rules": "file:eslint_plugin",
     "get-port-cli": "2.0.0",
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
index 17e366ae6..a44469d7a 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -17,7 +17,6 @@ L.Control.MobileWizard = L.Control.extend({
 	_currentPath: [],
 	_tabs: [],
 	_currentScrollPosition: 0,
-	_lastSidebarData: '',
 
 	initialize: function (options) {
 		L.setOptions(this, options);
@@ -341,17 +340,6 @@ L.Control.MobileWizard = L.Control.extend({
 				window.mobileDialogId = data.id;
 			}
 
-			// Sometimes it happens that we get the same sidebar
-			// structure twice. This makes hard to test mobile wizard.
-			if (isSidebar && L.Browser.cypressTest) {
-				var dataString = JSON.stringify(data.children);
-				if (this._isActive && this.map.showSidebar &&
-					dataString === this._lastSidebarData) {
-					return;
-				}
-				this._lastSidebarData = dataString;
-			}
-
 			if (this.map.getDocType() === 'presentation')
 				$('#mobile-wizard-header').show();
 
commit b24482a972df1b5d9cf412ab61a39b8f7e67b7be
Author:     Dennis Francis <dennis.francis at collabora.com>
AuthorDate: Tue Jul 7 15:34:46 2020 +0530
Commit:     Dennis Francis <dennis.francis at collabora.com>
CommitDate: Wed Jul 8 17:00:23 2020 +0200

    position markers correctly w.r.t split-panes
    
    Change-Id: Ie095f1ad204e1f7ce04d4e3334e26a5fd0181f26
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98356
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Tested-by: Jenkins
    Reviewed-by: Dennis Francis <dennis.francis at collabora.com>

diff --git a/loleaflet/src/layer/marker/Marker.js b/loleaflet/src/layer/marker/Marker.js
index 3db3dbfd9..0d398c407 100644
--- a/loleaflet/src/layer/marker/Marker.js
+++ b/loleaflet/src/layer/marker/Marker.js
@@ -40,6 +40,7 @@ L.Marker = L.Layer.extend({
 	},
 
 	onAdd: function (map) {
+		this._splitPanesContext = map.getSplitPanesContext();
 		this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
 
 		this._initIcon();
@@ -64,7 +65,11 @@ L.Marker = L.Layer.extend({
 	getEvents: function () {
 		var events = {viewreset: this.update};
 
-		if (this._zoomAnimated) {
+		if (this._splitPanesContext) {
+			events.moveend = this.update;
+		}
+
+		if (this._zoomAnimated && !this._splitPanesContext) {
 			events.zoomanim = this._animateZoom;
 		}
 
@@ -103,13 +108,79 @@ L.Marker = L.Layer.extend({
 		return this;
 	},
 
-	update: function () {
+	_updateIconPosition: function () {
+
+		if (!this._icon) {
+			return;
+		}
 
-		if (this._icon) {
-			var pos = this._map.latLngToLayerPoint(this._latlng).round();
-			this._setPos(pos);
+		if (!this._splitPanesContext) {
+			this._setPos(this._map.latLngToLayerPoint(this._latlng).round());
+			return;
 		}
 
+		var splitPos = this._splitPanesContext.getSplitPos();
+		var docPos = this._map.project(this._latlng);
+		var pixelOrigin = this._map.getPixelOrigin();
+		var mapPanePos = this._map._getMapPanePos();
+		var layerSplitPos = splitPos.subtract(mapPanePos);
+
+		var makeHidden = false;
+
+		if (splitPos.x) {
+			layerSplitPos.x += 1;
+		}
+
+		if (splitPos.y) {
+			layerSplitPos.y += 1;
+		}
+
+		var layerPos = new L.Point(0, 0);
+		var iconRect = this._icon.getBoundingClientRect();
+		var eps = new L.Point(iconRect.width, iconRect.height);
+
+		if (docPos.x <= splitPos.x) {
+			// fixed region.
+			layerPos.x = docPos.x - mapPanePos.x;
+			if (splitPos.x - docPos.x <= eps.x) {
+				// Hide the marker if it is close to the split *and* the non-fixed region has moved away from the fixed.
+				makeHidden = (mapPanePos.x !== pixelOrigin.x);
+			}
+		}
+		else {
+			layerPos.x = docPos.x - pixelOrigin.x;
+			if (layerPos.x < layerSplitPos.x) {
+				// do not encroach the fixed region.
+				makeHidden = true;
+			}
+		}
+
+		if (docPos.y <= splitPos.y) {
+			// fixed region.
+			layerPos.y = docPos.y - mapPanePos.y;
+			if (splitPos.y - docPos.y <= eps.y) {
+				// Hide the marker if it is close to the split *and* the non-fixed region has moved away from the fixed.
+				makeHidden = (mapPanePos.y !== pixelOrigin.y);
+			}
+		}
+		else {
+			layerPos.y = docPos.y - pixelOrigin.y;
+			if (layerPos.y < layerSplitPos.y) {
+				// do not encroach the fixed region.
+				makeHidden = true;
+			}
+		}
+
+		var newVisibility = makeHidden ? 'hidden' : 'visible';
+		if (this._icon.style.visibility != newVisibility) {
+			this._icon.style.visibility = newVisibility;
+		}
+
+		this._setPos(layerPos);
+	},
+
+	update: function () {
+		this._updateIconPosition();
 		return this;
 	},
 


More information about the Libreoffice-commits mailing list