GoogleChrome · connorjclark · Mar 8, 2024 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=0.5">
+  <title>Document</title>
+</head>
+<body style="overflow: scroll;">
+  <h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
+</body>
+</html>
@@ -17,6 +17,7 @@ import formsAutoComplete from './test-definitions/forms-autocomplete.js';
 import fpsMax from './test-definitions/fps-max.js';
 import fpsMaxPassive from './test-definitions/fps-max-passive.js';
 import fpsScaled from './test-definitions/fps-scaled.js';
+import fpsOverflowX from './test-definitions/fps-overflow-x.js';
 import issuesMixedContent from './test-definitions/issues-mixed-content.js';
 import lanternFetch from './test-definitions/lantern-fetch.js';
 import lanternIdleCallbackLong from './test-definitions/lantern-idle-callback-long.js';
@@ -80,6 +81,7 @@ const smokeTests = [
   formsAutoComplete,
   fpsMax,
   fpsScaled,
+  fpsOverflowX,
   fpsMaxPassive,
   issuesMixedContent,
   lanternFetch,

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/** @type {LH.Config} */
+const config = {
+  extends: 'lighthouse:default',
+  settings: {
+    onlyCategories: ['performance'],
+  },
+};
+
+/**
+ * @type {Smokehouse.ExpectedRunnerResult}
+ */
+const expectations = {
+  artifacts: {
+    ViewportDimensions: {
+      innerWidth: 1325,
+      innerHeight: 2647,
+      outerWidth: 412,
+      outerHeight: 823,
+      devicePixelRatio: 1.75,
+    },
+  },
+  lhr: {
+    requestedUrl: 'http://localhost:10200/scaled-overflow-content.html',
+    finalDisplayedUrl: 'http://localhost:10200/scaled-overflow-content.html',
+    audits: {},
+    fullPageScreenshot: {
+      nodes: {
+        _includes: [
+          [
+            /-BODY$/,
+            {
+              top: 21,
+              bottom: 58,
+              left: 8,
+              right: 816,
+              width: 808,
+              height: 37,
+            },
+          ],
+        ],
+      },
+      screenshot: {
+        height: 1324,
+        width: 412,
+      },
+    },
+  },
+};
+
+export default {
+  id: 'fps-overflow-x',
+  expectations,
+  config,
+};
+
@@ -46,8 +46,8 @@ const expectations = {
         ],
       },
       screenshot: {
-        height: 2000,
-        width: 824,
+        height: 1000,
+        width: 412,
       },
     },
   },

@@ -46,17 +46,6 @@ function getObservedDeviceMetrics() {
   };
 }
 
