@viewlint/rules 0.0.1

package/dist/rules/text-contrast.js

@@ -0,0 +1,210 @@
+import sharp from "sharp";
+import { defineRule } from "viewlint/plugin";
+import { getDomHelpersHandle } from "../utils/getDomHelpersHandle.js";
+/**
+ * Detects text with low contrast against its background.
+ *
+ * Uses screenshot-based analysis to sample the actual rendered background
+ * color behind text elements, then calculates WCAG contrast ratio.
+ */
+export default defineRule({
+    meta: {
+        severity: "warn",
+        docs: {
+            description: "Detects text with low contrast against background",
+            recommended: true,
+        },
+    },
+    async run(context) {
+        const MINIMUM_CONTRAST_RATIO = 2.0;
+        const domHelpers = await getDomHelpersHandle(context.page);
+        const textElements = await context.evaluate(({ scope, args: { domHelpers } }) => {
+            const hasDirectTextContent = (el) => {
+                return domHelpers.getDirectTextNodes(el).length > 0;
+            };
+            const parseColor = (colorString) => {
+                if (!colorString || colorString === "transparent") {
+                    return { r: 0, g: 0, b: 0, a: 0 };
+                }
+                const canvas = document.createElement("canvas");
+                canvas.width = 1;
+                canvas.height = 1;
+                const ctx = canvas.getContext("2d");
+                if (!ctx)
+                    return null;
+                ctx.clearRect(0, 0, 1, 1);
+                ctx.fillStyle = colorString;
+                ctx.fillRect(0, 0, 1, 1);
+                const imageData = ctx.getImageData(0, 0, 1, 1);
+                const [r, g, b, a] = imageData.data;
+                if (r === undefined ||
+                    g === undefined ||
+                    b === undefined ||
+                    a === undefined) {
+                    return null;
+                }
+                return { r, g, b, a: a / 255 };
+            };
+            const getUniqueSelector = (el) => {
+                if (window.__viewlint_finder) {
+                    return window.__viewlint_finder(el);
+                }
+                // Fallback
+                if (el.id)
+                    return `#${el.id}`;
+                return el.tagName.toLowerCase();
+            };
+            const results = [];
+            const allElements = scope.queryAll("*");
+            for (const el of allElements) {
+                if (!domHelpers.isHtmlElement(el))
+                    continue;
+                if (!domHelpers.isVisible(el))
+                    continue;
+                if (!hasDirectTextContent(el))
+                    continue;
+                const style = window.getComputedStyle(el);
+                const textColor = parseColor(style.color);
+                if (!textColor)
+                    continue;
+                const rect = domHelpers.getTextBounds(el, 1);
+                if (!rect)
+                    continue;
+                // Skip elements outside viewport
+                if (rect.bottom <= 0 ||
+                    rect.right <= 0 ||
+                    rect.top >= window.innerHeight ||
+                    rect.left >= window.innerWidth)
+                    continue;
+                results.push({
+                    selector: getUniqueSelector(el),
+                    textColor: { r: textColor.r, g: textColor.g, b: textColor.b },
+                    rect: {
+                        x: rect.x,
+                        y: rect.y,
+                        width: rect.width,
+                        height: rect.height,
+                    },
+                });
+            }
+            return results;
+        }, { domHelpers });
+        if (textElements.length === 0)
+            return;
+        // Take a screenshot for background sampling
+        const screenshotBuffer = await context.page.screenshot({ type: "png" });
+        // Decode PNG to get pixel data
+        const image = sharp(screenshotBuffer);
+        const metadata = await image.metadata();
+        const { width: imgWidth, height: imgHeight } = metadata;
+        if (!imgWidth || !imgHeight)
+            return;
+        // Get raw pixel data
+        const { data: pixels, info } = await image
+            .raw()
+            .toBuffer({ resolveWithObject: true });
+        const getPixel = (x, y) => {
+            const px = Math.floor(x);
+            const py = Math.floor(y);
+            if (px < 0 || px >= info.width || py < 0 || py >= info.height) {
+                return null;
+            }
+            const idx = (py * info.width + px) * info.channels;
+            const r = pixels[idx];
+            const g = pixels[idx + 1];
+            const b = pixels[idx + 2];
+            if (r === undefined || g === undefined || b === undefined) {
+                return null;
+            }
+            return { r, g, b };
+        };
+        const relativeLuminance = (color) => {
+            const sRGB = [color.r, color.g, color.b].map((c) => {
+                const s = c / 255;
+                return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+            });
+            const r = sRGB[0] ?? 0;
+            const g = sRGB[1] ?? 0;
+            const b = sRGB[2] ?? 0;
+            return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        };
+        const contrastRatio = (color1, color2) => {
+            const l1 = relativeLuminance(color1);
+            const l2 = relativeLuminance(color2);
+            const lighter = Math.max(l1, l2);
+            const darker = Math.min(l1, l2);
+            return (lighter + 0.05) / (darker + 0.05);
+        };
+        const formatColor = (color) => {
+            return `rgb(${color.r}, ${color.g}, ${color.b})`;
+        };
+        // Sample background color by averaging pixels around the element edges
+        const sampleBackground = (rect) => {
+            const samples = [];
+            // Sample from multiple points around the text bounds.
+            // Avoid sampling "around the element" because padding/background from
+            // surrounding layout can produce unexpected results.
+            const samplePoints = [
+                // Corners (slightly inside)
+                { x: rect.x + 2, y: rect.y + 2 },
+                { x: rect.x + rect.width - 2, y: rect.y + 2 },
+                { x: rect.x + 2, y: rect.y + rect.height - 2 },
+                { x: rect.x + rect.width - 2, y: rect.y + rect.height - 2 },
+                // Edge midpoints (slightly inside)
+                { x: rect.x + rect.width / 2, y: rect.y + 2 },
+                { x: rect.x + rect.width / 2, y: rect.y + rect.height - 2 },
+                { x: rect.x + 2, y: rect.y + rect.height / 2 },
+                { x: rect.x + rect.width - 2, y: rect.y + rect.height / 2 },
+                // Center
+                { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 },
+            ];
+            for (const point of samplePoints) {
+                const pixel = getPixel(point.x, point.y);
+                if (pixel)
+                    samples.push(pixel);
+            }
+            if (samples.length === 0)
+                return null;
+            // Average the samples
+            let totalR = 0;
+            let totalG = 0;
+            let totalB = 0;
+            for (const sample of samples) {
+                totalR += sample.r;
+                totalG += sample.g;
+                totalB += sample.b;
+            }
+            return {
+                r: Math.round(totalR / samples.length),
+                g: Math.round(totalG / samples.length),
+                b: Math.round(totalB / samples.length),
+            };
+        };
+        // Check contrast for each text element
+        for (const element of textElements) {
+            const bgColor = sampleBackground(element.rect);
+            if (!bgColor)
+                continue;
+            const ratio = contrastRatio(element.textColor, bgColor);
+            if (ratio >= MINIMUM_CONTRAST_RATIO)
+                continue;
+            const ratioFormatted = ratio.toFixed(2);
+            // Report via evaluate to get proper element reference
+            await context.evaluate(({ report, args }) => {
+                const el = document.querySelector(args.selector);
+                if (!el || !(el instanceof HTMLElement))
+                    return;
+                report({
+                    message: `Text has low contrast ratio of ${args.ratioFormatted}:1 (minimum ${args.minimumRatio}:1). Text color: ${args.textColorStr}, background: ${args.bgColorStr}`,
+                    element: el,
+                });
+            }, {
+                selector: element.selector,
+                ratioFormatted,
+                minimumRatio: MINIMUM_CONTRAST_RATIO,
+                textColorStr: formatColor(element.textColor),
+                bgColorStr: formatColor(bgColor),
+            });
+        }
+    },
+});

