@wdio/image-comparison-core 1.0.0

package/dist/clientSideScripts/hideRemoveElements.test.js

@@ -0,0 +1,199 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import hideRemoveElements from './hideRemoveElements.js';
+describe('hideRemoveElements', () => {
+    it('should be able to hide elements and put them back again', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span id="id-1">Hello</span>' +
+                '   <span id="id-2">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span id="id-4">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [document.querySelector('#id-1'), document.querySelector('#id-3')],
+            remove: [],
+        }, true);
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [document.querySelector('#id-1'), document.querySelector('#id-3')],
+            remove: [],
+        }, false);
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+    });
+    it('should be able to hide elements and put them back again when an array of hidden elements is provided', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span class="hide">Hello</span>' +
+                '   <span class="hide">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span class="hide">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelectorAll('.hide')[0].style.visibility).toMatchSnapshot();
+        expect(document.querySelectorAll('.hide')[1].style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelectorAll('.hide')[2].style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [[...document.querySelectorAll('.hide')]],
+            remove: [],
+        }, true);
+        expect(document.querySelectorAll('.hide')[0].style.visibility).toMatchSnapshot();
+        expect(document.querySelectorAll('.hide')[1].style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelectorAll('.hide')[2].style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [[...document.querySelectorAll('.hide')]],
+            remove: [],
+        }, false);
+        expect(document.querySelectorAll('.hide')[0].style.visibility).toMatchSnapshot();
+        expect(document.querySelectorAll('.hide')[1].style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelectorAll('.hide')[2].style.visibility).toMatchSnapshot();
+    });
+    it('should be able to remove elements and put them back again', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span id="id-1">Hello</span>' +
+                '   <span id="id-2">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span id="id-4">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelector('#id-2').style.display).toMatchSnapshot();
+        expect(document.querySelector('#id-4').style.display).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [],
+            remove: [document.querySelector('#id-2'), document.querySelector('#id-4')],
+        }, true);
+        expect(document.querySelector('#id-2').style.display).toMatchSnapshot();
+        expect(document.querySelector('#id-4').style.display).toMatchSnapshot();
+        hideRemoveElements({
+            remove: [document.querySelector('#id-2'), document.querySelector('#id-4')],
+            hide: [],
+        }, false);
+        expect(document.querySelector('#id-2').style.display).toMatchSnapshot();
+        expect(document.querySelector('#id-4').style.display).toMatchSnapshot();
+    });
+    it('should be able to remove elements and put them back again when an array of to be removed elements is provided', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span class="remove">Hello</span>' +
+                '   <span class="remove">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span class="remove">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelectorAll('.remove')[0].style.display).toMatchSnapshot();
+        expect(document.querySelectorAll('.remove')[1].style.display).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.display).toMatchSnapshot();
+        expect(document.querySelectorAll('.remove')[2].style.display).toMatchSnapshot();
+        hideRemoveElements({
+            remove: [[...document.querySelectorAll('.remove')]],
+            hide: [],
+        }, true);
+        expect(document.querySelectorAll('.remove')[0].style.display).toMatchSnapshot();
+        expect(document.querySelectorAll('.remove')[1].style.display).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.display).toMatchSnapshot();
+        expect(document.querySelectorAll('.remove')[2].style.display).toMatchSnapshot();
+        hideRemoveElements({
+            remove: [[...document.querySelectorAll('.remove')]],
+            hide: [],
+        }, false);
+        expect(document.querySelectorAll('.remove')[0].style.display).toMatchSnapshot();
+        expect(document.querySelectorAll('.remove')[1].style.display).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.display).toMatchSnapshot();
+        expect(document.querySelectorAll('.remove')[2].style.display).toMatchSnapshot();
+    });
+    it('should be able to find and hide single element based on xpath', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span id="id-1">Hello</span>' +
+                '   <span id="id-2">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span id="id-4">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [{ selector: "//span[@id='id-1']" }, { selector: "//span[@id='id-3']" }],
+            remove: [],
+        }, true);
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+    });
+    it('should be able to find and hide elements based on xpath', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span id="id-1">Hello</span>' +
+                '   <span id="id-2">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span id="id-4">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-4').style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [[{ selector: '//span' }]],
+            remove: [],
+        }, true);
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-4').style.visibility).toMatchSnapshot();
+    });
+    it('should be able to find and hide a single element based on a css selector', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span id="id-1">Hello</span>' +
+                '   <span id="id-2">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span class="hide">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('.hide').style.visibility).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [{ selector: '.hide' }],
+            remove: [],
+        }, true);
+        expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
+        expect(document.querySelector('.hide').style.visibility).toMatchSnapshot();
+    });
+    it('should be able to find and hide elements based on a css selector', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span class="hide">Hello</span>' +
+                '   <span class="hide">Hello</span>' +
+                '   <div>' +
+                '     <span class="hide">Hello</span>' +
+                '     <span class="hide">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.querySelectorAll('.hide')).toMatchSnapshot();
+        hideRemoveElements({
+            hide: [[{ selector: '.hide' }, { selector: '.hide' }]],
+            remove: [],
+        }, true);
+        expect(document.querySelectorAll('.hide')).toMatchSnapshot();
+    });
+});

