bug: emulate.viewport crops the screenshot in E2E Screenshot tests

[mlechler]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.13.0

Current Behavior

When using the emulate.viewport in the stencil.config.ts the produced screenshot is just cropped to the sizes.

Looks like this (see the background color, which exceeds the screenshot border):

Expected Behavior

I would expect, that the size of the screenshot is adapted, so we can test different device sizes. In an earlier version this was exactly the behaviour.

Should look like this:

System Info

System: node 20.11.0
    Platform: darwin (23.4.0)
   CPU Model: Apple M1 Pro (10 cpus)
    Compiler: /node_modules/@stencil/core/compiler/stencil.js
       Build: 1710782619
     Stencil: 4.13.0 🚞
  TypeScript: 5.4.2
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.29.2

Steps to Reproduce

Run npm run test.screenshot in the test repo.
Check the produced screenshots.

Code Reproduction URL

https://github.com/mlechler/stencil-e2e-test-bug

Additional Information

No response

[tanner-reits]

Hello again @mlechler 👋

Thanks for reporting the issue. Unfortunately, the team doesn't have capacity to focus on screenshot testing issues at the moment. Stencil's screenshot testing functionality is considered an experimental feature, so having someone look into this may not happen for a while (or at all frankly).

However, we welcome any community contributions! If you'd like to take a stab at fixing this, someone on the team would be happy to review your changes.

We appreciate your understanding!