package/dist/rules/text-overflow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Detects text that extends beyond its container element's bounds.
+ *
+ * Uses Range API to measure text node bounds and compares against
+ * the container element's bounding box.
+ */
+declare const _default: import("viewlint").RuleDefinition<undefined>;
+export default _default;
+//# sourceMappingURL=text-overflow.d.ts.map

package/dist/rules/text-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-overflow.d.ts","sourceRoot":"","sources":["../../src/rules/text-overflow.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;;AACH,wBA6GE"}

package/dist/rules/text-overflow.js

@@ -0,0 +1,86 @@
+import { defineRule } from "viewlint/plugin";
+import { getDomHelpersHandle } from "../utils/getDomHelpersHandle.js";
+/**
+ * Detects text that extends beyond its container element's bounds.
+ *
+ * Uses Range API to measure text node bounds and compares against
+ * the container element's bounding box.
+ */
+export default defineRule({
+    meta: {
+        severity: "error",
+        docs: {
+            description: "Detects text that overflows its container element",
+            recommended: true,
+        },
+    },
+    async run(context) {
+        const domHelpers = await getDomHelpersHandle(context.page);
+        await context.evaluate(({ report, scope, args: { domHelpers } }) => {
+            const HORIZONTAL_OVERFLOW_THRESHOLD = 1;
+            const VERTICAL_OVERFLOW_RATIO = 0.5;
+            /**
+             * Check if overflow exceeds thresholds (different for horizontal/vertical).
+             */
+            const hasSignificantOverflow = (overflow, verticalThreshold) => {
+                return (overflow.top > verticalThreshold ||
+                    overflow.right > HORIZONTAL_OVERFLOW_THRESHOLD ||
+                    overflow.bottom > verticalThreshold ||
+                    overflow.left > HORIZONTAL_OVERFLOW_THRESHOLD);
+            };
+            /**
+             * Format overflow with separate horizontal/vertical thresholds.
+             */
+            const formatOverflowWithThresholds = (overflow, verticalThreshold) => {
+                const parts = [];
+                if (overflow.top > verticalThreshold) {
+                    parts.push(`${Math.round(overflow.top)}px top`);
+                }
+                if (overflow.right > HORIZONTAL_OVERFLOW_THRESHOLD) {
+                    parts.push(`${Math.round(overflow.right)}px right`);
+                }
+                if (overflow.bottom > verticalThreshold) {
+                    parts.push(`${Math.round(overflow.bottom)}px bottom`);
+                }
+                if (overflow.left > HORIZONTAL_OVERFLOW_THRESHOLD) {
+                    parts.push(`${Math.round(overflow.left)}px left`);
+                }
+                return parts.join(", ");
+            };
+            const allElements = scope.queryAll("*");
+            for (const el of allElements) {
+                if (!domHelpers.isHtmlElement(el))
+                    continue;
+                if (!domHelpers.isVisible(el))
+                    continue;
+                if (!domHelpers.hasElementRectSize(el))
+                    continue;
+                if (domHelpers.hasTextOverflowEllipsis(el))
+                    continue;
+                const containerRect = el.getBoundingClientRect();
+                const textNodes = domHelpers.getDirectTextNodes(el);
+                for (const textNode of textNodes) {
+                    const textRect = domHelpers.getTextNodeBounds(textNode);
+                    if (!textRect)
+                        continue;
+                    const fontSize = domHelpers.getFontSize(el);
+                    const verticalThreshold = fontSize * VERTICAL_OVERFLOW_RATIO;
+                    // Use domHelpers.getOverflow with threshold=0 to get all overflow values,
+                    // then apply our custom threshold logic for horizontal vs vertical
+                    const overflow = domHelpers.getOverflow(containerRect, textRect, 0);
+                    if (!overflow)
+                        continue;
+                    if (!hasSignificantOverflow(overflow, verticalThreshold))
+                        continue;
+                    const textPreview = (textNode.textContent || "").trim().slice(0, 30) +
+                        ((textNode.textContent || "").length > 30 ? "..." : "");
+                    report({
+                        message: `Text "${textPreview}" overflows container by ${formatOverflowWithThresholds(overflow, verticalThreshold)}`,
+                        element: el,
+                    });
+                    break;
+                }
+            }
+        }, { domHelpers });
+    },
+});