package/dist/clientSideScripts/hideScrollbars.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hide the scrollbars
+ *
+ * There is a `try/catch` for this issue
+ * https://github.com/wswebcreation/webdriver-image-comparison/issues/30
+ * Some browsers don't wrap XML into a body element, so this will fail
+ */
+export default function hideScrollBars(hide: boolean): void;
+//# sourceMappingURL=hideScrollbars.d.ts.map

package/dist/clientSideScripts/hideScrollbars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hideScrollbars.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/hideScrollbars.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAM1D"}

package/dist/clientSideScripts/hideScrollbars.js

@@ -0,0 +1,15 @@
+/**
+ * Hide the scrollbars
+ *
+ * There is a `try/catch` for this issue
+ * https://github.com/wswebcreation/webdriver-image-comparison/issues/30
+ * Some browsers don't wrap XML into a body element, so this will fail
+ */
+export default function hideScrollBars(hide) {
+    try {
+        document.body.style.overflow = hide ? 'hidden' : '';
+    }
+    catch (_e) {
+        // Do nothing
+    }
+}

package/dist/clientSideScripts/hideScrollbars.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=hideScrollbars.test.d.ts.map

package/dist/clientSideScripts/hideScrollbars.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hideScrollbars.test.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/hideScrollbars.test.ts"],"names":[],"mappings":""}

package/dist/clientSideScripts/hideScrollbars.test.js

@@ -0,0 +1,12 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import hideScrollBars from './hideScrollbars.js';
+describe('hideScrollBars', () => {
+    it('should be able to hide and show the scrollbars', () => {
+        expect(document.body.style.overflow).toMatchSnapshot();
+        hideScrollBars(true);
+        expect(document.body.style.overflow).toMatchSnapshot();
+        hideScrollBars(false);
+        expect(document.body.style.overflow).toMatchSnapshot();
+    });
+});

package/dist/clientSideScripts/injectWebviewOverlay.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Inject an overlay on top of the webview with an event listener that stores the click position in the webview
+ */
+export declare function injectWebviewOverlay(isAndroid: boolean): void;
+//# sourceMappingURL=injectWebviewOverlay.d.ts.map

package/dist/clientSideScripts/injectWebviewOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectWebviewOverlay.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/injectWebviewOverlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAkC7D"}

package/dist/clientSideScripts/injectWebviewOverlay.js

@@ -0,0 +1,35 @@
+/**
+ * Inject an overlay on top of the webview with an event listener that stores the click position in the webview
+ */
+export function injectWebviewOverlay(isAndroid) {
+    if (document.querySelector('[data-test="ics-overlay"]')) {
+        return;
+    }
+    const overlay = document.createElement('div');
+    const dpr = isAndroid ? window.devicePixelRatio : 1;
+    overlay.style.cssText = `
+    position: fixed; top: 0; left: 0; width: 100vw;
+    height: ${document.documentElement.clientHeight}px;
+    background: rgba(255, 165, 0, 0.5); z-index: 2147483647;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    color: black; font-size: 36px; font-family: Arial, sans-serif; text-align: center;`;
+    overlay.dataset.test = 'ics-overlay';
+    const textContainer = document.createElement('div');
+    textContainer.innerText = 'This overlay is used to determine the position of the webview.';
+    overlay.appendChild(textContainer);
+    overlay.onclick = (event) => {
+        const { clientX: x, clientY: y } = event;
+        const data = {
+            x: Math.round(x * dpr),
+            y: Math.round(y * dpr),
+            width: Math.round(window.innerWidth * dpr),
+            height: Math.round(document.documentElement.clientHeight * dpr),
+        };
+        overlay.dataset.icsWebviewData = JSON.stringify(data);
+        textContainer.innerHTML = `
+        This overlay is used to determine the position of the webview.<br>
+        Clicked at: X: ${data.x}, Y: ${data.y}<br/>
+        Dimensions: Viewport width: ${data.width}, Viewport height: ${data.height}`;
+    };
+    document.body.appendChild(overlay);
+}

