@wdio/image-comparison-core 1.0.0

package/dist/clientSideScripts/drawTabbableOnCanvas.js

@@ -0,0 +1,275 @@
+/**
+ * This method is based on this blog post
+ * https://vivrichards.co.uk/accessibility/automating-page-tab-flows-using-visual-testing-and-javascript
+ * by Viv Richards and optimized for using Canvas
+ */
+export default function drawTabbableOnCanvas(drawOptions) {
+    // 1. Scroll to top of page
+    window.scrollTo(0, 0);
+    // 2. Insert canvas
+    const width = window.innerWidth;
+    const height = getDocumentScrollHeight();
+    const canvasNode = `<canvas id="wic-tabbable-canvas" width="${width}" height="${height}" style="position:absolute;top:0;left:0;z-index:999999;">`;
+    document.body.insertAdjacentHTML('afterbegin', canvasNode);
+    // 3. Get all the elements
+    const accessibleElements = tabbable();
+    // 4a. Iterate over all accessibleElements and get the coordinates
+    const elementCoordinates = accessibleElements.map((node) => {
+        const currentElement = node.getBoundingClientRect();
+        return {
+            x: currentElement.left + currentElement.width / 2,
+            y: currentElement.top + currentElement.height / 2,
+        };
+    });
+    // 4b. Add the starting coordinates
+    elementCoordinates.unshift({ x: 0, y: 0 });
+    // 4c. Iterate over all coordinates and draw lines and circles
+    elementCoordinates.forEach((elementCoordinate, i) => {
+        if (i === 0) {
+            return;
+        }
+        drawLine(drawOptions.line, elementCoordinates[i - 1], elementCoordinate);
+        drawCircleAndNumber(drawOptions.circle, elementCoordinate, i);
+    });
+    /**
+   * Draw a line
+   */
+    function drawLine(options, start, end) {
+        const tabbableCanvasContext = document.getElementById('wic-tabbable-canvas').getContext('2d');
+        if (!tabbableCanvasContext) {
+            return;
+        }
+        // Draw the line
+        tabbableCanvasContext.beginPath();
+        tabbableCanvasContext.globalCompositeOperation = 'destination-over';
+        tabbableCanvasContext.lineWidth = options.width;
+        tabbableCanvasContext.strokeStyle = options.color;
+        tabbableCanvasContext.moveTo(start.x, start.y);
+        tabbableCanvasContext.lineTo(end.x, end.y);
+        tabbableCanvasContext.stroke();
+    }
+    /**
+   * Draw a circle
+   */
+    function drawCircleAndNumber(options, position, i) {
+        const tabbableCanvasContext = document.getElementById('wic-tabbable-canvas').getContext('2d');
+        if (!tabbableCanvasContext) {
+            return;
+        }
+        // Draw circle
+        tabbableCanvasContext.beginPath();
+        tabbableCanvasContext.globalCompositeOperation = 'source-over';
+        tabbableCanvasContext.fillStyle = options.backgroundColor;
+        tabbableCanvasContext.arc(position.x, position.y, options.size, 0, Math.PI * 2, true);
+        tabbableCanvasContext.fill();
+        // Draw border
+        tabbableCanvasContext.lineWidth = options.borderWidth;
+        tabbableCanvasContext.strokeStyle = options.borderColor;
+        tabbableCanvasContext.stroke();
+        if (options.showNumber) {
+            // Set the text
+            tabbableCanvasContext.font = `${options.fontSize}px ${options.fontFamily}`;
+            tabbableCanvasContext.textAlign = 'center';
+            tabbableCanvasContext.textBaseline = 'middle';
+            tabbableCanvasContext.fillStyle = options.fontColor;
+            tabbableCanvasContext.fillText(i.toString(), position.x, position.y);
+        }
+    }
+    /**
+   * Below code is coming from https://github.com/davidtheclark/tabbable
+   * and is modified a bit to work inside the browser.
+   * The original module couldn't be used for injection and didn't support TypeScript
+   */
+    /**
+   * Get all tabbable elements based on tabindex and then regular dom order
+   */
+    function tabbable() {
+        const regularTabbables = [];
+        const orderedTabbables = [];
+        const candidateSelectors = [
+            'input',
+            'select',
+            'textarea',
+            'a[href]',
+            'button',
+            '[tabindex]',
+            'audio[controls]',
+            'video[controls]',
+            '[contenteditable]:not([contenteditable="false"])',
+        ].join(',');
+        const candidates = document.querySelectorAll(candidateSelectors);
+        for (let i = 0; i < candidates.length; i++) {
+            const candidate = candidates[i];
+            if (!isNodeMatchingSelectorTabbable(candidate)) {
+                continue;
+            }
+            const candidateTabindex = getTabindex(candidate);
+            if (candidateTabindex === 0) {
+                regularTabbables.push(candidate);
+            }
+            else {
+                orderedTabbables.push({
+                    documentOrder: i,
+                    tabIndex: candidateTabindex,
+                    node: candidate,
+                });
+            }
+        }
+        return Array.prototype.slice.call(orderedTabbables
+            .sort(sortOrderedTabbables)
+            .map((a) => a.node)
+            .concat(regularTabbables));
+    }
+    /**
+   * Is the node tabbable
+   */
+    function isNodeMatchingSelectorTabbable(node) {
+        return !(!isNodeMatchingSelectorFocusable(node) || isNonTabbableRadio(node) || getTabindex(node) < 0);
+    }
+    /**
+   * Check if the node has a focused state
+   */
+    function isNodeMatchingSelectorFocusable(node) {
+        return !(node.hasAttribute('disabled') || node.getAttribute('disabled') || isHiddenInput(node) || isHidden(node));
+    }
+    /**
+   * Get the tab index of the node
+   */
+    function getTabindex(node) {
+        const tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+        if (!isNaN(tabindexAttr)) {
+            return tabindexAttr;
+        }
+        // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+        // so if they don't have a tabindex attribute specifically set, assume it's 0.
+        // TODO: Lines 173-174 are currently untestable with the current setup
+        // The radio input with no name case is hard to test through the public API
+        if (isContentEditable(node)) {
+            return 0;
+        }
+        return node.tabIndex;
+    }
+    /**
+   * Return ordered tabbable nodes
+   */
+    function sortOrderedTabbables(nodeA, nodeB) {
+        // TODO: Lines 187-191 are currently untestable with the current setup
+        // The findHighestNode function is hard to test through the public API
+        return nodeA.tabIndex === nodeB.tabIndex
+            ? // This is so bad :(, fix this!
+                nodeA.documentOrder - nodeB.documentOrder
+            : nodeA.tabIndex - nodeB.tabIndex;
+    }
+    /**
+   * Is the content editable
+   */
+    function isContentEditable(node) {
+        return node.contentEditable === 'true';
+    }
+    /**
+   * Is the node an input
+   */
+    function isInput(node) {
+        return node.tagName === 'INPUT';
+    }
+    /**
+   * Is the input hidden
+   */
+    function isHiddenInput(node) {
+        return isInput(node) && node.type === 'hidden';
+    }
+    /**
+   * Is the node a radio input
+   */
+    function isRadio(node) {
+        return isInput(node) && node.type === 'radio';
+    }
+    /**
+   * Is the node a radio input and can it be tabbed
+   */
+    function isNonTabbableRadio(node) {
+        return isRadio(node) && !isTabbableRadio(node);
+    }
+    /**
+   * Get the checked radio input
+   */
+    // @ts-ignore
+    function getCheckedRadio(nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+            if (nodes[i].checked) {
+                return nodes[i];
+            }
+        }
+    }
+    /**
+   * Is the radio input tabbable
+   */
+    function isTabbableRadio(node) {
+        if (!node.name) {
+            return true;
+        }
+        // This won't account for the edge case where you have radio groups with the same
+        // in separate forms on the same page.
+        // This is bad :(, but don't know how to fix this typing
+        const radioSet = node.ownerDocument.querySelectorAll(`input[type="radio"][name="${node.name}"]`);
+        const checked = getCheckedRadio(radioSet);
+        return !checked || checked === node;
+    }
+    /**
+   * Is the node hidden
+   */
+    function isHidden(node) {
+        // offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element,
+        // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well.
+        return node.offsetParent === null || getComputedStyle(node).visibility === 'hidden';
+    }
+    /**
+   * Get the document scroll height
+   */
+    function getDocumentScrollHeight() {
+        const viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        const scrollHeight = document.documentElement.scrollHeight;
+        const bodyScrollHeight = document.body.scrollHeight;
+        // In some situations the default scrollheight can be equal to the viewport height
+        // but the body scroll height can be different, then return that one
+        if (viewPortHeight === scrollHeight && bodyScrollHeight > scrollHeight) {
+            return bodyScrollHeight;
+        }
+        // In some cases we can have a challenge determining the height of the page
+        // due to for example a `vh` property on the body element.
+        // If that is the case we need to walk over all the elements and determine the highest element
+        // this is a very time consuming thing, so our last hope :(
+        let pageHeight = 0;
+        let largestNodeElement = document.querySelector('body');
+        // TODO: Lines 288-293 are currently untestable with the current setup
+        if (bodyScrollHeight === scrollHeight && bodyScrollHeight === viewPortHeight) {
+            findHighestNode(document.documentElement.childNodes);
+            // There could be some elements above this largest element,
+            // add that on top
+            return pageHeight + largestNodeElement?.getBoundingClientRect().top;
+        }
+        // The scrollHeight is good enough
+        return scrollHeight;
+        /**
+        * Find the largest html element on the page
+        */
+        // This is so bad :(, fix the typings!!!
+        function findHighestNode(nodesList) {
+            // TODO: Lines 304-319 are currently untestable with the current setup
+            for (let i = nodesList.length - 1; i >= 0; i--) {
+                const currentNode = nodesList[i];
+                /* istanbul ignore next */
+                if (currentNode.scrollHeight && currentNode.clientHeight) {
+                    const elHeight = Math.max(currentNode.scrollHeight, currentNode.clientHeight);
+                    pageHeight = Math.max(elHeight, pageHeight);
+                    if (elHeight === pageHeight) {
+                        largestNodeElement = currentNode;
+                    }
+                }
+                if (currentNode.childNodes.length) {
+                    findHighestNode(currentNode.childNodes);
+                }
+            }
+        }
+    }
+}

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

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

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

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

