`window.resizeTo` does not resize the window

[ElPrudi]

Describe the bug According to mdn window.resizeTo() dynamically changes the size of the outer viewport of the window. Happy-dom doesn't do that.

To Reproduce

import { Window } from 'happy-dom'

const window = new Window({ width: 1920, height: 1080 })
window.resizeTo(300, 300)
console.log(window.outerWidth, window.outerHeight) // Still 1920 and 1080

Expected behavior It should change the width and height of the window.

Device:

• OS: Windows 11
• Version 14.7.1

[malko]

according to mdn https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo

Note: It's not possible to resize a window or tab that wasn't created by window.open(). It's also not possible to resize when the window has multiple tabs.

looking at the source code of happy dom there's a check to do exactly that:

// We can only resize the window if it is a popup.
if (this.#browserFrame[PropertySymbol.popup]) {
    this.#browserFrame.page.setViewport({ width, height });
}

So it seems to behave correctly with the code you provide.

[ElPrudi]

Ok, so how do I properly resize it then, because even using:

function getWindowSize(): Size {
  return {
    height: document.documentElement.clientHeight || window.innerHeight || document.body.clientHeight,
    width: document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth
  }
}

const window = new Window({ height: 1080, width: 1920 })
window.open()
window.resizeTo(300, 300)
expect(getWindowSize()).toEqual({ height: 300, width: 300 })

fails, because it doesn't resize it.

[malko]

You're still trying to resize a window that is not a popup. You need to call resizeTo on the popup not the main window here is a modified version of your code sample:

function getWindowSize(window): Size {
    const docElmt = window.document.documentElement;
    const body = window.document.body;
    return {
        height: docElmt.clientHeight || window.innerHeight || body.clientHeight,
        width: docElmt.clientWidth || window.innerWidth || body.clientWidth
    };
}
const window = new Window({ height: 1080, width: 1920 });
const popup = <Window>window.open('', '', 'popup');
popup.resizeTo(300, 300);
expect(getWindowSize(popup)).toEqual({ height: 300, width: 300 });

Is it clearer like this ?

[malko]

I think we can close this issue if this is good for you @ElPrudi ?

[ElPrudi]

Yes, it worked. also thank you for optimizing my util.