package/dist/clientSideScripts/injectWebviewOverlay.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=injectWebviewOverlay.test.d.ts.map

package/dist/clientSideScripts/injectWebviewOverlay.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectWebviewOverlay.test.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/injectWebviewOverlay.test.ts"],"names":[],"mappings":""}

package/dist/clientSideScripts/injectWebviewOverlay.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { JSDOM } from 'jsdom';
+import { injectWebviewOverlay } from './injectWebviewOverlay.js';
+describe('injectWebviewOverlay', () => {
+    beforeEach(() => {
+        const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+            pretendToBeVisual: true,
+            runScripts: 'dangerously',
+        });
+        global.window = dom.window;
+        global.document = dom.window.document;
+        Object.defineProperty(document.documentElement, 'clientHeight', {
+            value: 800,
+            configurable: true,
+        });
+        Object.defineProperty(window, 'innerWidth', {
+            value: 400,
+            configurable: true,
+        });
+        Object.defineProperty(window, 'devicePixelRatio', {
+            value: 2,
+            configurable: true,
+        });
+    });
+    it('should inject an overlay if not already present', () => {
+        expect(document.querySelector('[data-test="ics-overlay"]')).toBeNull();
+        injectWebviewOverlay(true);
+        const overlay = document.querySelector('[data-test="ics-overlay"]');
+        expect(overlay).toBeTruthy();
+        expect(overlay?.tagName).toBe('DIV');
+        expect(overlay?.style.position).toBe('fixed');
+        expect(overlay?.style.height).toContain('800px');
+    });
+    it('should not inject a second overlay if one already exists', () => {
+        injectWebviewOverlay(true);
+        injectWebviewOverlay(true);
+        const overlays = document.querySelectorAll('[data-test="ics-overlay"]');
+        expect(overlays.length).toBe(1);
+    });
+    it('should store click position and dimensions in dataset on click (Android DPR)', () => {
+        injectWebviewOverlay(true);
+        const overlay = document.querySelector('[data-test="ics-overlay"]');
+        const event = new window.MouseEvent('click', {
+            clientX: 50,
+            clientY: 100,
+            bubbles: true,
+        });
+        overlay.dispatchEvent(event);
+        const parsedData = JSON.parse(overlay.dataset.icsWebviewData);
+        expect(parsedData).toEqual({
+            x: 100,
+            y: 200,
+            width: 800,
+            height: 1600,
+        });
+    });
+    it('should use DPR = 1 for iOS (isAndroid = false)', () => {
+        injectWebviewOverlay(false);
+        const overlay = document.querySelector('[data-test="ics-overlay"]');
+        const event = new window.MouseEvent('click', {
+            clientX: 50,
+            clientY: 100,
+            bubbles: true,
+        });
+        overlay.dispatchEvent(event);
+        const parsedData = JSON.parse(overlay.dataset.icsWebviewData);
+        expect(parsedData).toEqual({
+            x: 50,
+            y: 100,
+            width: 400,
+            height: 800,
+        });
+    });
+});

package/dist/clientSideScripts/removeElementFromDom.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Remove a DOM element from the DOM
+ */
+export default function removeElementFromDom(id: string): void;
+//# sourceMappingURL=removeElementFromDom.d.ts.map

package/dist/clientSideScripts/removeElementFromDom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"removeElementFromDom.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/removeElementFromDom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK7D"}

package/dist/clientSideScripts/removeElementFromDom.js

@@ -0,0 +1,9 @@
+/**
+ * Remove a DOM element from the DOM
+ */
+export default function removeElementFromDom(id) {
+    const elem = document.querySelector(`#${id}`);
+    if (elem) {
+        elem.parentNode.removeChild(elem);
+    }
+}

