From 6a7b8a483195efa32d5bcba61c17834b8416a2b0 Mon Sep 17 00:00:00 2001 From: Aleksey Popov Date: Tue, 22 Mar 2022 15:35:13 +0400 Subject: [PATCH 1/3] refactor: simplified checking scrollability of the element --- src/client/core/utils/shared/scroll.ts | 31 +++----------------------- 1 file changed, 3 insertions(+), 28 deletions(-) diff --git a/src/client/core/utils/shared/scroll.ts b/src/client/core/utils/shared/scroll.ts index 96e437060b..59cacb37a2 100644 --- a/src/client/core/utils/shared/scroll.ts +++ b/src/client/core/utils/shared/scroll.ts @@ -1,26 +1,6 @@ import adapter from './adapter/index'; -import AxisValues from '../../../../shared/utils/values/axis-values'; - -const SCROLLABLE_OVERFLOW_STYLE_RE = /auto|scroll/i; -const DEFAULT_IE_SCROLLABLE_OVERFLOW_STYLE_VALUE = 'visible'; - -function getScrollable (el: Element): AxisValues { - const overflowX = adapter.style.get(el, 'overflowX') as string; - const overflowY = adapter.style.get(el, 'overflowY') as string; - let scrollableHorizontally = SCROLLABLE_OVERFLOW_STYLE_RE.test(overflowX); - let scrollableVertically = SCROLLABLE_OVERFLOW_STYLE_RE.test(overflowY); - - // IE11 and MS Edge bug: There are two properties: overflow-x and overflow-y. - // If one property is set so that the browser may show scrollbars (`auto` or `scroll`) and the second one is set to 'visible', - // then the second one will work as if it had the 'auto' value. - if (adapter.browser.isIE) { - scrollableHorizontally = scrollableHorizontally || scrollableVertically && overflowX === DEFAULT_IE_SCROLLABLE_OVERFLOW_STYLE_VALUE; - scrollableVertically = scrollableVertically || scrollableHorizontally && overflowY === DEFAULT_IE_SCROLLABLE_OVERFLOW_STYLE_VALUE; - } - - return new AxisValues(scrollableHorizontally, scrollableVertically); -} +const SCROLLABLE_OVERFLOW_STYLE_RE = /auto|scroll/i; function hasBodyScroll (el: HTMLBodyElement): boolean { const overflowX = adapter.style.get(el, 'overflowX') as string; @@ -79,13 +59,8 @@ export function hasScroll (el: Element): boolean { if (adapter.dom.isHtmlElement(el)) return hasHTMLElementScroll(el); - const scrollable = getScrollable(el); - - if (!scrollable.x && !scrollable.y) - return false; - - const hasVerticalScroll = scrollable.y && el.scrollHeight > el.clientHeight; - const hasHorizontalScroll = scrollable.x && el.scrollWidth > el.clientWidth; + const hasVerticalScroll = el.scrollHeight > el.clientHeight; + const hasHorizontalScroll = el.scrollWidth > el.clientWidth; return hasHorizontalScroll || hasVerticalScroll; } From 92a2efba7e40b7815b8406f484abba1b2c52043a Mon Sep 17 00:00:00 2001 From: Aleksey Popov Date: Tue, 29 Mar 2022 13:41:38 +0400 Subject: [PATCH 2/3] fix: added the hidden in the SCROLLABLE_OVERFLOW_STYLE_RE --- src/client/core/utils/shared/scroll.ts | 33 ++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/src/client/core/utils/shared/scroll.ts b/src/client/core/utils/shared/scroll.ts index 59cacb37a2..eab7ba3f30 100644 --- a/src/client/core/utils/shared/scroll.ts +++ b/src/client/core/utils/shared/scroll.ts @@ -1,6 +1,26 @@ 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 { + const overflowX = adapter.style.get(el, 'overflowX') as string; + const overflowY = adapter.style.get(el, 'overflowY') as string; + let scrollableHorizontally = SCROLLABLE_OVERFLOW_STYLE_RE.test(overflowX); + let scrollableVertically = SCROLLABLE_OVERFLOW_STYLE_RE.test(overflowY); + + // IE11 and MS Edge bug: There are two properties: overflow-x and overflow-y. + // If one property is set so that the browser may show scrollbars (`auto` or `scroll`) and the second one is set to 'visible', + // then the second one will work as if it had the 'auto' value. + if (adapter.browser.isIE) { + scrollableHorizontally = scrollableHorizontally || scrollableVertically && overflowX === DEFAULT_IE_SCROLLABLE_OVERFLOW_STYLE_VALUE; + scrollableVertically = scrollableVertically || scrollableHorizontally && overflowY === DEFAULT_IE_SCROLLABLE_OVERFLOW_STYLE_VALUE; + } + + return new AxisValues(scrollableHorizontally, scrollableVertically); +} function hasBodyScroll (el: HTMLBodyElement): boolean { const overflowX = adapter.style.get(el, 'overflowX') as string; @@ -20,7 +40,7 @@ function hasBodyScroll (el: HTMLBodyElement): boolean { } return (scrollableHorizontally || scrollableVertically) && - bodyScrollHeight > documentElement.scrollHeight; + bodyScrollHeight > documentElement.scrollHeight; } function hasHTMLElementScroll (el: HTMLHtmlElement): boolean { @@ -59,8 +79,13 @@ export function hasScroll (el: Element): boolean { if (adapter.dom.isHtmlElement(el)) return hasHTMLElementScroll(el); - const hasVerticalScroll = el.scrollHeight > el.clientHeight; - const hasHorizontalScroll = el.scrollWidth > el.clientWidth; + const scrollable = getScrollable(el); + + if (!scrollable.x && !scrollable.y) + return false; + + const hasVerticalScroll = scrollable.y && el.scrollHeight > el.clientHeight; + const hasHorizontalScroll = scrollable.x && el.scrollWidth > el.clientWidth; return hasHorizontalScroll || hasVerticalScroll; } From 6af1cfee21a0ad5cc71e4b47c165bba7e166b827 Mon Sep 17 00:00:00 2001 From: Aleksey Popov Date: Wed, 30 Mar 2022 14:50:23 +0400 Subject: [PATCH 3/3] feat: added scrolling to a hidden element into the test scroll into view --- .../scroll/pages/scroll-automations.html | 21 +++++++++++++++++++ .../testcafe-fixtures/scroll-automations.js | 7 ++++++- 2 files changed, 27 insertions(+), 1 deletion(-) 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 index 9a315ea96a..a7a7eab3bc 100644 --- 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; + } @@ -50,6 +66,11 @@
+
+
+
+
+