package/dist/rules/text-proximity.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Detects horizontally adjacent text elements that are too close together.
+ *
+ * When two text blocks are positioned very close horizontally, they can
+ * appear as a single text block, causing readability issues where readers
+ * cannot distinguish where one text ends and another begins.
+ *
+ * Uses actual text bounding boxes (via Range API), not element bounds.
+ */
+declare const _default: import("viewlint").RuleDefinition<undefined>;
+export default _default;
+//# sourceMappingURL=text-proximity.d.ts.map

package/dist/rules/text-proximity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-proximity.d.ts","sourceRoot":"","sources":["../../src/rules/text-proximity.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;;AACH,wBAyIE"}

package/dist/rules/text-proximity.js

@@ -0,0 +1,115 @@
+import { defineRule } from "viewlint/plugin";
+import { getDomHelpersHandle } from "../utils/getDomHelpersHandle.js";
+/**
+ * Detects horizontally adjacent text elements that are too close together.
+ *
+ * When two text blocks are positioned very close horizontally, they can
+ * appear as a single text block, causing readability issues where readers
+ * cannot distinguish where one text ends and another begins.
+ *
+ * Uses actual text bounding boxes (via Range API), not element bounds.
+ */
+export default defineRule({
+    meta: {
+        severity: "warn",
+        docs: {
+            description: "Detects horizontally adjacent text elements that are too close together",
+            recommended: false,
+        },
+    },
+    async run(context) {
+        const domHelpers = await getDomHelpersHandle(context.page);
+        await context.evaluate(({ report, scope, args: { domHelpers } }) => {
+            // 35% of font-size as threshold
+            const MIN_GAP_FACTOR = 0.35;
+            // Absolute minimum gap in pixels (text under this is definitely too close)
+            const MIN_GAP_PX = 3;
+            const MAX_VERTICAL_OVERLAP_TOLERANCE = 0.5;
+            const MIN_TEXT_LENGTH = 2;
+            const getDirectTextContent = (el) => {
+                let text = "";
+                for (const node of el.childNodes) {
+                    if (domHelpers.isTextNode(node)) {
+                        text += node.textContent || "";
+                    }
+                }
+                return text.trim();
+            };
+            const areHorizontallyAdjacent = (a, b) => {
+                const verticalOverlap = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+                const minHeight = Math.min(a.height, b.height);
+                if (verticalOverlap < minHeight * MAX_VERTICAL_OVERLAP_TOLERANCE) {
+                    return null;
+                }
+                if (a.right <= b.left) {
+                    return { gap: b.left - a.right, leftRect: "a" };
+                }
+                if (b.right <= a.left) {
+                    return { gap: a.left - b.right, leftRect: "b" };
+                }
+                return null;
+            };
+            const textElements = [];
+            const allElements = scope.queryAll("*");
+            for (const el of allElements) {
+                if (!domHelpers.isHtmlElement(el))
+                    continue;
+                if (!domHelpers.isVisible(el))
+                    continue;
+                const textRect = domHelpers.getTextBounds(el, MIN_TEXT_LENGTH);
+                if (!textRect)
+                    continue;
+                const fontSize = domHelpers.getFontSize(el);
+                const text = getDirectTextContent(el);
+                textElements.push({ el, textRect, fontSize, text });
+            }
+            const reportedPairs = new Set();
+            for (let i = 0; i < textElements.length; i++) {
+                const a = textElements[i];
+                if (!a)
+                    continue;
+                for (let j = i + 1; j < textElements.length; j++) {
+                    const b = textElements[j];
+                    if (!b)
+                        continue;
+                    if (a.el.contains(b.el) || b.el.contains(a.el))
+                        continue;
+                    const adjacency = areHorizontallyAdjacent(a.textRect, b.textRect);
+                    if (!adjacency)
+                        continue;
+                    const avgFontSize = (a.fontSize + b.fontSize) / 2;
+                    // Use the higher of: absolute minimum or percentage of font-size
+                    const minGap = Math.max(MIN_GAP_PX, avgFontSize * MIN_GAP_FACTOR);
+                    if (adjacency.gap >= minGap)
+                        continue;
+                    const leftEl = adjacency.leftRect === "a" ? a : b;
+                    const rightEl = adjacency.leftRect === "a" ? b : a;
+                    const leftParent = leftEl.el.parentElement;
+                    const rightParent = rightEl.el.parentElement;
+                    if (leftParent !== rightParent)
+                        continue;
+                    const pairKey = [a.textRect, b.textRect]
+                        .map((r) => `${r.left.toFixed(0)},${r.top.toFixed(0)}`)
+                        .sort()
+                        .join("|");
+                    if (reportedPairs.has(pairKey))
+                        continue;
+                    reportedPairs.add(pairKey);
+                    const leftPreview = leftEl.text.slice(0, 15) + (leftEl.text.length > 15 ? "..." : "");
+                    const rightPreview = rightEl.text.slice(0, 15) +
+                        (rightEl.text.length > 15 ? "..." : "");
+                    report({
+                        message: `Text too close (${Math.round(adjacency.gap)}px gap, min ${Math.round(minGap)}px): "${leftPreview}" and "${rightPreview}"`,
+                        element: leftEl.el,
+                        relations: [
+                            {
+                                description: "Adjacent text element",
+                                element: rightEl.el,
+                            },
+                        ],
+                    });
+                }
+            }
+        }, { domHelpers });
+    },
+});

