fix: simplify checking scrollability of the element (closes #6601) (#…

…6937) * refactor: simplified checking scrollability of the element * fix: added the hidden in the SCROLLABLE_OVERFLOW_STYLE_RE * feat: added scrolling to a hidden element into the test scroll into view
DevExpress · Mar 30, 2022 · 30f53c0 · 30f53c0
1 parent 3197898
commit 30f53c0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/client/core/utils/shared/scroll.ts b/src/client/core/utils/shared/scroll.ts
@@ -2,7 +2,7 @@ import adapter from './adapter/index';
 import AxisValues from '../../../../shared/utils/values/axis-values';
 
 
-const SCROLLABLE_OVERFLOW_STYLE_RE               = /auto|scroll/i;
+const SCROLLABLE_OVERFLOW_STYLE_RE               = /auto|scroll|hidden/i;
 const DEFAULT_IE_SCROLLABLE_OVERFLOW_STYLE_VALUE = 'visible';
 
 function getScrollable (el: Element): AxisValues<boolean> {
@@ -40,7 +40,7 @@ function hasBodyScroll (el: HTMLBodyElement): boolean {
     }
 
     return (scrollableHorizontally || scrollableVertically) &&
-        bodyScrollHeight > documentElement.scrollHeight;
+           bodyScrollHeight > documentElement.scrollHeight;
 }
 
 function hasHTMLElementScroll (el: HTMLHtmlElement): boolean {

diff --git a/test/functional/fixtures/api/es-next/scroll/pages/scroll-automations.html b/test/functional/fixtures/api/es-next/scroll/pages/scroll-automations.html
@@ -20,6 +20,13 @@
             border: 1px solid black;
         }
 
+        #hidden {
+            height: 500px;
+            width: 500px;
+            overflow: hidden;
+            border: 1px solid black;
+        }
+
         #scrollable-deferred {
             height: 500px;
             width: 500px;
@@ -41,6 +48,15 @@
             left: 700px;
             position: absolute;
         }
+
+        #hidden-target {
+            width: 1000px;
+            height: 1000px;
+            background-color: black;
+            top: 700px;
+            left: 700px;
+            position: absolute;
+        }
     </style>
 </head>
 <body>
@@ -50,6 +66,11 @@
             <div id="target"></div>
         </div>
     </div>
+    <div id="hidden">
+        <div style="height: 5000px; width: 5000px; position: relative;">
+            <div id="hidden-target"></div>
+        </div>
+    </div>
 </div>
 <script>
     setTimeout(function () {

diff --git a/test/functional/fixtures/api/es-next/scroll/testcafe-fixtures/scroll-automations.js b/test/functional/fixtures/api/es-next/scroll/testcafe-fixtures/scroll-automations.js
@@ -23,9 +23,11 @@ fixture `Scroll/ScrollBy/ScrollIntoView`
 
 const selectorHTML               = Selector(() => document.scrollingElement || document.documentElement);
 const selectorScrollable         = Selector('#scrollable');
+const selectorHidden             = Selector('#hidden');
 const selectorScrollableDeferred = Selector('#scrollable-deferred');
 
-const target = Selector('#target');
+const target       = Selector('#target');
+const hiddenTarget = Selector('#hidden-target');
 
 async function assert (t, selector, expected) {
     const actual = await getScrollPosition(selector)();
@@ -179,6 +181,9 @@ test('scroll into view', async t => {
 
     await t.scrollIntoView(target, { offsetX: 1, offsetY: -1 });
     await t.expect(getScrollPosition(selectorScrollable)()).eql({ left: 652, top: 1248 });
+
+    await t.scrollIntoView(hiddenTarget);
+    await t.expect(getScrollPosition(selectorHidden)()).eql({ left: 749, top: 749 });
 });
 
 test('scroll/scrollby options', async t => {