scroll to element that is in shadow root (closes #4222) (#4397)

DevExpress · Nov 6, 2019 · dc4c7f2 · dc4c7f2
1 parent 8c7f6f9
commit dc4c7f2
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 4 deletions.
diff --git a/src/client/automation/playback/scroll.js b/src/client/automation/playback/scroll.js
@@ -63,7 +63,7 @@ export default class ScrollAutomation {
         left = Math.max(left, 0);
         top  = Math.max(top, 0);
 
-        let scrollPromise = scrollController.waitForScroll();
+        let scrollPromise = scrollController.waitForScroll(scrollElement);
 
         styleUtils.setScrollLeft(scrollElement, left);
         styleUtils.setScrollTop(scrollElement, top);

diff --git a/src/client/core/scroll-controller.js b/src/client/core/scroll-controller.js
@@ -1,6 +1,6 @@
 import { eventSandbox, Promise } from './deps/hammerhead';
 import { EventEmitter } from './utils/service';
-
+import { isShadowElement } from './utils/dom';
 
 const listeners = eventSandbox.listeners;
 
@@ -31,7 +31,7 @@ class ScrollController {
         listeners.addFirstInternalHandler(window, ['scroll'], (...args) => this._internalListener(...args));
     }
 
-    waitForScroll () {
+    waitForScroll (scrollElement) {
         let promiseResolver = null;
 
         const promise = new Promise(resolve => {
@@ -41,13 +41,26 @@ class ScrollController {
         promise.cancel = () => this.events.off('scroll', promiseResolver);
 
         if (this.initialized)
-            this.events.once('scroll', promiseResolver);
+            this.handleScrollEvents(scrollElement, promiseResolver);
         else
             promiseResolver();
 
         return promise;
     }
 
+    handleScrollEvents (el, handler) {
+        this.events.once('scroll', handler);
+
+        if (isShadowElement(el)) {
+            listeners.initElementListening(el, ['scroll']);
+            listeners.addFirstInternalHandler(el, ['scroll'], (...args) => {
+                this._internalListener(...args);
+
+                listeners.cancelElementListening(el);
+            });
+        }
+    }
+
     stopPropagation () {
         this.stopPropagationFlag = true;
     }

diff --git a/src/client/core/utils/dom.js b/src/client/core/utils/dom.js
@@ -499,3 +499,7 @@ export function setElementValue (element, value) {
 
     return value;
 }
+
+export function isShadowElement (element) {
+    return element && element.getRootNode && findDocument(element) !== element.getRootNode();
+}
diff --git a/test/functional/fixtures/regression/gh-4222/pages/index.html b/test/functional/fixtures/regression/gh-4222/pages/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>gh-4222</title>
+    <style>
+        .scroll-content-div {
+            background-image: linear-gradient(red, yellow);
+        }
+
+        button {
+            margin-top: 2000px;
+        }
+    </style>
+</head>
+<body>
+
+<script>
+    customElements.define('scrollable-area',
+        class extends HTMLElement {
+            constructor () {
+                super();
+
+                let template        = document.getElementById('scrollable-area-template');
+                let templateContent = template.content;
+
+                const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(templateContent.cloneNode(true));
+            }
+        });
+</script>
+
+<template id="scrollable-area-template">
+    <style>
+        .scrollable-area-div {
+            height: 500px;
+            width: 100px;
+            overflow-y: auto;
+        }
+    </style>
+
+    <div class="scrollable-area-div">
+        <slot name="scroll-content"></slot>
+    </div>
+</template>
+
+<scrollable-area>
+    <div class="scroll-content-div" slot="scroll-content">
+        <button onclick="window.clicked = true;">click me</button>
+    </div>
+</scrollable-area>
+
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-4222/test.js b/test/functional/fixtures/regression/gh-4222/test.js
@@ -0,0 +1,7 @@
+describe('[Regression](GH-4222) - Should scroll to element that is inside a template/slot', function () {
+    it('Should scroll to element that is inside a template/slot', function () {
+        return runTests('testcafe-fixtures/index.js', null, { skip: 'ie' });
+    });
+});
+
+
diff --git a/test/functional/fixtures/regression/gh-4222/testcafe-fixtures/index.js b/test/functional/fixtures/regression/gh-4222/testcafe-fixtures/index.js
@@ -0,0 +1,13 @@
+import { ClientFunction } from 'testcafe';
+
+fixture `Template/Slots/Scrolling`
+    .page `http://localhost:3000/fixtures/regression/gh-4222/pages/index.html`;
+
+const isClicked = ClientFunction(() => window.clicked);
+
+test('Template/Slots/Scrolling', async t => {
+    await t.click('button');
+
+    await t.expect(isClicked()).eql(true);
+
+});
diff --git a/testcafe-hammerhead-14.9.2.tgz b/testcafe-hammerhead-14.9.2.tgz