package/dist/rules/text-ragged-lines.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Detects text blocks with awkwardly short lines (ragged lines).
+ *
+ * Analyzes multi-line text to find lines that are significantly shorter
+ * than others, which often looks unprofessional and may indicate layout
+ * issues or poor text wrapping.
+ */
+declare const _default: import("viewlint").RuleDefinition<undefined>;
+export default _default;
+//# sourceMappingURL=text-ragged-lines.d.ts.map

package/dist/rules/text-ragged-lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-ragged-lines.d.ts","sourceRoot":"","sources":["../../src/rules/text-ragged-lines.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;;AACH,wBA0JE"}

package/dist/rules/text-ragged-lines.js

@@ -0,0 +1,123 @@
+import { defineRule } from "viewlint/plugin";
+import { getDomHelpersHandle } from "../utils/getDomHelpersHandle.js";
+/**
+ * Detects text blocks with awkwardly short lines (ragged lines).
+ *
+ * Analyzes multi-line text to find lines that are significantly shorter
+ * than others, which often looks unprofessional and may indicate layout
+ * issues or poor text wrapping.
+ */
+export default defineRule({
+    meta: {
+        severity: "warn",
+        docs: {
+            description: "Detects text blocks with awkwardly short lines that disrupt visual flow",
+            recommended: false,
+        },
+    },
+    async run(context) {
+        const domHelpers = await getDomHelpersHandle(context.page);
+        await context.evaluate(({ report, scope, args: { domHelpers } }) => {
+            // 2 lines minimum - detect widows (short last line)
+            const MIN_LINES = 2;
+            // Orphan/widow threshold for the LAST line
+            const ORPHAN_LINE_RATIO = 0.45;
+            // Threshold for awkwardly short MIDDLE lines
+            const MIDDLE_LINE_RATIO = 0.3;
+            // Minimum line width to count as a "substantial" line
+            // Very short fragments still count for detecting issues
+            const MIN_LINE_WIDTH = 5;
+            // Tolerance for grouping text into lines by Y position
+            const Y_TOLERANCE = 3;
+            // Minimum element width to analyze (skip very narrow elements)
+            const MIN_ELEMENT_WIDTH = 40;
+            const getTextLines = (el) => {
+                const rects = domHelpers
+                    .getTextRects(el)
+                    .filter((rect) => rect.width >= MIN_LINE_WIDTH);
+                if (rects.length === 0)
+                    return [];
+                rects.sort((a, b) => a.top - b.top);
+                const lines = [];
+                for (const rect of rects) {
+                    const existingLine = lines.find((line) => Math.abs(line.y - rect.top) <= Y_TOLERANCE);
+                    if (!existingLine) {
+                        lines.push({
+                            y: rect.top,
+                            minLeft: rect.left,
+                            maxRight: rect.right,
+                        });
+                        continue;
+                    }
+                    existingLine.minLeft = Math.min(existingLine.minLeft, rect.left);
+                    existingLine.maxRight = Math.max(existingLine.maxRight, rect.right);
+                }
+                return lines
+                    .map((line) => ({
+                    y: line.y,
+                    width: line.maxRight - line.minLeft,
+                }))
+                    .sort((a, b) => a.y - b.y);
+            };
+            const analyzeLines = (lines) => {
+                if (lines.length < MIN_LINES)
+                    return null;
+                const widths = lines.map((l) => l.width);
+                const longestWidth = Math.max(...widths);
+                if (longestWidth < MIN_LINE_WIDTH)
+                    return null;
+                // Check the last line for orphan/widow
+                const lastLine = lines[lines.length - 1];
+                if (!lastLine)
+                    return null;
+                const ratio = lastLine.width / longestWidth;
+                if (ratio < ORPHAN_LINE_RATIO) {
+                    return {
+                        shortLineIndex: lines.length,
+                        shortLineWidth: lastLine.width,
+                        longestWidth,
+                    };
+                }
+                // Check for awkwardly short lines in the middle
+                for (let i = 1; i < lines.length - 1; i++) {
+                    const line = lines[i];
+                    if (!line)
+                        continue;
+                    const midRatio = line.width / longestWidth;
+                    if (midRatio < MIDDLE_LINE_RATIO) {
+                        return {
+                            shortLineIndex: i + 1,
+                            shortLineWidth: line.width,
+                            longestWidth,
+                        };
+                    }
+                }
+                return null;
+            };
+            const allElements = scope.queryAll("*");
+            for (const el of allElements) {
+                if (!domHelpers.isHtmlElement(el))
+                    continue;
+                if (!domHelpers.isVisible(el))
+                    continue;
+                if (!domHelpers.hasElementRectSize(el))
+                    continue;
+                // Skip very narrow containers where multi-line is unavoidable
+                const rect = el.getBoundingClientRect();
+                if (rect.width < MIN_ELEMENT_WIDTH)
+                    continue;
+                const lines = getTextLines(el);
+                if (lines.length < MIN_LINES)
+                    continue;
+                const analysis = analyzeLines(lines);
+                if (!analysis)
+                    continue;
+                const percentage = Math.round((analysis.shortLineWidth / analysis.longestWidth) * 100);
+                report({
+                    message: `Text has awkwardly short line ${analysis.shortLineIndex} of ${lines.length}: ${Math.round(analysis.shortLineWidth)}px wide (${percentage}% of longest ${Math.round(analysis.longestWidth)}px line)`,
+                    element: el,
+                });
+            }
+        }, { domHelpers });
+    },
+});