package/dist/clientSideScripts/removeElementFromDom.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=removeElementFromDom.test.d.ts.map

package/dist/clientSideScripts/removeElementFromDom.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"removeElementFromDom.test.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/removeElementFromDom.test.ts"],"names":[],"mappings":""}

package/dist/clientSideScripts/removeElementFromDom.test.js

@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import removeElementFromDom from './removeElementFromDom.js';
+describe('removeElementFromDom', () => {
+    it('should be able to remove the custom css', () => {
+        const id = 'test';
+        const cssText = 'body:{width:100%}';
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const style = document.createElement('style');
+        style.id = id;
+        style.appendChild(document.createTextNode(cssText));
+        head.appendChild(style);
+        expect(document.head.textContent).toMatchSnapshot();
+        removeElementFromDom(id);
+        expect(document.head.textContent).toMatchSnapshot();
+    });
+    it('should do nothing if custom css is not present', () => {
+        const id = 'test';
+        expect(document.head.textContent).toMatchSnapshot();
+        removeElementFromDom(id);
+        expect(document.head.textContent).toMatchSnapshot();
+    });
+    it('should do nothing if document.head is null', () => {
+        const id = 'test';
+        Object.defineProperty(document, 'head', { value: null });
+        removeElementFromDom(id);
+        expect(document.head).toBe(null);
+    });
+    it('should be able to remove an element from the body', () => {
+        document.body.innerHTML =
+            '<div>' +
+                '   <span id="id-1">Hello</span>' +
+                '   <span id="id-2">Hello</span>' +
+                '   <div>' +
+                '     <span id="id-3">Hello</span>' +
+                '     <span id="id-4">Hello</span>' +
+                '  </div>' +
+                '</div>';
+        expect(document.body).toMatchSnapshot();
+        removeElementFromDom('id-1');
+        expect(document.body).toMatchSnapshot();
+    });
+});

package/dist/clientSideScripts/screenDimensions.interfaces.d.ts

@@ -0,0 +1,96 @@
+export interface ScreenDimensions {
+    dimensions: {
+        body: {
+            /**
+             * Mobile & Desktop: Total scrollable height of the body element, including content not visible on screen.
+             * Includes padding but not border, margin or horizontal scrollbar.
+             * Equal to clientHeight if no vertical scrolling is needed.
+             */
+            scrollHeight?: number;
+            /**
+             * Mobile & Desktop: Height of body element including padding and borders, but not margins.
+             * For document.body, represents total linear content height.
+             * Floated elements extending below other linear content are ignored.
+             */
+            offsetHeight?: number;
+        };
+        html: {
+            /**
+             * Mobile & Desktop: Viewport width excluding scrollbars.
+             * Includes padding but not borders, margins, or vertical scrollbars.
+             */
+            clientWidth?: number;
+            /**
+             * Mobile & Desktop: Total scrollable width including overflow content.
+             * Includes padding but not borders, margins, or vertical scrollbars.
+             * Equal to clientWidth if no horizontal scrolling is needed.
+             */
+            scrollWidth?: number;
+            /**
+             * Mobile & Desktop: Viewport height excluding scrollbars.
+             * Includes padding but not borders, margins, or horizontal scrollbars.
+             */
+            clientHeight?: number;
+            /**
+             * Mobile & Desktop: Total scrollable height including overflow content.
+             * Includes padding but not borders, margins, or horizontal scrollbars.
+             * Equal to clientHeight if no vertical scrolling is needed.
+             */
+            scrollHeight?: number;
+            /**
+             * Mobile & Desktop: Height of html element including padding and borders.
+             * For document.documentElement, represents total rendered height including overflow.
+             * Floated elements extending below other linear content are ignored.
+             */
+            offsetHeight?: number;
+        };
+        window: {
+            /**
+             * Mobile: Viewport width (changes with zoom)
+             * Desktop: Viewport width including vertical scrollbar
+             */
+            innerWidth?: number;
+            /**
+             * Mobile: Viewport height (changes with zoom)
+             * Desktop: Viewport height including horizontal scrollbar
+             */
+            innerHeight?: number;
+            /**
+             * Mobile: True if device is in landscape orientation
+             * Desktop: Based on viewport aspect ratio using matchMedia
+             */
+            isLandscape: boolean;
+            /**
+             * Mobile: Full browser width including UI elements
+             * Desktop: Browser window width including window chrome/borders
+             */
+            outerWidth?: number;
+            /**
+             * Mobile: Full browser height including UI elements
+             * Desktop: Browser window height including window chrome/borders
+             */
+            outerHeight?: number;
+            /**
+             * Mobile: Physical pixel ratio (typically >1 for high DPI screens)
+             * Desktop: Usually 1, or higher for high DPI displays
+             */
+            devicePixelRatio?: number;
+            /**
+             * Mobile: Always false
+             * Desktop: Depending if the screen is emulated to a "mobile" device
+             */
+            isEmulated: boolean;
+            /**
+             * Mobile: Physical screen width in CSS pixels
+             * Desktop: Monitor width in pixels
+             */
+            screenWidth?: number;
+            /**
+             * Mobile: Physical screen height in CSS pixels
+             * Desktop: Monitor height in pixels
+             */
+            screenHeight?: number;
+        };
+    };
+}
+//# sourceMappingURL=screenDimensions.interfaces.d.ts.map