-/**
- * The screenshot dimensions are sized to `window.outerHeight` / `window.outerWidth`,
- * however the bounding boxes of the elements are relative to `window.innerHeight` / `window.innerWidth`.
- */
-function getScreenshotAreaSize() {
-  return {
-    width: window.innerWidth,
-    height: window.innerHeight,
-  };
-}
-
 function waitForDoubleRaf() {
   return new Promise((resolve) => {
     requestAnimationFrame(() => requestAnimationFrame(resolve));
@@ -79,13 +68,13 @@ class FullPageScreenshot extends FRGatherer {
     const session = context.driver.defaultSession;
     const metrics = await session.sendCommand('Page.getLayoutMetrics');
 
-    // Height should be as tall as the content.
-    // Scale the emulated height to reach the content height.
-    const fullHeight = Math.round(
-      deviceMetrics.height *
-      metrics.cssContentSize.height /
-      metrics.cssLayoutViewport.clientHeight
-    );
+    // To obtain a full page screenshot, we resize the emulated viewport height to
+    // the maximum between visual-viewport height and the scaled document height.
+    // Final height is capped to the maximum size allowance of WebP format.
+    // Height needs to be rounded to an integer for Emulation.setDeviceMetricOverrides.
+    const fullHeight = Math.round(Math.max(
+      deviceMetrics.height, metrics.cssContentSize.height * metrics.cssVisualViewport.scale
+    ));
     const height = Math.min(fullHeight, MAX_WEBP_SIZE);
 
     // Setup network monitor before we change the viewport.
@@ -128,18 +117,14 @@ class FullPageScreenshot extends FRGatherer {
       format: 'webp',
       quality: FULL_PAGE_SCREENSHOT_QUALITY,
     });
+    const metrics = await context.driver.defaultSession.sendCommand('Page.getLayoutMetrics');
     const data = 'data:image/webp;base64,' + result.data;
-
-    const screenshotAreaSize =
-      await context.driver.executionContext.evaluate(getScreenshotAreaSize, {
-        args: [],
-        useIsolation: true,
-      });
-
     return {
       data,
-      width: screenshotAreaSize.width,
-      height: screenshotAreaSize.height,
+      // Since we resized emulated viewport to match the desired screenshot size,
+      // it is safe to rely on scaled visual viewport css dimensions.
+      width: Math.round(metrics.cssVisualViewport.clientWidth * metrics.cssVisualViewport.scale),
+      height: Math.round(metrics.cssVisualViewport.clientHeight * metrics.cssVisualViewport.scale),
     };
   }
 

@@ -11,24 +11,22 @@ import FullPageScreenshotGatherer from '../../../gather/gatherers/full-page-scre
 let contentSize;
 /** @type {{width?: number, height?: number, dpr: number}} */
 let screenSize;
-/** @type {{width?: number, height?: number}} */
-let screenshotAreaSize;
 /** @type {string[]} */
 let screenshotData;
 let mockContext = createMockContext();
 
 beforeEach(() => {
   contentSize = {width: 100, height: 100};
   screenSize = {width: 100, height: 100, dpr: 1};
-  screenshotAreaSize = contentSize;
   screenshotData = [];
   mockContext = createMockContext();
   mockContext.driver.defaultSession.sendCommand.mockImplementation((method) => {
     if (method === 'Page.getLayoutMetrics') {
       return {
         cssContentSize: contentSize,
         // See comment within _takeScreenshot() implementation
-        cssLayoutViewport: {clientWidth: screenSize.width, clientHeight: screenSize.height},
+        cssVisualViewport: {clientWidth: contentSize.width, clientHeight: contentSize.height,
+          scale: 1.0},
       };
     }
     if (method === 'Page.captureScreenshot') {
@@ -50,11 +48,6 @@ beforeEach(() => {
         },
         deviceScaleFactor: screenSize.dpr,
       };
-    } else if (fn.name === 'getScreenshotAreaSize') {
-      return {
-        width: screenshotAreaSize.width,
-        height: screenshotAreaSize.height,
-      };
     } else if (fn.name === 'waitForDoubleRaf') {
       return {};
     } else {
@@ -68,7 +61,6 @@ describe('FullPageScreenshot gatherer', () => {
     const fpsGatherer = new FullPageScreenshotGatherer();
     contentSize = {width: 412, height: 2000};
     screenSize = {width: 412, height: 412};
-    screenshotAreaSize = contentSize;
 
     mockContext.settings = {
       ...mockContext.settings,
@@ -97,7 +89,6 @@ describe('FullPageScreenshot gatherer', () => {
     const fpsGatherer = new FullPageScreenshotGatherer();
     contentSize = {width: 412, height: 2000};
     screenSize = {width: 412, height: 412};
-    screenshotAreaSize = contentSize;
 
     mockContext.settings = {
       ...mockContext.settings,
@@ -131,7 +122,6 @@ describe('FullPageScreenshot gatherer', () => {
     const fpsGatherer = new FullPageScreenshotGatherer();
     contentSize = {width: 500, height: 1500};
     screenSize = {width: 500, height: 500, dpr: 2};
-    screenshotAreaSize = contentSize;
     mockContext.settings = {
       ...mockContext.settings,
       screenEmulation: {
@@ -178,7 +168,6 @@ describe('FullPageScreenshot gatherer', () => {
 
     contentSize = {width: 412, height: 100000};
     screenSize = {width: 412, height: 412, dpr: 1};
-    screenshotAreaSize = contentSize;
     mockContext.settings = {
       ...mockContext.settings,
       formFactor: 'mobile',