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.0.1

Current Behavior

Currently, setting the height/width of the viewport object inside emulate within the stencil.config.ts testing object has no effect. According to the stencil config docs, this is a valid config object property.

This manifests itself within e2e tests that make use of differing viewport sizes style wise (ie; desktop specific content with min-width breakpoints larger than 800px which appears to be the default browser width in puppeteer/stencil config).

Expected Behavior

emulate object and viewport specific attributes should be set/overridden as expected.

Example:

testing: {
    browserHeadless: "new",
    emulate: [
      {
        viewport: {
          width: 1250,
          height: 600,
        },
      }
    ]
  },

System Info

System: node 18.16.0
    Platform: darwin (21.2.0)
   CPU Model: Apple M1 Max (10 cpus)
    Compiler: /Users/jongirard/bug-demo/node_modules/@stencil/core/compiler/stencil.js
       Build: 1687953951
     Stencil: 4.0.1 ⛹
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.18.1

Steps to Reproduce

Please clone demo/bug specific repository at: https://github.com/jongirard/stencil-emulate-viewport-bug.

1. yarn install
2. yarn test --e2e

Expect for the "can click the desktop content" test to fail erroneously due to viewport width settings not being respected/set correctly.

Code Reproduction URL

https://github.com/jongirard/stencil-emulate-viewport-bug

Additional Information

No response