package/dist/clientSideScripts/screenDimensions.interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenDimensions.interfaces.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/screenDimensions.interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC7B,UAAU,EAAE;QACR,IAAI,EAAE;YACF;;;;eAIG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB;;;;eAIG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;SACzB,CAAC;QACF,IAAI,EAAE;YACF;;;eAGG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB;;;;eAIG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB;;;eAGG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB;;;;eAIG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB;;;;eAIG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;SACzB,CAAC;QACF,MAAM,EAAE;YACJ;;;eAGG;YACH,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB;;;eAGG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB;;;eAGG;YACH,WAAW,EAAE,OAAO,CAAC;YACrB;;;eAGG;YACH,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB;;;eAGG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB;;;eAGG;YACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;YAC1B;;;eAGG;YACH,UAAU,EAAE,OAAO,CAAC;YACpB;;;eAGG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB;;;eAGG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;SACzB,CAAC;KACL,CAAC;CACL"}

package/dist/clientSideScripts/screenDimensions.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/clientSideScripts/scrollElementIntoView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Scroll the element into the top of the viewport
+ */
+export default function scrollElementIntoView(element: HTMLElement, addressBarShadowPadding: number): number;
+//# sourceMappingURL=scrollElementIntoView.d.ts.map

package/dist/clientSideScripts/scrollElementIntoView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollElementIntoView.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/scrollElementIntoView.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,GAAG,MAAM,CA+B3G"}

package/dist/clientSideScripts/scrollElementIntoView.js

@@ -0,0 +1,31 @@
+/**
+ * Scroll the element into the top of the viewport
+ */
+export default function scrollElementIntoView(element, addressBarShadowPadding) {
+    let currentPosition = 0;
+    const htmlNode = document.documentElement;
+    const bodyNode = document.body;
+    // Apply new global style
+    const styleTag = document.createElement('style');
+    styleTag.innerHTML = '* { scroll-behavior: unset !important; }';
+    document.head.appendChild(styleTag);
+    // Determine the current scroll position
+    if (htmlNode.scrollTop > 0) {
+        currentPosition = htmlNode.scrollTop;
+    }
+    else if (bodyNode.scrollTop > 0) {
+        currentPosition = bodyNode.scrollTop;
+    }
+    const { top } = element.getBoundingClientRect();
+    const yPosition = top - addressBarShadowPadding;
+    // Scroll to the position
+    if (htmlNode.scrollHeight > htmlNode.clientHeight) {
+        htmlNode.scrollTop = yPosition;
+    }
+    else if (bodyNode.scrollHeight > bodyNode.clientHeight) {
+        bodyNode.scrollTop = yPosition;
+    }
+    // Remove the injected style
+    document.head.removeChild(styleTag);
+    return currentPosition;
+}

package/dist/clientSideScripts/scrollElementIntoView.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=scrollElementIntoView.test.d.ts.map

package/dist/clientSideScripts/scrollElementIntoView.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollElementIntoView.test.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/scrollElementIntoView.test.ts"],"names":[],"mappings":""}