chore(infrastructure): Workaround for Edge autofocus bug (material-co…

…mponents#3498)

This PR adds a [ponyfill](https://github.com/sindresorhus/ponyfill) for `autofocus` to `test/screenshot/fixture.js` as a workaround for [Edge platform issue #101198](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101198/):

> Autofocusing does not work on first page load. Autofocusing works only after reloading the page (either by pressing <kbd>F5</kbd> key, or by clicking `Refresh` button, or by focusing location bar and pressing <kbd>Enter</kbd> again), so effectively autofocus does not work at all.

This was supposedly fixed in Edge 15, but in PR material-components#3496, the first screenshot fails 100% of the time in Edge 17 due to a `<select autofocus>` element not being focused ([screenshot test report](https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/19_24_47_468/report/report.html)).

(cherry picked from commit cc765bd)

test/screenshot/spec/fixture.js

@@ -47,6 +47,7 @@ class TestFixture {
     this.fontsLoaded.then(() => {
       console.log('Fonts loaded!');
       this.measureMobileViewport_();
+      this.autoFocus_();
       this.notifyWebDriver_();
     });
   }
@@ -117,6 +118,33 @@ remove the 'test-viewport--mobile' class from the '<main class="test-viewport">'
     }
   }
 
+  /**
+   * Edge doesn't always set focus on `<select autofocus>` elements on the first page load.
+   * E.g.: https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/19_24_47_468/report/report.html
+   *
+   * This sounds suspiciously similar to an issue that was supposedly fixed in Edge 15:
+   * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101198/
+   *
+   * @private
+   */
+  autoFocus_() {
+    const autoFocusEls = [].filter.call(document.querySelectorAll('[autofocus]'), (el) => {
+      const style = getComputedStyle(el);
+      if (style.visibility === 'hidden' || style.display === 'none' || style.opacity < 0.1) {
+        return false;
+      }
+      const rect = el.getBoundingClientRect();
+      if (rect.height === 0 || rect.width === 0) {
+        return false;
+      }
+      return true;
+    });
+    const autoFocusEl = autoFocusEls[0];
+    if (autoFocusEl && document.activeElement !== autoFocusEl) {
+      autoFocusEl.focus();
+    }
+  }
+
   /** @private */
   notifyWebDriver_() {
     document.body.setAttribute('data-fonts-loaded', '');