Fix hasScroll for body with absolute positioning (closes DevExpress#1353

)
AndreyBelym · Apr 18, 2017 · 7382cec · 7382cec
1 parent 24da4de
commit 7382cec
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 2 deletions.
diff --git a/src/client/core/utils/style.js b/src/client/core/utils/style.js
@@ -89,8 +89,12 @@ export function hasScroll (el) {
         return true;
 
     //T174562 - wrong scrolling in iframes without src and others iframes
-    if (isHtmlElement && body)
-        return body.scrollHeight > body.clientHeight || body.scrollWidth > body.clientWidth;
+    if (isHtmlElement && body) {
+        var clientWidth  = Math.min(el.clientWidth, body.clientWidth);
+        var clientHeight = Math.min(el.clientHeight, body.clientHeight);
+
+        return body.scrollHeight > clientHeight || body.scrollWidth > clientWidth;
+    }
 
     return false;
 }

diff --git a/test/functional/fixtures/regression/gh-1353/pages/index.html b/test/functional/fixtures/regression/gh-1353/pages/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
+    <title></title>
+    <style>
+        body {
+            position: absolute;
+            margin:   0;
+            width:    100%;
+        }
+
+        #filler {
+            height: 2000px;
+            width: 200px;
+            background-color: red;
+        }
+
+        #target {
+            height: 200px;
+            width: 200px;
+            background-color: blue;
+        }
+    </style>
+</head>
+<body>
+<div id="filler"></div>
+<div id="target" onclick="window.targetClicked = true"></div>
+
+// NOTE: scrolling has issues in iOS Simulator https://github.com/DevExpress/testcafe/issues/1237
+<script>
+    var userAgent = window.navigator.userAgent.toLocaleLowerCase();
+    var isIOS = /(iphone|ipod|ipad)/.test(userAgent);
+
+    // NOTE: Try to avoid odd scrolls in iOS on sauceLabs
+    if (isIOS) {
+        var originWindowScrollTo = window.scrollTo;
+        var lastScrollTop        = window.scrollY;
+        var lastScrollLeft       = window.scrollX;
+
+        window.scrollTo = function () {
+            lastScrollLeft = arguments[0];
+            lastScrollTop  = arguments[1];
+
+            originWindowScrollTo.apply(window, arguments);
+        };
+
+        window.addEventListener('scroll', function () {
+            if (window.scrollX !== lastScrollLeft || window.scrollY !== lastScrollTop)
+                window.scrollTo(lastScrollLeft, lastScrollTop);
+        });
+
+        Object.defineProperty(document.body, 'scrollTop', {
+            get: function () {
+                return window.scrollY;
+            },
+
+            set: function (y) {
+                window.scrollTo(window.scrollX, y);
+            }
+        });
+
+        Object.defineProperty(document.body, 'scrollLeft', {
+            get: function () {
+                return window.scrollX;
+            },
+
+            set: function (x) {
+                window.scrollTo(x, window.scrollY);
+            }
+        });
+    }
+</script>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-1353/test.js b/test/functional/fixtures/regression/gh-1353/test.js
@@ -0,0 +1,5 @@
+describe('[Regression](GH-1353)', function () {
+    it('Document should be scrolled if body has "position: absolute"', function () {
+        return runTests('testcafe-fixtures/index-test.js', 'gh-1353');
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-1353/testcafe-fixtures/index-test.js b/test/functional/fixtures/regression/gh-1353/testcafe-fixtures/index-test.js
@@ -0,0 +1,12 @@
+import { ClientFunction } from 'testcafe';
+
+fixture `gh-1353`
+    .page `http://localhost:3000/fixtures/regression/gh-1353/pages/index.html`;
+
+const targetClicked = ClientFunction(() => window.targetClicked);
+
+test('gh-1353', async t => {
+    await t
+        .click('#target')
+        .expect(targetClicked()).ok();
+});