package/dist/clientSideScripts/drawTabbableOnCanvas.test.js

@@ -0,0 +1,251 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import drawTabbableOnCanvas from './drawTabbableOnCanvas.js';
+describe('drawTabbableOnCanvas', () => {
+    const mockCanvasContext = {
+        beginPath: vi.fn(),
+        globalCompositeOperation: '',
+        lineWidth: 0,
+        strokeStyle: '',
+        moveTo: vi.fn(),
+        lineTo: vi.fn(),
+        stroke: vi.fn(),
+        fillStyle: '',
+        arc: vi.fn(),
+        fill: vi.fn(),
+        font: '',
+        textAlign: '',
+        textBaseline: '',
+        fillText: vi.fn(),
+    };
+    const defaultOptions = {
+        line: {
+            color: '#ff0000',
+            width: 2,
+        },
+        circle: {
+            backgroundColor: '#ffffff',
+            borderColor: '#ff0000',
+            borderWidth: 2,
+            size: 10,
+            showNumber: true,
+            fontSize: 12,
+            fontFamily: 'Arial',
+            fontColor: '#000000',
+        },
+    };
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true });
+        Object.defineProperty(window, 'innerHeight', { value: 768, configurable: true });
+        Object.defineProperty(document.documentElement, 'clientHeight', { value: 768, configurable: true });
+        Object.defineProperty(document.documentElement, 'scrollHeight', { value: 1000, configurable: true });
+        Object.defineProperty(document.body, 'scrollHeight', { value: 1000, configurable: true });
+        window.scrollTo = vi.fn();
+        const mockGetContext = vi.fn().mockReturnValue(mockCanvasContext);
+        HTMLCanvasElement.prototype.getContext = mockGetContext;
+        vi.clearAllMocks();
+    });
+    it('should create a canvas element with correct dimensions', () => {
+        drawTabbableOnCanvas(defaultOptions);
+        const canvas = document.getElementById('wic-tabbable-canvas');
+        expect(canvas).toBeTruthy();
+        expect(canvas.width).toBe(1024);
+        expect(canvas.height).toBe(1000);
+        expect(canvas.style.position).toBe('absolute');
+        expect(canvas.style.top).toBe('0px');
+        expect(canvas.style.left).toBe('0px');
+        expect(canvas.style.zIndex).toBe('999999');
+    });
+    it('should draw lines and circles for tabbable elements', () => {
+        const button = document.createElement('button');
+        button.textContent = 'Test Button';
+        button.tabIndex = 0;
+        document.body.appendChild(button);
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.tabIndex = 0;
+        document.body.appendChild(input);
+        const mockRect = {
+            left: 100,
+            top: 100,
+            width: 100,
+            height: 50,
+            right: 200,
+            bottom: 150,
+        };
+        Element.prototype.getBoundingClientRect = vi.fn().mockReturnValue(mockRect);
+        Object.defineProperty(button, 'offsetParent', { value: document.body, configurable: true });
+        Object.defineProperty(input, 'offsetParent', { value: document.body, configurable: true });
+        const beginPathSpy = vi.spyOn(mockCanvasContext, 'beginPath');
+        const globalCompositeOperationSpy = vi.spyOn(mockCanvasContext, 'globalCompositeOperation', 'set');
+        const fillStyleSpy = vi.spyOn(mockCanvasContext, 'fillStyle', 'set');
+        const strokeStyleSpy = vi.spyOn(mockCanvasContext, 'strokeStyle', 'set');
+        const lineWidthSpy = vi.spyOn(mockCanvasContext, 'lineWidth', 'set');
+        drawTabbableOnCanvas(defaultOptions);
+        expect(beginPathSpy).toHaveBeenCalled();
+        expect(globalCompositeOperationSpy).toHaveBeenNthCalledWith(1, 'destination-over');
+        expect(lineWidthSpy).toHaveBeenNthCalledWith(1, defaultOptions.line.width);
+        expect(strokeStyleSpy).toHaveBeenNthCalledWith(1, defaultOptions.line.color);
+        expect(mockCanvasContext.moveTo).toHaveBeenCalled();
+        expect(mockCanvasContext.lineTo).toHaveBeenCalled();
+        expect(mockCanvasContext.stroke).toHaveBeenCalled();
+        expect(globalCompositeOperationSpy).toHaveBeenNthCalledWith(2, 'source-over');
+        expect(fillStyleSpy).toHaveBeenNthCalledWith(1, defaultOptions.circle.backgroundColor);
+        expect(lineWidthSpy).toHaveBeenNthCalledWith(2, defaultOptions.circle.borderWidth);
+        expect(strokeStyleSpy).toHaveBeenNthCalledWith(2, defaultOptions.circle.borderColor);
+        expect(mockCanvasContext.arc).toHaveBeenCalled();
+        expect(mockCanvasContext.fill).toHaveBeenCalled();
+        expect(mockCanvasContext.stroke).toHaveBeenCalled();
+        expect(fillStyleSpy).toHaveBeenNthCalledWith(2, defaultOptions.circle.fontColor);
+        expect(mockCanvasContext.font).toBe(`${defaultOptions.circle.fontSize}px ${defaultOptions.circle.fontFamily}`);
+        expect(mockCanvasContext.textAlign).toBe('center');
+        expect(mockCanvasContext.textBaseline).toBe('middle');
+        expect(mockCanvasContext.fillText).toHaveBeenCalled();
+    });
+    it('should handle empty tabbable elements', () => {
+        drawTabbableOnCanvas(defaultOptions);
+        const canvas = document.getElementById('wic-tabbable-canvas');
+        expect(canvas).toBeTruthy();
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+    });
+    it('should handle hidden elements', () => {
+        const button = document.createElement('button');
+        button.style.visibility = 'hidden';
+        document.body.appendChild(button);
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+    });
+    it('should handle disabled elements', () => {
+        const button = document.createElement('button');
+        button.disabled = true;
+        document.body.appendChild(button);
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+    });
+    it('should not include elements with negative tabindex', () => {
+        const div = document.createElement('div');
+        div.tabIndex = -1;
+        document.body.appendChild(div);
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+    });
+    it('should not include disabled elements', () => {
+        const input = document.createElement('input');
+        input.disabled = true;
+        document.body.appendChild(input);
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+    });
+    it('should not include hidden elements (visibility: hidden)', () => {
+        const input = document.createElement('input');
+        input.style.visibility = 'hidden';
+        document.body.appendChild(input);
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+    });
+    it('should only include checked radio in group as tabbable', () => {
+        const radio1 = document.createElement('input');
+        radio1.type = 'radio';
+        radio1.name = 'group1';
+        document.body.appendChild(radio1);
+        const radio2 = document.createElement('input');
+        radio2.type = 'radio';
+        radio2.name = 'group1';
+        radio2.checked = true;
+        document.body.appendChild(radio2);
+        Object.defineProperty(radio1, 'offsetParent', { value: document.body, configurable: true });
+        Object.defineProperty(radio2, 'offsetParent', { value: document.body, configurable: true });
+        radio2.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).toHaveBeenCalled();
+    });
+    it('should sort tabbable elements correctly (tabIndex 0 vs non-zero)', () => {
+        const btn1 = document.createElement('button');
+        btn1.tabIndex = 0;
+        document.body.appendChild(btn1);
+        const btn2 = document.createElement('button');
+        btn2.tabIndex = 1;
+        document.body.appendChild(btn2);
+        Object.defineProperty(btn1, 'offsetParent', { value: document.body, configurable: true });
+        Object.defineProperty(btn2, 'offsetParent', { value: document.body, configurable: true });
+        btn1.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        btn2.getBoundingClientRect = vi.fn().mockReturnValue({ left: 20, top: 20, width: 10, height: 10, right: 30, bottom: 30 });
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).toHaveBeenCalled();
+    });
+    it('should treat radio with no name as tabbable', () => {
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        document.body.appendChild(radio);
+        Object.defineProperty(radio, 'offsetParent', { value: document.body, configurable: true });
+        radio.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).toHaveBeenCalled();
+    });
+    it('should treat contentEditable as tabbable', () => {
+        const div = document.createElement('div');
+        div.contentEditable = 'true';
+        div.tabIndex = 0;
+        document.body.appendChild(div);
+        Object.defineProperty(div, 'offsetParent', { value: document.body, configurable: true });
+        div.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        drawTabbableOnCanvas(defaultOptions);
+        expect(mockCanvasContext.beginPath).toHaveBeenCalled();
+    });
+    it('should use body scrollHeight if it is greater than document scrollHeight', () => {
+        Object.defineProperty(document.documentElement, 'clientHeight', { value: 100, configurable: true });
+        Object.defineProperty(document.documentElement, 'scrollHeight', { value: 100, configurable: true });
+        Object.defineProperty(document.body, 'scrollHeight', { value: 200, configurable: true });
+        Object.defineProperty(window, 'innerHeight', { value: 100, configurable: true });
+        const btn = document.createElement('button');
+        btn.tabIndex = 0;
+        Object.defineProperty(btn, 'offsetParent', { value: document.body, configurable: true });
+        btn.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        document.body.appendChild(btn);
+        drawTabbableOnCanvas(defaultOptions);
+        const canvas = document.getElementById('wic-tabbable-canvas');
+        expect(canvas.height).toBe(200);
+    });
+    it('should walk DOM to find highest node if scrollHeight and bodyScrollHeight equal clientHeight', () => {
+        Object.defineProperty(document.documentElement, 'clientHeight', { value: 100, configurable: true });
+        Object.defineProperty(document.documentElement, 'scrollHeight', { value: 100, configurable: true });
+        Object.defineProperty(document.body, 'scrollHeight', { value: 100, configurable: true });
+        const tallDiv = document.createElement('div');
+        tallDiv.style.height = '300px';
+        document.body.appendChild(tallDiv);
+        tallDiv.getBoundingClientRect = vi.fn().mockReturnValue({ top: 0 });
+        drawTabbableOnCanvas(defaultOptions);
+        const canvas = document.getElementById('wic-tabbable-canvas');
+        expect(canvas.height).toBeGreaterThanOrEqual(100);
+    });
+    it('should not throw or attempt to draw if getContext returns null (drawLine)', () => {
+        const originalGetContext = HTMLCanvasElement.prototype.getContext;
+        HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue(null);
+        const btn1 = document.createElement('button');
+        btn1.tabIndex = 0;
+        Object.defineProperty(btn1, 'offsetParent', { value: document.body, configurable: true });
+        btn1.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        document.body.appendChild(btn1);
+        const btn2 = document.createElement('button');
+        btn2.tabIndex = 0;
+        Object.defineProperty(btn2, 'offsetParent', { value: document.body, configurable: true });
+        btn2.getBoundingClientRect = vi.fn().mockReturnValue({ left: 20, top: 20, width: 10, height: 10, right: 30, bottom: 30 });
+        document.body.appendChild(btn2);
+        expect(() => drawTabbableOnCanvas(defaultOptions)).not.toThrow();
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+        HTMLCanvasElement.prototype.getContext = originalGetContext;
+    });
+    it('should not throw or attempt to draw if getContext returns null (drawCircleAndNumber)', () => {
+        const originalGetContext = HTMLCanvasElement.prototype.getContext;
+        HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue(null);
+        const btn = document.createElement('button');
+        btn.tabIndex = 0;
+        Object.defineProperty(btn, 'offsetParent', { value: document.body, configurable: true });
+        btn.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0, top: 0, width: 10, height: 10, right: 10, bottom: 10 });
+        document.body.appendChild(btn);
+        expect(() => drawTabbableOnCanvas(defaultOptions)).not.toThrow();
+        expect(mockCanvasContext.beginPath).not.toHaveBeenCalled();
+        HTMLCanvasElement.prototype.getContext = originalGetContext;
+    });
+});

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

