Merge remote-tracking branch 'origin/master' into mocha-core

Author: connorjclark

lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -147,6 +147,11 @@
 
   // Ensure long-task collection still works when performance.now is redefined
   window.performance.now = 'right now';
+
+  // Ensure bounding rectangles still work when getBoundingClientRect is overriden.
+  window.HTMLElement.prototype.getBoundingClientRect = function() {
+    return {top: '', left: ''};
+  };
 </script>
 
 <div>

lighthouse-core/gather/driver/execution-context.js

@@ -215,6 +215,7 @@ class ExecutionContext {
       window.__nativePerformance = window.performance;
       window.__nativeFetch = window.fetch;
       window.__ElementMatches = window.Element.prototype.matches;
+      window.__HTMLElementBoundingClientRect = window.HTMLElement.prototype.getBoundingClientRect;
       // Ensure the native `performance.now` is not overwritable.
       const performance = window.performance;
       const performanceNow = window.performance.now;

lighthouse-core/gather/gatherers/iframe-elements.js

@@ -17,10 +17,13 @@ const pageFunctions = require('../../lib/page-functions.js');
  */
 /* c8 ignore start */
 function collectIFrameElements() {
+  const realBoundingClientRect = window.__HTMLElementBoundingClientRect ||
+    window.HTMLElement.prototype.getBoundingClientRect;
+
   // @ts-expect-error - put into scope via stringification
   const iFrameElements = getElementsInDocument('iframe'); // eslint-disable-line no-undef
   return iFrameElements.map(/** @param {HTMLIFrameElement} node */ (node) => {
-    const clientRect = node.getBoundingClientRect();
+    const clientRect = realBoundingClientRect.call(node);
     const {top, bottom, left, right, width, height} = clientRect;
     return {
       id: node.id,

lighthouse-core/lib/page-functions.js

@@ -434,8 +434,10 @@ function getNodeLabel(element) {
  * @return {LH.Artifacts.Rect}
  */
 function getBoundingClientRect(element) {
+  const realBoundingClientRect = window.__HTMLElementBoundingClientRect ||
+    window.HTMLElement.prototype.getBoundingClientRect;
   // The protocol does not serialize getters, so extract the values explicitly.
-  const rect = element.getBoundingClientRect();
+  const rect = realBoundingClientRect.call(element);
   return {
     top: Math.round(rect.top),
     bottom: Math.round(rect.bottom),

lighthouse-core/test/lib/page-functions-test.js

@@ -21,7 +21,9 @@ describe('Page Functions', () => {
     global.Node = Node;
     global.HTMLElement = HTMLElement;
     global.document = document;
-    global.window = {};
+    global.window = {
+      HTMLElement, // for getBoundingClientRect fallback.
+    };
   });
 
   afterAll(() => {

types/externs.d.ts

@@ -23,6 +23,7 @@ declare global {
     __nativeFetch: typeof fetch,
     __nativeURL: typeof URL;
     __ElementMatches: Element['matches'];
+    __HTMLElementBoundingClientRect: HTMLElement['getBoundingClientRect'];
 
     /** Used for monitoring long tasks in the test page. */
     ____lastLongTask?: number;