core(full-page-screenshot): do not render zero size rects (#11853)

GoogleChrome · Mar 23, 2021 · 2c5486e · 2c5486e
1 parent 398939e
commit 2c5486e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js
@@ -88,7 +88,7 @@ class FullPageScreenshot extends Gatherer {
       for (const [node, id] of lhIdToElements.entries()) {
         // @ts-expect-error - getBoundingClientRect put into scope via stringification
         const rect = getBoundingClientRect(node);
-        if (rect.width || rect.height) nodes[id] = rect;
+        nodes[id] = rect;
       }
 
       return nodes;

diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js
@@ -523,9 +523,8 @@ class DetailsRenderer {
 
     if (!this._fullPageScreenshot) return element;
 
-    const rect =
-      (item.lhId ? this._fullPageScreenshot.nodes[item.lhId] : null) || item.boundingRect;
-    if (!rect) return element;
+    const rect = item.lhId && this._fullPageScreenshot.nodes[item.lhId];
+    if (!rect || rect.width === 0 || rect.height === 0) return element;
 
     const maxThumbnailSize = {width: 147, height: 100};
     const elementScreenshot = ElementScreenshotRenderer.render(

diff --git a/lighthouse-core/test/report/html/renderer/details-renderer-test.js b/lighthouse-core/test/report/html/renderer/details-renderer-test.js
@@ -434,7 +434,7 @@ describe('DetailsRenderer', () => {
         assert.equal(screenshotEl.dataset['rectTop'], '1');
       });
 
-      it('renders screenshot using item boundingRect if missing in FullPageScreenshot', () => {
+      it('does not render screenshot if rect missing in FullPageScreenshot', () => {
         createRenderer({
           fullPageScreenshot: {
             screenshot: {
@@ -462,8 +462,7 @@ describe('DetailsRenderer', () => {
         const el = renderer.render(details);
         const nodeEl = el.querySelector('.lh-node');
         const screenshotEl = nodeEl.querySelector('.lh-element-screenshot');
-        assert.equal(screenshotEl.dataset['rectLeft'], '0');
-        assert.equal(screenshotEl.dataset['rectTop'], '0');
+        expect(screenshotEl).toBeNull();
       });
     });