@@ -0,0 +1,3 @@
+import type { RectanglesOutput } from '../methods/rectangles.interfaces.js';
+export type ElementPosition = RectanglesOutput;
+//# sourceMappingURL=elementPosition.interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementPosition.interfaces.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/elementPosition.interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAE3E,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC"}

package/dist/clientSideScripts/elementPosition.interfaces.js

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

package/dist/clientSideScripts/getBoundingClientRect.d.ts

@@ -0,0 +1,6 @@
+import type { ElementPosition } from './elementPosition.interfaces.js';
+/**
+ * Get the element position relative to the viewport
+ */
+export declare function getBoundingClientRect(element: HTMLElement): ElementPosition;
+//# sourceMappingURL=getBoundingClientRect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getBoundingClientRect.d.ts","sourceRoot":"","sources":["../../src/clientSideScripts/getBoundingClientRect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAEtE;;GAEG;AACH,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,WAAW,GACrB,eAAe,CASjB"}

package/dist/clientSideScripts/getBoundingClientRect.js

@@ -0,0 +1,12 @@
+/**
+ * Get the element position relative to the viewport
+ */
+export function getBoundingClientRect(element) {
+    const { height, width, x, y } = element.getBoundingClientRect();
+    return {
+        height: Math.round(height),
+        width: Math.round(width),
+        x: Math.round(x),
+        y: Math.round(y),
+    };
+}

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

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

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

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

