From c0348fcccfd654acb9ff525255e6acc65ada3e36 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Mon, 19 Dec 2022 06:33:18 +0000 Subject: [PATCH 1/4] #681@patch: Add scrollX, scrollY, pageXOffset, pageYOffset to window. --- packages/happy-dom/src/window/IWindow.ts | 4 ++ packages/happy-dom/src/window/Window.ts | 38 ++++++++++++++++++- packages/happy-dom/test/window/Window.test.ts | 36 +++++++++++++++--- 3 files changed, 72 insertions(+), 6 deletions(-) diff --git a/packages/happy-dom/src/window/IWindow.ts b/packages/happy-dom/src/window/IWindow.ts index 558b8daa8..f7587af60 100644 --- a/packages/happy-dom/src/window/IWindow.ts +++ b/packages/happy-dom/src/window/IWindow.ts @@ -245,6 +245,10 @@ export default interface IWindow extends IEventTarget, NodeJS.Global { readonly sessionStorage: Storage; readonly localStorage: Storage; readonly performance: Performance; + readonly pageXOffset: number; + readonly pageYOffset: number; + readonly scrollX: number; + readonly scrollY: number; /** * Evaluates code. diff --git a/packages/happy-dom/src/window/Window.ts b/packages/happy-dom/src/window/Window.ts index 7e1f08aa9..4b1305c18 100644 --- a/packages/happy-dom/src/window/Window.ts +++ b/packages/happy-dom/src/window/Window.ts @@ -14,7 +14,7 @@ import HTMLFormElement from '../nodes/html-form-element/HTMLFormElement'; import HTMLElement from '../nodes/html-element/HTMLElement'; import HTMLUnknownElement from '../nodes/html-unknown-element/HTMLUnknownElement'; import HTMLInputElement from '../nodes/html-input-element/HTMLInputElement'; -import HTMLSelectElement from '../nodes/html-input-element/HTMLSelectElement'; +import HTMLSelectElement from '../nodes/html-select-element/HTMLSelectElement'; import HTMLTextAreaElement from '../nodes/html-text-area-element/HTMLTextAreaElement'; import HTMLLinkElement from '../nodes/html-link-element/HTMLLinkElement'; import HTMLStyleElement from '../nodes/html-style-element/HTMLStyleElement'; @@ -483,6 +483,42 @@ export default class Window extends EventTarget implements IWindow { this.document._onWindowReady(); } + /** + * The number of pixels that the document is currently scrolled horizontally + * + * @returns number + */ + public get scrollX(): number { + return this?.document?.documentElement?.scrollLeft ?? 0; + } + + /** + * The read-only Window property pageXOffset is an alias for scrollX. + * + * @returns number + */ + public get pageXOffset(): number { + return this.scrollX; + } + + /** + * The number of pixels that the document is currently scrolled vertically + * + * @returns number + */ + public get scrollY(): number { + return this?.document?.documentElement?.scrollTop ?? 0; + } + + /** + * The read-only Window property pageYOffset is an alias for scrollY. + * + * @returns number + */ + public get pageYOffset(): number { + return this.scrollY; + } + /** * The CSS interface holds useful CSS-related methods. * diff --git a/packages/happy-dom/test/window/Window.test.ts b/packages/happy-dom/test/window/Window.test.ts index 92fb7aa55..99304c204 100644 --- a/packages/happy-dom/test/window/Window.test.ts +++ b/packages/happy-dom/test/window/Window.test.ts @@ -667,37 +667,63 @@ describe('Window', () => { for (const functionName of ['scroll', 'scrollTo']) { describe(`${functionName}()`, () => { - it('Sets the properties scrollTop and scrollLeft.', () => { + it('Sets the properties scrollTop, scrollLeft, scrollY, scrollX, pageXOffset and pageYOffset', () => { window[functionName](50, 60); expect(window.document.documentElement.scrollLeft).toBe(50); expect(window.document.documentElement.scrollTop).toBe(60); + expect(window.pageXOffset).toBe(50); + expect(window.pageYOffset).toBe(60); + expect(window.scrollX).toBe(50); + expect(window.scrollY).toBe(60); }); - it('Sets the properties scrollTop and scrollLeft using object.', () => { + it('Sets the properties scrollTop, scrollLeft, scrollY, scrollX, pageXOffset and pageYOffset using object.', () => { window[functionName]({ left: 50, top: 60 }); expect(window.document.documentElement.scrollLeft).toBe(50); expect(window.document.documentElement.scrollTop).toBe(60); + expect(window.pageXOffset).toBe(50); + expect(window.pageYOffset).toBe(60); + expect(window.scrollX).toBe(50); + expect(window.scrollY).toBe(60); }); - it('Sets only the property scrollTop.', () => { + it('Sets only the property scrollTop, pageYOffset, and scrollY', () => { window[functionName]({ top: 60 }); expect(window.document.documentElement.scrollLeft).toBe(0); expect(window.document.documentElement.scrollTop).toBe(60); + expect(window.pageXOffset).toBe(0); + expect(window.pageYOffset).toBe(60); + expect(window.scrollX).toBe(0); + expect(window.scrollY).toBe(60); }); - it('Sets only the property scrollLeft.', () => { + it('Sets only the property scrollLeft, pageXOffset, and scrollX', () => { window[functionName]({ left: 60 }); expect(window.document.documentElement.scrollLeft).toBe(60); expect(window.document.documentElement.scrollTop).toBe(0); + expect(window.document.documentElement.scrollLeft).toBe(60); + expect(window.document.documentElement.scrollTop).toBe(0); + expect(window.pageXOffset).toBe(60); + expect(window.pageYOffset).toBe(0); + expect(window.scrollX).toBe(60); + expect(window.scrollY).toBe(0); }); - it('Sets the properties scrollTop and scrollLeft with animation.', async () => { + it('Sets the properties scrollTop, scrollLeft, scrollY, scrollX, pageXOffset and pageYOffset with animation.', async () => { window[functionName]({ left: 50, top: 60, behavior: 'smooth' }); expect(window.document.documentElement.scrollLeft).toBe(0); expect(window.document.documentElement.scrollTop).toBe(0); + expect(window.pageXOffset).toBe(0); + expect(window.pageYOffset).toBe(0); + expect(window.scrollX).toBe(0); + expect(window.scrollY).toBe(0); await window.happyDOM.whenAsyncComplete(); expect(window.document.documentElement.scrollLeft).toBe(50); expect(window.document.documentElement.scrollTop).toBe(60); + expect(window.pageXOffset).toBe(50); + expect(window.pageYOffset).toBe(60); + expect(window.scrollX).toBe(50); + expect(window.scrollY).toBe(60); }); }); } From 5e2fa50d6c36bae7f34fc86471e234bdd307d630 Mon Sep 17 00:00:00 2001 From: David Ortner Date: Thu, 22 Dec 2022 00:23:27 +0100 Subject: [PATCH 2/4] #681@trivial: Update packages/happy-dom/src/window/Window.ts. --- packages/happy-dom/src/window/Window.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/happy-dom/src/window/Window.ts b/packages/happy-dom/src/window/Window.ts index 4b1305c18..0cdd01e6a 100644 --- a/packages/happy-dom/src/window/Window.ts +++ b/packages/happy-dom/src/window/Window.ts @@ -489,7 +489,7 @@ export default class Window extends EventTarget implements IWindow { * @returns number */ public get scrollX(): number { - return this?.document?.documentElement?.scrollLeft ?? 0; + return this.document.documentElement?.scrollLeft ?? 0; } /** From b5afc24228586b2a398659e9766520af2de91324 Mon Sep 17 00:00:00 2001 From: David Ortner Date: Thu, 22 Dec 2022 00:23:38 +0100 Subject: [PATCH 3/4] #681@trivial: Update packages/happy-dom/src/window/Window.ts. --- packages/happy-dom/src/window/Window.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/happy-dom/src/window/Window.ts b/packages/happy-dom/src/window/Window.ts index 0cdd01e6a..f1aacc701 100644 --- a/packages/happy-dom/src/window/Window.ts +++ b/packages/happy-dom/src/window/Window.ts @@ -507,7 +507,7 @@ export default class Window extends EventTarget implements IWindow { * @returns number */ public get scrollY(): number { - return this?.document?.documentElement?.scrollTop ?? 0; + return this.document.documentElement?.scrollTop ?? 0; } /** From 78d48524c0fcb91b71a455da93c4e8bf8a4cd27f Mon Sep 17 00:00:00 2001 From: Benjamin <896954+Ben2HellAndBack@users.noreply.github.com> Date: Tue, 27 Dec 2022 03:46:55 +0000 Subject: [PATCH 4/4] #681@trivial: Make sure to use optional chaining. --- packages/happy-dom/src/window/Window.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/happy-dom/src/window/Window.ts b/packages/happy-dom/src/window/Window.ts index f1aacc701..1c1638b85 100644 --- a/packages/happy-dom/src/window/Window.ts +++ b/packages/happy-dom/src/window/Window.ts @@ -489,7 +489,7 @@ export default class Window extends EventTarget implements IWindow { * @returns number */ public get scrollX(): number { - return this.document.documentElement?.scrollLeft ?? 0; + return this.document?.documentElement?.scrollLeft ?? 0; } /** @@ -507,7 +507,7 @@ export default class Window extends EventTarget implements IWindow { * @returns number */ public get scrollY(): number { - return this.document.documentElement?.scrollTop ?? 0; + return this.document?.documentElement?.scrollTop ?? 0; } /**