window.innerWidth / innerHeight

[WebMechanic]

Hello,

up until v6 the size of the window object via innerWidth / innerHeight was reported as 1024 * 768.
In v7 they are 0 incl. all offset* properties of the document and documentElement.

a) Was this change deliberate with the new addition of the various CSS interfaces?
b) How can I change the "size" of the window so there is something "to work with"?
c) Is the some documentation about the implementation levels of the various DOM APIs?

Thank you.

[WebMechanic]

I found this strolling the repo ...
https://github.com/capricorn86/happy-dom/tree/master/packages/happy-dom#additional-features

window.happyDOM.setInnerWidth(1024);
window.happyDOM.setInnerHeight(768);

[capricorn86]

Hi @WebMechanic! 🙂

The change was intentional as it is now possible to send in "innerWidth" and "innerHeight" as properties to the constructor.

Offset properties has not been changed. They are set to 0 as Happy DOM currently doesn't support calculating them yet, but I guess we could set them to the same as "innerWidth" and "innerHeight" on the document element.

It is also possible to set "innerWidth" and "innerHeight" now through a method, which will trigger a "resize" event.

I have just updated the documentation to cover this.

Documentation:
https://github.com/capricorn86/happy-dom/tree/master/packages/happy-dom

Example 1:

const window = new Window({
    innerWidth: 1024,
    innerHeight: 768,
    url: 'http://localhost:8080'
});

Example 2:

window.happyDOM.setInnerWidth(1024);
window.happyDOM.setInnerHeight(1024);

[WebMechanic]

Hey, thanks.
Guess we missed each other :)

Anything of point c) ?

[capricorn86]

Sorry, I missed that 😅

Unfortunately there is no such document in place yet, but it would definitely be good to have. I would also like to improve the documentation in general to explain better how Happy DOM can be used.

[WebMechanic]

Offset properties has not been changed. They are set to 0 as Happy DOM currently doesn't support calculating them yet, but I guess we could set them to the same as "innerWidth" and "innerHeight" on the document element.

maybe they could-should all default to/inherit the constants you already have in Screen.ts?
That's what a browser would resolve to in fullscreen mode -- would've done, back in 1996 on a modern CRT 😇

oh, and thank you very much for making this! 🚀

[csantos-nydig]

I would like to use window.happyDOM.setInnerWidth(1024); in my tests with vitest; but TypeScript is complaining:

any idea how to make TS happy?

[csantos-nydig]

Also, while at it: is there a way to "reset" it back to the default?

I'm currently doing this:

it('test', () => {
  window.happyDOM.setViewport({ width: 100 });
  render(<TestMatchMedia />);
  window.happyDOM.setViewport({ width: 1024 });
});

but it feels wrong