package/dist/clientSideScripts/getBoundingClientRect.test.js

@@ -0,0 +1,28 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { getBoundingClientRect } from './getBoundingClientRect.js';
+describe('getBoundingClientRect', () => {
+    it('should return rounded values of the bounding client rect', () => {
+        const element = document.createElement('div');
+        Object.defineProperty(element, 'getBoundingClientRect', {
+            value: () => ({
+                x: 10.7,
+                y: 20.4,
+                width: 100.9,
+                height: 200.3,
+                top: 20.4,
+                left: 10.7,
+                bottom: 220.7,
+                right: 110.9,
+                toJSON: () => { },
+            }),
+        });
+        const result = getBoundingClientRect(element);
+        expect(result).toEqual({
+            x: 11,
+            y: 20,
+            width: 101,
+            height: 200,
+        });
+    });
+});

package/dist/clientSideScripts/getDocumentScrollHeight.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Get the document scroll height, this means the actual height of the page from the top to the bottom of the DOM
+ */
+export default function getDocumentScrollHeight(): number;
+//# sourceMappingURL=getDocumentScrollHeight.d.ts.map

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

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

package/dist/clientSideScripts/getDocumentScrollHeight.js

@@ -0,0 +1,48 @@
+/**
+ * Get the document scroll height, this means the actual height of the page from the top to the bottom of the DOM
+ */
+export default function getDocumentScrollHeight() {
+    const viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    const scrollHeight = document.documentElement.scrollHeight;
+    const bodyScrollHeight = document.body.scrollHeight;
+    // In some situations the default scrollheight can be equal to the viewport height
+    // but the body scroll height can be different, then return that one
+    if (viewPortHeight === scrollHeight && bodyScrollHeight > scrollHeight) {
+        return bodyScrollHeight;
+    }
+    // In some cases we can have a challenge determining the height of the page
+    // due to for example a `vh` property on the body element.
+    // If that is the case we need to walk over all the elements and determine the highest element
+    // this is a very time consuming thing, so our last hope :(
+    let pageHeight = 0;
+    let largestNodeElement = document.querySelector('body');
+    if (bodyScrollHeight === scrollHeight && bodyScrollHeight === viewPortHeight) {
+        findHighestNode(document.documentElement.childNodes);
+        // There could be some elements above this largest element,
+        // add that on top
+        /* istanbul ignore next */
+        return pageHeight + largestNodeElement.getBoundingClientRect().top;
+    }
+    // The scrollHeight is good enough
+    return scrollHeight;
+    /**
+   * Find the largest html element on the page
+   * @param nodesList
+   */
+    function findHighestNode(nodesList) {
+        for (let i = nodesList.length - 1; i >= 0; i--) {
+            const currentNode = nodesList[i];
+            /* istanbul ignore next */
+            if (currentNode.scrollHeight && currentNode.clientHeight) {
+                const elHeight = Math.max(currentNode.scrollHeight, currentNode.clientHeight);
+                pageHeight = Math.max(elHeight, pageHeight);
+                if (elHeight === pageHeight) {
+                    largestNodeElement = currentNode;
+                }
+            }
+            if (currentNode.childNodes.length) {
+                findHighestNode(currentNode.childNodes);
+            }
+        }
+    }
+}

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

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