report: do not show element screenshot if out of bounds

lighthouse-core/report/html/renderer/details-renderer.js

@@ -533,7 +533,7 @@ class DetailsRenderer {
       item.boundingRect,
       maxThumbnailSize
     );
-    element.prepend(elementScreenshot);
+    elementScreenshot && element.prepend(elementScreenshot);
 
     return element;
   }

lighthouse-core/report/html/renderer/element-screenshot-renderer.js

@@ -17,6 +17,22 @@
 /** @typedef {LH.Artifacts.Rect} Rect */
 /** @typedef {{width: number, height: number}} Size */
 
+/**
+ * Returns whether rect2 is contained entirely within rect1;
+ * @param {LH.Artifacts.Rect} rect1
+ * @param {LH.Artifacts.Rect} rect2
+ * @return {boolean}
+ */
+// We sometimes run this as a part of a gatherer script injected into the page, so prevent
+// renaming the function for code coverage.
+/* istanbul ignore next */
+function rectContains(rect1, rect2) {
+  return rect2.top >= rect1.top &&
+    rect2.right <= rect1.right &&
+    rect2.bottom <= rect1.bottom &&
+    rect2.left >= rect1.left;
+}
+
 /**
  * @param {number} value
  * @param {number} min
@@ -153,13 +169,16 @@ class ElementScreenshotRenderer {
         top: Number(el.dataset['rectTop']),
         bottom: Number(el.dataset['rectTop']) + Number(el.dataset['rectHeight']),
       };
-      overlay.appendChild(ElementScreenshotRenderer.render(
+      const screenshotElement = ElementScreenshotRenderer.render(
         dom,
         templateContext,
         fullPageScreenshot,
         elementRectSC,
         maxLightboxSize
-      ));
+      );
+      if (!screenshotElement) return;
+
+      overlay.appendChild(screenshotElement);
       overlay.addEventListener('click', () => {
         overlay.remove();
       });
@@ -188,14 +207,28 @@ class ElementScreenshotRenderer {
   /**
    * Renders an element with surrounding context from the full page screenshot.
    * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
+   * Returns null if element rect is outside screenshot bounds.
    * @param {DOM} dom
    * @param {ParentNode} templateContext
    * @param {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
    * @param {LH.Artifacts.Rect} elementRectSC Region of screenshot to highlight.
    * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
-   * @return {Element}
+   * @return {Element|null}
    */
   static render(dom, templateContext, fullPageScreenshot, elementRectSC, maxRenderSizeDC) {
+    const fullPageScreenshotRect = {
+      left: 0,
+      top: 0,
+      right: fullPageScreenshot.width,
+      bottom: fullPageScreenshot.height,
+      width: fullPageScreenshot.width,
+      height: fullPageScreenshot.height,
+    };
+    if (!rectContains(fullPageScreenshotRect, elementRectSC)) {
+      // Element is out of bounds of screenshot.
+      return null;
+    }
+
     const tmpl = dom.cloneTemplate('#tmpl-lh-element-screenshot', templateContext);
     const containerEl = dom.find('.lh-element-screenshot', tmpl);
 

lighthouse-core/test/report/html/renderer/element-screenshot-renderer-test.js

@@ -21,6 +21,18 @@ const TEMPLATE_FILE = fs.readFileSync(
   'utf8'
 );
 
+/**
+ * @param {{left: number, top: number, width: number, height:number}} opts
+ * @returns {LH.Artifacts.Rect}
+ */
+function makeRect(opts) {
+  return {
+    ...opts,
+    right: opts.left + opts.width,
+    bottom: opts.top + opts.height,
+  };
+}
+
 describe('ElementScreenshotRenderer', () => {
   let dom;
 
@@ -38,17 +50,17 @@ describe('ElementScreenshotRenderer', () => {
     global.Util = undefined;
   });
 
-  it('renders screenshot', () => {
+  it.only('renders screenshot', () => {
     const fullPageScreenshot = {
       width: 1000,
       height: 1000,
     };
-    const elementRectSC = {
+    const elementRectSC = makeRect({
       left: 50,
       top: 50,
       width: 200,
       height: 300,
-    };
+    });
     const renderContainerSizeDC = {
       width: 500,
       height: 500,
@@ -81,6 +93,30 @@ describe('ElementScreenshotRenderer', () => {
     /* eslint-enable max-len */
   });
 
+  it('returns null if element is out of bounds', () => {
+    const fullPageScreenshot = {
+      width: 1000,
+      height: 1000,
+    };
+    const elementRectSC = makeRect({
+      left: 50,
+      top: 5000,
+      width: 200,
+      height: 300,
+    });
+    const renderContainerSizeDC = {
+      width: 500,
+      height: 500,
+    };
+    expect(ElementScreenshotRenderer.render(
+      dom,
+      dom.document(),
+      fullPageScreenshot,
+      elementRectSC,
+      renderContainerSizeDC
+    )).toBe(null);
+  });
+
   describe('getScreenshotPositions', () => {
     it('centers the screenshot on the highlighted area', () => {
       expect(