chore: use proper cssLayoutMetrics (puppeteer#7390)

docs/api.md

@@ -2166,6 +2166,7 @@ Shortcut for [page.mainFrame().executionContext().queryObjects(prototypeHandle)]
     - `height` <[number]> height of clipping area
   - `omitBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Defaults to `false`.
   - `encoding` <[string]> The encoding of the image, can be either `base64` or `binary`. Defaults to `binary`.
+  - `captureBeyondViewport` <[boolean]> When true, captures screenshot [beyond the viewport](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot). Whe false, falls back to old behaviour, and cuts the screenshot by the viewport size. Defaults to `true`.
 - returns: <[Promise]<[string]|[Buffer]>> Promise which resolves to buffer or a base64 string (depending on the value of `encoding`) with captured screenshot.
 
 > **NOTE** Screenshots take at least 1/6 second on OS X. See https://crbug.com/741689 for discussion.

src/common/JSHandle.ts

@@ -423,7 +423,9 @@ export class ElementHandle<
     if (!result || !result.quads.length)
       throw new Error('Node is either not visible or not an HTMLElement');
     // Filter out quads that have too small area to click into.
-    const { clientWidth, clientHeight } = layoutMetrics.layoutViewport;
+    // Fallback to `layoutViewport` in case of using Firefox.
+    const { clientWidth, clientHeight } =
+      layoutMetrics.cssLayoutViewport || layoutMetrics.layoutViewport;
     const quads = result.quads
       .map((quad) => this._fromProtocolQuad(quad))
       .map((quad) =>
@@ -815,9 +817,10 @@ export class ElementHandle<
     assert(boundingBox.width !== 0, 'Node has 0 width.');
     assert(boundingBox.height !== 0, 'Node has 0 height.');
 
-    const {
-      layoutViewport: { pageX, pageY },
-    } = await this._client.send('Page.getLayoutMetrics');
+    const layoutMetrics = await this._client.send('Page.getLayoutMetrics');
+    // Fallback to `layoutViewport` in case of using Firefox.
+    const { pageX, pageY } =
+      layoutMetrics.cssLayoutViewport || layoutMetrics.layoutViewport;
 
     const clip = Object.assign({}, boundingBox);
     clip.x += pageX;

src/common/Page.ts

@@ -2561,8 +2561,8 @@ export class Page extends EventEmitter {
 
     if (options.fullPage) {
       const metrics = await this._client.send('Page.getLayoutMetrics');
-      const width = Math.ceil(metrics.contentSize.width);
-      const height = Math.ceil(metrics.contentSize.height);
+      // Fallback to `contentSize` in case of using Firefox.
+      const { width, height } = metrics.cssContentSize || metrics.contentSize;
 
       // Overwrite clip for full page.
       clip = { x: 0, y: 0, width, height, scale: 1 };