[Bug]: Full page screenshot does not mask element that is outside browser's viewport height

[jbaranda]

Version

1.44.0

Steps to reproduce

1. Clone my repo at https://github.com/jbaranda/playwright-viewport-masking-example
2. Run npm i and then npx playwright install
3. Run tests via npx playwright test

• This will generate 2 screenshot files in the project directory:
  • full-page-with-masked-elements-excluding-button.jpg
  • full-page-with-masked-elements-including-button.jpg

Expected behavior

I expect that the full page screenshot for the test using the default viewport height will mask both elements on the page (paragraph element at the top of the page that is within the viewport and the button on the bottom of the page that is outside of the viewport height, below the fold):

Actual behavior

The full page screenshot will mask the paragraph element at the top of the page but NOT the button on the bottom of the page:

Additional context

If the test specifies a viewport size/height that has the large enough to have the bottom element displayed, above the fold then the full page screenshot will mask that element as expected (see created full-page-with-masked-elements-including-button.jpg file after running tests)

See example.html for more context on the page under test

Environment

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 59.17 MB / 16.00 GB
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  IDEs:
    VSCode: 1.89.0 - /opt/homebrew/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.44.0 => 1.44.0 
    playwright: ^1.41.1 => 1.41.1

[mxschmitt]

Regression caused by #30001. We should have a larger height there, which spans across the whole page height.

[mxschmitt]

Reverted and added a regression test for now, closing by that.

Should be fixed in npm install @playwright/test@beta as of today.