diff --git a/e2e/testcafe-devextreme/tests/common/eventsEngine.ts b/e2e/testcafe-devextreme/tests/common/eventsEngine.ts
new file mode 100644
index 00000000000..fc3d070ac95
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/eventsEngine.ts
@@ -0,0 +1,61 @@
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Events`
+  .page(url(__dirname, '../container.html'));
+
+const init = ClientFunction(() => {
+  const markup = `<div class="dx-viewport demo-container">
+      <div id="draggable" draggable="true" style="width: 200px; height: 200px; background-color: red;"></div>
+      <div id="target" style="width: 200px; height: 200px; background-color: black;"></div>
+      <div>hoverStartTriggerCount</div>
+      <div id="hoverStartTriggerCount">0</div>
+      <div>hoverEndTriggerCount</div>
+      <div id="hoverEndTriggerCount">0</div>
+  </div>`;
+
+  $('#container').html(markup);
+
+  const { DevExpress } = (window as any);
+
+  let hoverStartTriggerCount = 0;
+  let hoverEndTriggerCount = 0;
+
+  DevExpress.events.on($('#target'), 'dxhoverstart', () => {
+    hoverStartTriggerCount += 1;
+
+    $('#hoverStartTriggerCount').text(hoverStartTriggerCount);
+  });
+
+  DevExpress.events.on($('#target'), 'dxhoverend', () => {
+    hoverEndTriggerCount += 1;
+
+    $('#hoverEndTriggerCount').text(hoverEndTriggerCount);
+  });
+});
+
+test('The `dxhoverstart` event should be triggered after dragging and dropping an HTML draggable element (T1260277)', async (t) => {
+  const draggable = Selector('#draggable');
+  const target = Selector('#target');
+  const hoverStartTriggerCount = Selector('#hoverStartTriggerCount');
+  const hoverEndTriggerCount = Selector('#hoverEndTriggerCount');
+
+  await t
+    .drag(draggable, 0, 400, { speed: 1 });
+
+  // `.drag` does not trigger the `pointercancel` event.
+  // A sequence of `.drag` calls behaves like a single drag&drop operation,
+  // and each call does not trigger the `pointerup` event.
+  // Even if it did, the `pointercancel` event would not be triggered as specified in:
+  // https://www.w3.org/TR/pointerevents/#suppressing-a-pointer-event-stream
+  // This is a hack to test the event engine's logic.
+  await t.dispatchEvent(draggable, 'pointercancel');
+
+  await t
+    .drag(target, 0, 400, { speed: 1 });
+
+  await t.expect(hoverStartTriggerCount.textContent).eql('1');
+  await t.expect(hoverEndTriggerCount.textContent).eql('1');
+}).before(async () => {
+  await init();
+});
diff --git a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts
index 77f742ff03d..68342190e5c 100644
--- a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts
+++ b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts
@@ -91,9 +91,10 @@ export default class BootstrapExtractor {
   }
 
   async sassProcessor(): Promise<string> {
+    console.log('-----sassProcessor----->');
     const functions = await this.readSassFile('_functions.scss');
     const variables = await this.readSassFile('_variables.scss');
-    
+
     const variablesDarkFile = '_variables-dark.scss';
     const variablesDark = this.version === 5 && existsSync(this.getFilePath(variablesDarkFile)) ? await this.readSassFile(variablesDarkFile) : ''; // TODO: can be removed safely in bootstrap@6
 
diff --git a/packages/devextreme-themebuilder/tests/modules/builder.test.ts b/packages/devextreme-themebuilder/tests/modules/builder.test.ts
index b4f0f8ac762..c60a35d5496 100644
--- a/packages/devextreme-themebuilder/tests/modules/builder.test.ts
+++ b/packages/devextreme-themebuilder/tests/modules/builder.test.ts
@@ -69,6 +69,7 @@ describe('Builder integration tests', () => {
   }, buildTimeout);
 
   test('Build theme with changed color constants (generic)', async () => {
+    console.log('-----test 1----->');
     const allChangedVariables = metadata.generic.map((item) => ({
       key: item.Key,
       value: item.Type === 'color' ? '#abcdef' : '10px',
@@ -89,6 +90,7 @@ describe('Builder integration tests', () => {
   }, buildTimeout);
 
   test('Build theme with changed color constants (material)', async () => {
+    console.log('-----test 2----->');
     const allChangedVariables = metadata.material.map((item) => ({
       key: item.Key,
       value: item.Type === 'color' ? '#abcdef' : '10px',
diff --git a/packages/devextreme/js/events/pointer/mouse.js b/packages/devextreme/js/events/pointer/mouse.js
index 895bc0ccadb..d96798da009 100644
--- a/packages/devextreme/js/events/pointer/mouse.js
+++ b/packages/devextreme/js/events/pointer/mouse.js
@@ -1,18 +1,25 @@
 import { extend } from '../../core/utils/extend';
 import BaseStrategy from './base';
 import Observer from './observer';
+import browser from '../../core/utils/browser';
 
 const eventMap = {
     'dxpointerdown': 'mousedown',
     'dxpointermove': 'mousemove',
     'dxpointerup': 'mouseup',
-    'dxpointercancel': '',
+    'dxpointercancel': 'pointercancel',
     'dxpointerover': 'mouseover',
     'dxpointerout': 'mouseout',
     'dxpointerenter': 'mouseenter',
     'dxpointerleave': 'mouseleave'
 };
 
+// due to this https://bugs.webkit.org/show_bug.cgi?id=222632 issue
+if(browser.safari) {
+    // eslint-disable-next-line spellcheck/spell-checker
+    eventMap.dxpointercancel += ' ' + 'dragstart';
+}
+
 const normalizeMouseEvent = function(e) {
     e.pointerId = 1;