fix(page): teach page.click() to click partially offscreen buttons (#2806)

Originally, we use `Element.scrollIntoViewIfNeeded` to make sure
button is on screen before trying to click it.

However, `Element.scrollIntoViewIfNeeded` doesn't work in certain
scenarios, e.g. when element is partially visible and horizontal
scrolling is required to make it fully visible.

This patch polyfills `element.scrollIntoViewIfNeeded` using
IntersectionObserver and `Element.scrollIntoView`.

Fixes #2804.

test/assets/offscreenbuttons.html

@@ -0,0 +1,34 @@
+<style>
+  button {
+    position: absolute;
+    width: 100px;
+    height: 20px;
+  }
+
+  #btn0 { right: 0px; top: 0; }
+  #btn1 { right: -10px; top: 25px; }
+  #btn2 { right: -20px; top: 50px; }
+  #btn3 { right: -30px; top: 75px; }
+  #btn4 { right: -40px; top: 100px; }
+  #btn5 { right: -50px; top: 125px; }
+  #btn6 { right: -60px; top: 150px; }
+  #btn7 { right: -70px; top: 175px; }
+  #btn8 { right: -80px; top: 200px; }
+  #btn9 { right: -90px; top: 225px; }
+</style>
+<button id=btn0>0</button>
+<button id=btn1>1</button>
+<button id=btn2>2</button>
+<button id=btn3>3</button>
+<button id=btn4>4</button>
+<button id=btn5>5</button>
+<button id=btn6>6</button>
+<button id=btn7>7</button>
+<button id=btn8>8</button>
+<button id=btn9>9</button>
+<script>
+window.addEventListener('DOMContentLoaded', () => {
+  for (const button of Array.from(document.querySelectorAll('button')))
+    button.addEventListener('click', () => console.log('button #' + button.textContent + ' clicked'), false);
+}, false);
+</script>

test/input.spec.js

@@ -29,6 +29,29 @@ module.exports.addTests = function({testRunner, expect, DeviceDescriptors}) {
       expect(await page.evaluate(() => result)).toBe('Clicked');
     });
 
+    it('should click offscreen buttons', async({page, server}) => {
+      await page.goto(server.PREFIX + '/offscreenbuttons.html');
+      const messages = [];
+      page.on('console', msg => messages.push(msg.text()));
+      for (let i = 0; i < 10; ++i) {
+        // We might've scrolled to click a button - reset to (0, 0).
+        await page.evaluate(() => window.scrollTo(0, 0));
+        await page.click(`#btn${i}`);
+      }
+      expect(messages).toEqual([
+        'button #0 clicked',
+        'button #1 clicked',
+        'button #2 clicked',
+        'button #3 clicked',
+        'button #4 clicked',
+        'button #5 clicked',
+        'button #6 clicked',
+        'button #7 clicked',
+        'button #8 clicked',
+        'button #9 clicked'
+      ]);
+    });
+
     it('should click on checkbox input and toggle', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/checkbox.html');
       expect(await page.evaluate(() => result.check)).toBe(null);