Skip to content

Commit

Permalink
chore(infrastructure): Workaround for Edge autofocus bug (material-co…
Browse files Browse the repository at this point in the history
…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)).
  • Loading branch information
acdvorak authored Sep 2, 2018
1 parent 076faf4 commit cc765bd
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions test/screenshot/spec/fixture.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ class TestFixture {
this.fontsLoaded.then(() => {
console.log('Fonts loaded!');
this.measureMobileViewport_();
this.autoFocus_();
this.notifyWebDriver_();
});
}
Expand Down Expand Up @@ -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', '');
Expand Down

0 comments on commit cc765bd

Please sign in to comment.