package/dist/rules/unexpected-scrollbar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Detects small/unexpected scrollbars that indicate layout overflow bugs.
+ *
+ * Finds elements where scroll distance is small (1-20px), which usually
+ * indicates pixel/subpixel layout issues rather than intentional scrolling.
+ */
+declare const _default: import("viewlint").RuleDefinition<undefined>;
+export default _default;
+//# sourceMappingURL=unexpected-scrollbar.d.ts.map

package/dist/rules/unexpected-scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unexpected-scrollbar.d.ts","sourceRoot":"","sources":["../../src/rules/unexpected-scrollbar.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;;AACH,wBAmFE"}

package/dist/rules/unexpected-scrollbar.js

@@ -0,0 +1,77 @@
+import { defineRule } from "viewlint/plugin";
+import { getDomHelpersHandle } from "../utils/getDomHelpersHandle.js";
+/**
+ * Detects small/unexpected scrollbars that indicate layout overflow bugs.
+ *
+ * Finds elements where scroll distance is small (1-20px), which usually
+ * indicates pixel/subpixel layout issues rather than intentional scrolling.
+ */
+export default defineRule({
+    meta: {
+        severity: "error",
+        docs: {
+            description: "Detects unexpected scrollbars from minor layout overflow",
+            recommended: true,
+        },
+    },
+    async run(context) {
+        const domHelpers = await getDomHelpersHandle(context.page);
+        await context.evaluate(({ report, scope, args: { domHelpers } }) => {
+            const MIN_SCROLL_OVERFLOW = 1;
+            const MAX_UNEXPECTED_OVERFLOW = 20;
+            const hasSize = (el) => {
+                return domHelpers.hasClientSize(el);
+            };
+            const checkElement = (el) => {
+                if (!domHelpers.isVisible(el))
+                    return;
+                if (!hasSize(el))
+                    return;
+                const style = window.getComputedStyle(el);
+                const overflowX = style.overflowX;
+                const overflowY = style.overflowY;
+                const canScrollX = domHelpers.canScroll(overflowX);
+                const canScrollY = domHelpers.canScroll(overflowY);
+                if (!canScrollX && !canScrollY)
+                    return;
+                const { scrollWidth, scrollHeight, clientWidth, clientHeight } = el;
+                const overflowAmountX = scrollWidth - clientWidth;
+                const overflowAmountY = scrollHeight - clientHeight;
+                const unexpectedX = canScrollX &&
+                    overflowAmountX >= MIN_SCROLL_OVERFLOW &&
+                    overflowAmountX <= MAX_UNEXPECTED_OVERFLOW;
+                const unexpectedY = canScrollY &&
+                    overflowAmountY >= MIN_SCROLL_OVERFLOW &&
+                    overflowAmountY <= MAX_UNEXPECTED_OVERFLOW;
+                if (!unexpectedX && !unexpectedY)
+                    return;
+                let message;
+                if (unexpectedX && unexpectedY) {
+                    message = `Unexpected scrollbar: element scrolls ${overflowAmountX}px horizontally and ${overflowAmountY}px vertically (likely a layout bug)`;
+                }
+                else if (unexpectedX) {
+                    message = `Unexpected horizontal scrollbar: element scrolls ${overflowAmountX}px (likely a layout bug)`;
+                }
+                else {
+                    message = `Unexpected vertical scrollbar: element scrolls ${overflowAmountY}px (likely a layout bug)`;
+                }
+                report({
+                    message,
+                    element: el,
+                });
+            };
+            checkElement(document.documentElement);
+            if (document.body) {
+                checkElement(document.body);
+            }
+            const allElements = scope.queryAll("*");
+            for (const el of allElements) {
+                if (!domHelpers.isHtmlElement(el))
+                    continue;
+                if (el === document.documentElement || el === document.body)
+                    continue;
+                checkElement(el);
+            }
+        }, { domHelpers });
+    },
+});