api: remove ElementHandle.visibleRatio (#1069)

docs/api.md

@@ -2292,7 +2292,6 @@ ElementHandle instances can be used as arguments in [`page.$eval()`](#pageevalse
 - [elementHandle.tripleclick([options])](#elementhandletripleclickoptions)
 - [elementHandle.type(text[, options])](#elementhandletypetext-options)
 - [elementHandle.uncheck([options])](#elementhandleuncheckoptions)
-- [elementHandle.visibleRatio()](#elementhandlevisibleratio)
 <!-- GEN:stop -->
 <!-- GEN:toc-extends-JSHandle -->
 - [jsHandle.asElement()](#jshandleaselement)
@@ -2465,7 +2464,7 @@ If the element is detached from DOM, the method throws an error.
 #### elementHandle.scrollIntoViewIfNeeded()
 - returns: <[Promise]> Resolves after the element has been scrolled into view.
 
-This method tries to scroll element into view, unless it is completely visible as defined by [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)'s ```ratio```. See also [elementHandle.visibleRatio()](#elementhandlevisibleratio).
+This method tries to scroll element into view, unless it is completely visible as defined by [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)'s ```ratio```.
 
 Throws when ```elementHandle``` does not point to an element [connected](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected) to a Document or a ShadowRoot.
 
@@ -2556,11 +2555,6 @@ await elementHandle.press('Enter');
 
 If element is not already unchecked, it scrolls it into view if needed, and then uses [elementHandle.click](#elementhandleclickoptions) to click in the center of the element.
 
-#### elementHandle.visibleRatio()
-- returns: <[Promise]<[number]>> Returns the visible ratio as defined by [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
-
-Positive ratio means that some part of the element is visible in the current viewport. Ratio equal to one means that element is completely visible.
-
 ### class: JSHandle
 
 JSHandle represents an in-page JavaScript object. JSHandles can be created with the [page.evaluateHandle](#pageevaluatehandlepagefunction-args) method.

src/dom.ts

@@ -487,25 +487,6 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return result;
   }
 
-  visibleRatio(): Promise<number> {
-    return this._evaluateInUtility(async (node: Node) => {
-      if (node.nodeType !== Node.ELEMENT_NODE)
-        throw new Error('Node is not of type HTMLElement');
-      const element = node as Element;
-      const visibleRatio = await new Promise<number>(resolve => {
-        const observer = new IntersectionObserver(entries => {
-          resolve(entries[0].intersectionRatio);
-          observer.disconnect();
-        });
-        observer.observe(element);
-        // Firefox doesn't call IntersectionObserver callback unless
-        // there are rafs.
-        requestAnimationFrame(() => {});
-      });
-      return visibleRatio;
-    });
-  }
-
   async _waitForStablePosition(options: types.TimeoutOptions = {}): Promise<void> {
     const context = await this._context.frame._utilityContext();
     const stablePromise = context.evaluate((injected: Injected, node: Node, timeout: number) => {

test/elementhandle.spec.js

@@ -296,36 +296,20 @@ module.exports.describe = function({testRunner, expect, FFOX, CHROMIUM, WEBKIT})
     });
   });
 
-  describe('ElementHandle.visibleRatio', function() {
-    it('should work', async({page, server}) => {
-      await page.goto(server.PREFIX + '/offscreenbuttons.html');
-      for (let i = 0; i < 11; ++i) {
-        const button = await page.$('#btn' + i);
-        const ratio = await button.visibleRatio();
-        expect(Math.round(ratio * 10)).toBe(10 - i);
-      }
-    });
-    it('should work when Node is removed', async({page, server}) => {
-      await page.goto(server.PREFIX + '/offscreenbuttons.html');
-      await page.evaluate(() => delete window['Node']);
-      for (let i = 0; i < 11; ++i) {
-        const button = await page.$('#btn' + i);
-        const ratio = await button.visibleRatio();
-        expect(Math.round(ratio * 10)).toBe(10 - i);
-      }
-    });
-  });
-
   describe('ElementHandle.scrollIntoViewIfNeeded', function() {
     it.skip(FFOX)('should work', async({page, server}) => {
       await page.goto(server.PREFIX + '/offscreenbuttons.html');
       for (let i = 0; i < 11; ++i) {
         const button = await page.$('#btn' + i);
-        const before = await button.visibleRatio();
-        expect(Math.round(before * 10)).toBe(10 - i);
+        const before = await button.evaluate(button => {
+          return button.getBoundingClientRect().right - window.innerWidth;
+        });
+        expect(before).toBe(10 * i);
         await button.scrollIntoViewIfNeeded();
-        const after = await button.visibleRatio();
-        expect(Math.round(after * 10)).toBe(10);
+        const after = await button.evaluate(button => {
+          return button.getBoundingClientRect().right - window.innerWidth;
+        });
+        expect(after <= 0).toBe(true);
         await page.evaluate(() => window.scrollTo(0, 0));
       }
     });