core(full-page-screenshot): get the MAX_TEXTURE_SIZE from the browser

lighthouse-core/gather/gatherers/full-page-screenshot.js

@@ -9,12 +9,11 @@
 
 const Gatherer = require('./gatherer.js');
 const pageFunctions = require('../../lib/page-functions.js');
+const Driver = require('../driver.js'); // eslint-disable-line no-unused-vars
 
 // JPEG quality setting
 // Exploration and examples of reports using different quality settings: https://docs.google.com/document/d/1ZSffucIca9XDW2eEwfoevrk-OTl7WQFeMf0CgeJAA8M/edit#
 const FULL_PAGE_SCREENSHOT_QUALITY = 30;
-// Maximum screenshot height in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=770769
-const MAX_SCREENSHOT_HEIGHT = 16384;
 
 /**
  * @param {string} str
@@ -24,12 +23,24 @@ function snakeCaseToCamelCase(str) {
 }
 
 class FullPageScreenshot extends Gatherer {
+  /**
+   * @param {Driver} driver
+   * @return {Promise<number>}
+   * @see https://bugs.chromium.org/p/chromium/issues/detail?id=770769
+   */
+  async getMaxScreenshotHeight(driver) {
+    return await driver.evaluateAsync(`(${pageFunctions.getMaxTextureSize.toString()})()`, {
+      useIsolation: true,
+    });
+  }
+
   /**
    * @param {LH.Gatherer.PassContext} passContext
    * @return {Promise<LH.Artifacts.FullPageScreenshot['screenshot']>}
    */
   async _takeScreenshot(passContext) {
     const driver = passContext.driver;
+    const maxScreenshotHeight = await this.getMaxScreenshotHeight(driver);
     const metrics = await driver.sendCommand('Page.getLayoutMetrics');
 
     // Width should match emulated width, without considering content overhang.
@@ -38,8 +49,8 @@ class FullPageScreenshot extends Gatherer {
     // Note: If the page is zoomed, many assumptions fail.
     //
     // Height should be as tall as the content. So we use contentSize.height
-    const width = Math.min(metrics.layoutViewport.clientWidth, MAX_SCREENSHOT_HEIGHT);
-    const height = Math.min(metrics.contentSize.height, MAX_SCREENSHOT_HEIGHT);
+    const width = Math.min(metrics.layoutViewport.clientWidth, maxScreenshotHeight);
+    const height = Math.min(metrics.contentSize.height, maxScreenshotHeight);
 
     await driver.sendCommand('Emulation.setDeviceMetricsOverride', {
       // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
@@ -160,4 +171,3 @@ class FullPageScreenshot extends Gatherer {
 }
 
 module.exports = FullPageScreenshot;
-module.exports.MAX_SCREENSHOT_HEIGHT = MAX_SCREENSHOT_HEIGHT;

lighthouse-core/lib/page-functions.js

@@ -168,6 +168,16 @@ function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit =
   }
 }
 
+/**
+ * Get the maximum size of a texture the GPU can handle
+ * @see https://bugs.chromium.org/p/chromium/issues/detail?id=770769#c13
+ */
+/* istanbul ignore next */ // todo, c8 ignore?
+function getMaxTextureSize() {
+  const canvas = document.createElement('canvas');
+  const webGL = canvas.getContext('webgl');
+  return webGL.getParameter(webGL.MAX_TEXTURE_SIZE);
+}
 
 /**
  * Computes a memory/CPU performance benchmark index to determine rough device class.
@@ -519,6 +529,7 @@ module.exports = {
   getOuterHTMLSnippet: getOuterHTMLSnippet,
   computeBenchmarkIndex: computeBenchmarkIndex,
   computeBenchmarkIndexString: computeBenchmarkIndex.toString(),
+  getMaxTextureSize,
   getNodeDetailsString,
   getNodePathString: getNodePath.toString(),
   getNodeSelectorString: getNodeSelector.toString(),

lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js

@@ -9,6 +9,9 @@
 
 const FullPageScreenshotGatherer = require('../../../gather/gatherers/full-page-screenshot.js');
 
+// Headless's default value is (1024 * 16), but this varies by device
+const maxTextureSizeMock = 1024 * 8;
+
 /**
  * @param {{contentSize: {width: number, height: number}, screenSize: {width?: number, height?: number, dpr: number}, screenshotData: string[]}}
  */
@@ -18,6 +21,9 @@ function createMockDriver({contentSize, screenSize, screenshotData}) {
       if (code === 'window.innerWidth') {
         return contentSize.width;
       }
+      if (code.includes('MAX_TEXTURE_SIZE')) {
+        return maxTextureSizeMock;
+      }
       if (code.includes('document.documentElement.clientWidth')) {
         return {
           width: screenSize.width,
@@ -191,7 +197,7 @@ describe('FullPageScreenshot gatherer', () => {
       'Emulation.setDeviceMetricsOverride',
       expect.objectContaining({
         deviceScaleFactor: 1,
-        height: FullPageScreenshotGatherer.MAX_SCREENSHOT_HEIGHT,
+        height: maxTextureSizeMock,
       })
     );
   });