browser-debugger-cli 0.11.0 → 0.13.0

package/dist/runtime/css/search.js

@@ -0,0 +1,122 @@
+/**
+ * `bdg css search <text>`: find text in the page's stylesheets, cross-origin
+ * ones included (CDP reads every stylesheet's text), and show the rule
+ * around each match with its `file:line`.
+ */
+import { enableStyleDomains } from '../dom/inspect.js';
+import { stylesheetPositionLabel, styleSheetHeaders } from '../dom/inspectRules.js';
+import { createLogger } from '../../ui/logging/index.js';
+import { getErrorMessage } from '../../utils/errors.js';
+const log = createLogger('dom');
+/** Matches listed without `--limit` */
+export const DEFAULT_CSS_SEARCH_LIMIT = 20;
+/** Characters of a rule shown around a match */
+const RULE_CONTEXT = 240;
+/**
+ * Search the stylesheets for a text (case-insensitive).
+ *
+ * @param cdp - CDP connection
+ * @param params - Text and limit
+ * @returns Matches with their place
+ */
+export async function searchStyleSheets(cdp, params) {
+    await enableStyleDomains(cdp);
+    const headers = [...styleSheetHeaders(cdp)].filter((header) => header.origin !== 'user-agent');
+    const limit = params.limit ?? DEFAULT_CSS_SEARCH_LIMIT;
+    const texts = await Promise.all(headers.map((header) => sheetText(cdp, header.styleSheetId)));
+    const matches = [];
+    let total = 0;
+    headers.forEach((header, i) => {
+        const found = findInSheet(texts[i] ?? '', params.query, Number.POSITIVE_INFINITY);
+        const seen = new Set();
+        for (const match of found.matches) {
+            if (seen.has(match.rule))
+                continue;
+            seen.add(match.rule);
+            total++;
+            if (matches.length >= limit)
+                continue;
+            matches.push({
+                source: stylesheetPositionLabel(header, match.line, match.column),
+                text: match.rule,
+            });
+        }
+    });
+    return { query: params.query, sheets: headers.length, total, matches };
+}
+/**
+ * A stylesheet's text; empty when Chrome cannot give it.
+ *
+ * @param cdp - CDP connection
+ * @param styleSheetId - Stylesheet
+ * @returns Text
+ */
+async function sheetText(cdp, styleSheetId) {
+    try {
+        const response = (await cdp.send('CSS.getStyleSheetText', {
+            styleSheetId,
+        }));
+        return response.text;
+    }
+    catch (error) {
+        log.debug(`No text for stylesheet ${styleSheetId}: ${getErrorMessage(error)}`);
+        return '';
+    }
+}
+/**
+ * Where a text occurs in a stylesheet (case-insensitive): how many times,
+ * and for the first `limit` matches the 0-based line and column and the
+ * rule around it (from the end of the previous rule to the end of this one,
+ * whitespace collapsed, at most {@link RULE_CONTEXT} characters each side).
+ * Lines are counted as the search moves on, so a big sheet is read once.
+ *
+ * @param text - Stylesheet text
+ * @param query - Text to find
+ * @param limit - Matches described at most
+ * @returns Match count and the described matches
+ */
+export function findInSheet(text, query, limit = Number.POSITIVE_INFINITY) {
+    const matches = [];
+    const haystack = text.toLowerCase();
+    const needle = query.toLowerCase();
+    if (needle === '')
+        return { total: 0, matches };
+    let total = 0;
+    let line = 0;
+    let lineStart = 0;
+    let scanned = 0;
+    for (let at = haystack.indexOf(needle); at >= 0; at = haystack.indexOf(needle, at + needle.length)) {
+        total++;
+        if (matches.length >= limit)
+            continue;
+        for (let i = text.indexOf('\n', scanned); i >= 0 && i < at; i = text.indexOf('\n', i + 1)) {
+            line++;
+            lineStart = i + 1;
+        }
+        scanned = at;
+        matches.push({ line, column: at - lineStart, rule: ruleAround(text, at) });
+    }
+    return { total, matches };
+}
+/**
+ * The rule around a position: whole when short, else its selector and the
+ * declarations near the position (`.btn { … color: var(--brand); … }`),
+ * whitespace collapsed.
+ *
+ * @param text - Stylesheet text
+ * @param at - Position of the match
+ * @returns Rule text
+ */
+function ruleAround(text, at) {
+    const ruleStart = text.lastIndexOf('}', at) + 1;
+    const open = text.indexOf('{', ruleStart);
+    const close = text.indexOf('}', at);
+    const ruleEnd = close < 0 ? text.length : close + 1;
+    const collapse = (part) => part.replace(/\s+/g, ' ').trim();
+    if (ruleEnd - ruleStart <= 2 * RULE_CONTEXT || open < 0 || open > at) {
+        return collapse(text.slice(Math.max(ruleStart, at - RULE_CONTEXT), Math.min(ruleEnd, at + RULE_CONTEXT)));
+    }
+    const near = collapse(text.slice(Math.max(open + 1, at - RULE_CONTEXT / 2), Math.min(ruleEnd - 1, at + RULE_CONTEXT / 2)));
+    return `${collapse(text.slice(ruleStart, open))} { … ${near} … }`;
+}
+//# sourceMappingURL=search.js.map

package/dist/runtime/dom/actionEffects.d.ts

@@ -65,6 +65,8 @@ export interface OtherActivity {
     dialogs: number;
     /** A window, tab or download was opened */
     opened: boolean;
+    /** Console messages logged during the action */
+    consoleMessages: number;
 }
 /**
  * Messages that are new after the action: all of them after a new document
@@ -81,7 +83,10 @@ export interface OtherActivity {
  * @param newDocument - Whether a new document loaded
  * @returns New messages
  */
-export declare function newMessages(before: SeenMessage[], after: SeenMessage[], newDocument: boolean): NewMessage[];
+export declare function newMessages(before: SeenMessage[], after: SeenMessage[], newDocument: boolean): {
+    messages: NewMessage[];
+    more: number;
+};
 /**
  * Elements to report as shown: those whose text is not already reported as
  * a new message, at most {@link MAX_SHOWN_ELEMENTS}, texts cut to
@@ -144,7 +149,7 @@ export declare function pageNavigation(startHref: string | undefined, read: Read
  * Whether an action had no visible effect: the page was read before and
  * after in the same document, it counted no DOM change, nothing made the
  * check uncertain, and no navigation, message, shown element, request,
- * dialog or new window happened.
+ * dialog, new window or console message happened.
  *
  * @param read - Page read after the action
  * @param effects - Navigation and messages found
@@ -156,6 +161,8 @@ export declare function hadNoEffect(read: ReadSnapshot | undefined, effects: Act
 export interface CollectOptions {
     /** Dialogs the action opened */
     dialogs: number;
+    /** Console messages logged since the action started, so far */
+    consoleMessages: () => number;
     /** Decide "no effect" (with a second look when nothing seemed to happen) */
     detectNoEffect: boolean;
     /** List the elements the action showed */

package/dist/runtime/dom/actionEffects.js

@@ -81,8 +81,6 @@ export function newMessages(before, after, newDocument) {
     const reported = new Set();
     const result = [];
     for (const message of after) {
-        if (result.length >= MAX_NEW_MESSAGES)
-            break;
         if (reported.has(message.text) || TICKING_TEXT.test(message.text))
             continue;
         if (!isNew(message))
@@ -90,7 +88,10 @@ export function newMessages(before, after, newDocument) {
         reported.add(message.text);
         result.push({ text: cutText(message.text), element: message.element });
     }
-    return result;
+    return {
+        messages: result.slice(0, MAX_NEW_MESSAGES),
+        more: Math.max(0, result.length - MAX_NEW_MESSAGES),
+    };
 }
 /**
  * Cut a text to {@link MAX_MESSAGE_LENGTH} characters, marking the cut.
@@ -207,7 +208,7 @@ export function pageNavigation(startHref, read, events) {
  * Whether an action had no visible effect: the page was read before and
  * after in the same document, it counted no DOM change, nothing made the
  * check uncertain, and no navigation, message, shown element, request,
- * dialog or new window happened.
+ * dialog, new window or console message happened.
  *
  * @param read - Page read after the action
  * @param effects - Navigation and messages found
@@ -224,7 +225,8 @@ export function hadNoEffect(read, effects, activity) {
         (effects.shown ?? []).length === 0 &&
         activity.requests === 0 &&
         activity.dialogs === 0 &&
-        !activity.opened);
+        !activity.opened &&
+        activity.consoleMessages === 0);
 }
 /**
  * Start watching an action's effects: listen for main-frame navigations,
@@ -264,7 +266,11 @@ async function collectEffects(watch, options) {
     const reportShown = options.reportShown === true;
     let snapshot = await readPage(watch, { stop: false, reportShown });
     let effects = effectsOf(start, snapshot, watch.listener.events);
-    const quiet = () => hadNoEffect(snapshot, effects, { ...watch.listener.activity(), dialogs: options.dialogs });
+    const quiet = () => hadNoEffect(snapshot, effects, {
+        ...watch.listener.activity(),
+        dialogs: options.dialogs,
+        consoleMessages: options.consoleMessages(),
+    });
     if (options.detectNoEffect && quiet()) {
         await delay(NO_EFFECT_RECHECK_MS);
         snapshot = await readPage(watch, { stop: true, reportShown });
@@ -324,7 +330,8 @@ function pageWork(watch, snapshot, domChanging = false) {
 }
 /**
  * Navigation, new messages and shown elements from the snapshots and CDP
- * events.
+ * events. Snapshots a page broke (it replaced the built-ins the snapshot
+ * script uses) give the navigation only.
  *
  * @param start - Snapshot before the action, if taken
  * @param snapshot - Read after the action, if taken
@@ -333,13 +340,22 @@ function pageWork(watch, snapshot, domChanging = false) {
  */
 function effectsOf(start, snapshot, events) {
     const navigation = pageNavigation(start?.href, snapshot, events);
-    const messages = start && snapshot ? newMessages(start.messages, snapshot.messages, snapshot.fresh) : [];
-    const shown = shownElements(snapshot?.shown ?? [], messages);
-    return {
-        ...(navigation && { navigation }),
-        ...(messages.length > 0 && { messages }),
-        ...(shown.length > 0 && { shown }),
-    };
+    try {
+        const { messages, more } = start && snapshot
+            ? newMessages(start.messages, snapshot.messages, snapshot.fresh)
+            : { messages: [], more: 0 };
+        const shown = shownElements(snapshot?.shown ?? [], messages);
+        return {
+            ...(navigation && { navigation }),
+            ...(messages.length > 0 && { messages }),
+            ...(more > 0 && { moreMessages: more }),
+            ...(shown.length > 0 && { shown }),
+        };
+    }
+    catch (error) {
+        log.debug(`Page effects not readable (the page replaced built-ins?): ${getErrorMessage(error)}`);
+        return { ...(navigation && { navigation }) };
+    }
 }
 /**
  * Read the page after the action, unless a main-frame load is pending (the

package/dist/runtime/dom/audit.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `bdg dom audit`: page-wide checks in one page walk
+ * ({@link AUDIT_PAGE_JS}), turned into findings by {@link buildAudit}.
+ */
+import type { CDPConnection } from '../../connection/cdp.js';
+import type { AuditResult } from '../../ipc/protocol/auditTypes.js';
+import type { DomAuditCommand } from '../../ipc/protocol/commands.js';
+/** Findings listed per check without `--limit` */
+export declare const DEFAULT_AUDIT_LIMIT = 20;
+/**
+ * Run the page-wide checks.
+ *
+ * @param cdp - CDP connection
+ * @param params - Checks, WCAG level and limit
+ * @returns Findings
+ * @throws CommandError (91) when the page script fails
+ */
+export declare function auditPage(cdp: CDPConnection, params: DomAuditCommand): Promise<AuditResult>;
+//# sourceMappingURL=audit.d.ts.map

package/dist/runtime/dom/audit.js

@@ -0,0 +1,37 @@
+/**
+ * `bdg dom audit`: page-wide checks in one page walk
+ * ({@link AUDIT_PAGE_JS}), turned into findings by {@link buildAudit}.
+ */
+import { CommandError } from '../../errors/index.js';
+import { operationFailedError } from '../../errors/messages.js';
+import { buildAudit } from './auditModel.js';
+import { AUDIT_PAGE_JS } from './auditScripts.js';
+import { evaluateInBdgWorld } from '../page/bdgWorld.js';
+import { EXIT_CODES } from '../../utils/exitCodes.js';
+/** Findings listed per check without `--limit` */
+export const DEFAULT_AUDIT_LIMIT = 20;
+/**
+ * Run the page-wide checks.
+ *
+ * @param cdp - CDP connection
+ * @param params - Checks, WCAG level and limit
+ * @returns Findings
+ * @throws CommandError (91) when the page script fails
+ */
+export async function auditPage(cdp, params) {
+    const response = await evaluateInBdgWorld(cdp, {
+        expression: `(${AUDIT_PAGE_JS})(${JSON.stringify(params.checks)})`,
+        returnByValue: true,
+    });
+    const raw = response.result.value;
+    if (response.exceptionDetails || !raw) {
+        const err = operationFailedError('audit the page', response.exceptionDetails?.exception?.description ?? 'the page script failed');
+        throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.SCRIPT_ERROR);
+    }
+    return buildAudit(raw, {
+        checks: params.checks,
+        level: params.level ?? 'AA',
+        limit: params.limit ?? DEFAULT_AUDIT_LIMIT,
+    });
+}
+//# sourceMappingURL=audit.js.map

package/dist/runtime/dom/auditModel.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `bdg dom audit` results from the page-side walk ({@link AUDIT_PAGE_JS}):
+ * text below a WCAG contrast level (composited like `dom inspect`), what
+ * makes the page scroll sideways, cut-off text, scaled or distorted images,
+ * fixed and sticky layers and running animations. Pure: tested without a
+ * browser.
+ */
+import type { AuditContrastItem, AuditImage, AuditResult, AuditCheck } from '../../ipc/protocol/auditTypes.js';
+import type { RawAudit, RawImage } from './auditScripts.js';
+/** What `dom audit` was asked for */
+export interface AuditOptions {
+    checks: AuditCheck[];
+    /** WCAG level text must reach */
+    level: 'AA' | 'AAA';
+    /** Findings listed per check */
+    limit: number;
+}
+/**
+ * The audit result.
+ *
+ * @param raw - Page-side walk
+ * @param options - Checks, level and limit
+ * @returns Result
+ */
+export declare function buildAudit(raw: RawAudit, options: AuditOptions): AuditResult;
+/**
+ * The ratio WCAG asks of a text at a level: large text (24px, or 18.66px
+ * bold) needs less.
+ *
+ * @param item - Text size and weight
+ * @param level - AA or AAA
+ * @returns Minimum ratio
+ */
+export declare function requiredRatio(item: Pick<AuditContrastItem, 'size' | 'weight'>, level: 'AA' | 'AAA'): number;
+/**
+ * An image drawn with fewer pixels than the screen needs (upscaled, blurry:
+ * rendered size × pixel ratio over its own pixels) or with another aspect
+ * ratio (distorted, unless `object-fit` keeps the ratio).
+ *
+ * @param image - Page-side image
+ * @param pixelRatio - Device pixel ratio
+ * @returns Finding, or undefined when it is sharp and keeps its ratio
+ */
+export declare function imageFinding(image: RawImage, pixelRatio?: number): AuditImage | undefined;
+//# sourceMappingURL=auditModel.d.ts.map

package/dist/runtime/dom/auditModel.js

@@ -0,0 +1,220 @@
+/**
+ * `bdg dom audit` results from the page-side walk ({@link AUDIT_PAGE_JS}):
+ * text below a WCAG contrast level (composited like `dom inspect`), what
+ * makes the page scroll sideways, cut-off text, scaled or distorted images,
+ * fixed and sticky layers and running animations. Pure: tested without a
+ * browser.
+ */
+import { textContrast } from './inspectPaintModel.js';
+import { hexColor } from '../../utils/color.js';
+import { pxNumber, round1 } from '../../utils/cssValues.js';
+/** Scale or aspect change (fraction) below which an image counts as drawn at its size */
+const IMAGE_TOLERANCE = 0.05;
+/**
+ * The audit result.
+ *
+ * @param raw - Page-side walk
+ * @param options - Checks, level and limit
+ * @returns Result
+ */
+export function buildAudit(raw, options) {
+    return {
+        checks: options.checks,
+        walked: raw.walked,
+        ...(raw.capped && { capped: true }),
+        ...(raw.texts && { contrast: contrastFindings(raw, options) }),
+        ...(raw.wide && { overflow: overflowFindings(raw, options.limit) }),
+        ...(raw.layers && {
+            layers: raw.layers.slice(0, options.limit).map((layer) => ({
+                element: layer.label,
+                position: layer.position,
+                zIndex: layer.zIndex,
+                rect: {
+                    x: round1(layer.rect.x),
+                    y: round1(layer.rect.y),
+                    w: round1(layer.rect.w),
+                    h: round1(layer.rect.h),
+                },
+                inView: layer.inView,
+            })),
+        }),
+        ...(raw.animations && {
+            animations: grouped(raw.animations.map((animation) => ({
+                element: animation.label,
+                name: animation.name,
+                type: animation.type,
+                duration: animation.duration,
+                iterations: animation.iterations,
+                ...(animation.scrollDriven && { scrollDriven: true }),
+            }))).slice(0, options.limit),
+        }),
+        ...(raw.canvases && { canvases: raw.canvases }),
+    };
+}
+/**
+ * Text below the level, weakest first.
+ *
+ * @param raw - Page-side walk
+ * @param options - Level and limit
+ * @returns How many were checked and failed, and the weakest
+ */
+function contrastFindings(raw, options) {
+    const checked = (raw.texts ?? []).map((text) => contrastItem(text, raw.canvasDark));
+    const below = checked
+        .filter((item) => item !== undefined)
+        .filter((item) => item.ratio < requiredRatio(item, options.level))
+        .sort((a, b) => a.ratio - b.ratio);
+    const failing = below.filter((item) => !item.approximate);
+    const uncertain = below.length - failing.length;
+    return {
+        level: options.level,
+        checked: checked.length,
+        failing: failing.length,
+        items: failing.slice(0, options.limit),
+        ...(uncertain > 0 && { uncertain }),
+    };
+}
+/**
+ * One text holder's contrast.
+ *
+ * @param text - Page-side text holder
+ * @param canvasDark - The page canvas is dark
+ * @returns Finding, or undefined when its color cannot be read
+ */
+function contrastItem(text, canvasDark) {
+    const contrast = textContrast({ color: text.color, 'font-size': text.fontSize, 'font-weight': text.fontWeight }, {
+        backgrounds: text.backgrounds,
+        canvasDark,
+        opacity: text.opacity,
+        paintRisks: text.risks,
+    });
+    if (!contrast)
+        return undefined;
+    return {
+        element: text.label,
+        text: text.text,
+        ratio: contrast.ratio,
+        color: hexColor(text.color),
+        background: contrast.background,
+        size: pxNumber(text.fontSize) ?? 16,
+        weight: Number(text.fontWeight) || 400,
+        inView: text.inView,
+        ...(contrast.opacity !== undefined && { opacity: contrast.opacity }),
+        ...(contrast.approximate && { approximate: contrast.approximate }),
+    };
+}
+/**
+ * The ratio WCAG asks of a text at a level: large text (24px, or 18.66px
+ * bold) needs less.
+ *
+ * @param item - Text size and weight
+ * @param level - AA or AAA
+ * @returns Minimum ratio
+ */
+export function requiredRatio(item, level) {
+    const large = item.size >= 24 || (item.size >= 18.66 && item.weight >= 700);
+    if (level === 'AAA')
+        return large ? 4.5 : 7;
+    return large ? 3 : 4.5;
+}
+/**
+ * What makes the page scroll sideways, cut-off text and scaled images.
+ *
+ * @param raw - Page-side walk
+ * @param limit - Findings per list
+ * @returns Overflow findings
+ */
+function overflowFindings(raw, limit) {
+    const wide = [...(raw.wide ?? [])].sort((a, b) => b.right - a.right);
+    const images = grouped((raw.images ?? [])
+        .map((image) => imageFinding(image, raw.pixelRatio))
+        .filter((image) => image !== undefined));
+    return {
+        pageWidth: raw.pageWidth,
+        viewportWidth: raw.viewport.width,
+        scrollsSideways: raw.pageWidth > raw.viewport.width + 1,
+        wide: wide.slice(0, limit).map((element) => ({
+            element: element.label,
+            right: round1(element.right),
+            width: round1(element.width),
+        })),
+        truncated: grouped((raw.truncated ?? []).map((text) => ({
+            element: text.label,
+            text: text.text,
+            kind: text.kind,
+        }))).slice(0, limit),
+        images: images.slice(0, limit),
+        pixelRatio: raw.pixelRatio,
+        scrollers: (raw.scrollers ?? []).slice(0, limit).map((scroller) => ({
+            element: scroller.label,
+            scrollWidth: scroller.scrollWidth,
+            width: scroller.width,
+        })),
+    };
+}
+/**
+ * How much an image's pixels are stretched on screen, by its `object-fit`:
+ * `fill` and `cover` stretch to the larger ratio, `contain` to the smaller,
+ * `none` not at all, `scale-down` at most to its own size.
+ *
+ * @param image - Page-side image
+ * @param pixelRatio - Device pixel ratio
+ * @returns Screen pixels per image pixel
+ */
+function drawnScale(image, pixelRatio) {
+    const across = (image.rendered.w * pixelRatio) / image.natural.w;
+    const down = (image.rendered.h * pixelRatio) / image.natural.h;
+    if (image.objectFit === 'none')
+        return pixelRatio;
+    if (image.objectFit === 'contain')
+        return Math.min(across, down);
+    if (image.objectFit === 'scale-down')
+        return Math.min(pixelRatio, Math.min(across, down));
+    return Math.max(across, down);
+}
+/**
+ * Findings with identical ones merged into the first, with a `count`.
+ *
+ * @param findings - Findings in page order
+ * @returns Findings, each distinct one once
+ */
+function grouped(findings) {
+    const byKey = new Map();
+    for (const finding of findings) {
+        const key = JSON.stringify(finding);
+        const seen = byKey.get(key);
+        if (seen)
+            seen.count = (seen.count ?? 1) + 1;
+        else
+            byKey.set(key, { ...finding });
+    }
+    return [...byKey.values()];
+}
+/**
+ * An image drawn with fewer pixels than the screen needs (upscaled, blurry:
+ * rendered size × pixel ratio over its own pixels) or with another aspect
+ * ratio (distorted, unless `object-fit` keeps the ratio).
+ *
+ * @param image - Page-side image
+ * @param pixelRatio - Device pixel ratio
+ * @returns Finding, or undefined when it is sharp and keeps its ratio
+ */
+export function imageFinding(image, pixelRatio = 1) {
+    const scale = drawnScale(image, pixelRatio);
+    const naturalRatio = image.natural.w / image.natural.h;
+    const renderedRatio = image.rendered.w / image.rendered.h;
+    const distorted = image.objectFit === 'fill' &&
+        Math.abs(renderedRatio - naturalRatio) / naturalRatio > IMAGE_TOLERANCE;
+    const upscaled = scale > 1 + IMAGE_TOLERANCE;
+    if (!distorted && !upscaled)
+        return undefined;
+    return {
+        element: image.label,
+        natural: image.natural,
+        rendered: { w: round1(image.rendered.w), h: round1(image.rendered.h) },
+        scale: Math.round(scale * 100) / 100,
+        ...(upscaled && { upscaled: true }),
+        ...(distorted && { distorted: true }),
+    };
+}
+//# sourceMappingURL=auditModel.js.map

package/dist/runtime/dom/auditScripts.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Page-side part of `bdg dom audit`: one walk over the rendered elements of
+ * the page (open shadow roots and the light DOM slotted into them, at most
+ * {@link AUDIT_ELEMENT_CAP}; nothing inside a fixed element counts as making
+ * the page wider; SVG images and placeholders of 2px or less are skipped)
+ * that collects what each check needs. Colors and contrast are computed in
+ * the daemon ({@link buildAudit}), the same way `dom inspect` computes them.
+ */
+import { type RawBackground } from './inspectScripts.js';
+/** Elements the walk looks at, at most */
+export declare const AUDIT_ELEMENT_CAP = 20000;
+/** A text holder: an element that draws text of its own */
+export interface RawAuditText {
+    label: string;
+    text: string;
+    color: string;
+    fontSize: string;
+    fontWeight: string;
+    /** Backgrounds from the element up to the root, each with its own opacity */
+    backgrounds: RawBackground[];
+    opacity: number;
+    /**
+     * Why its contrast is approximate: blend modes and filters on it or an
+     * ancestor, an element painted behind or on top of it (in view), or that
+     * only its ancestors were checked (out of view, none of them paints)
+     */
+    risks: string[];
+    /** Inside the viewport */
+    inView: boolean;
+}
+/** An element that reaches past the right edge of the page's viewport */
+export interface RawWideElement {
+    label: string;
+    right: number;
+    width: number;
+}
+/** Text cut off by its box */
+export interface RawTruncated {
+    label: string;
+    text: string;
+    /** `ellipsis`, `clamp` or `clip` */
+    kind: string;
+}
+/** An image drawn at another size than its own */
+export interface RawImage {
+    label: string;
+    natural: {
+        w: number;
+        h: number;
+    };
+    rendered: {
+        w: number;
+        h: number;
+    };
+    objectFit: string;
+}
+/** A fixed or sticky element */
+export interface RawLayer {
+    label: string;
+    position: string;
+    zIndex: string;
+    rect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    inView: boolean;
+}
+/** A running animation or transition */
+export interface RawAnimation {
+    label: string;
+    /** Animation name, transitioned property, or `animation` for a Web Animation */
+    name: string;
+    type: string;
+    duration: number | string;
+    iterations: number | string;
+    scrollDriven: boolean;
+}
+/** What {@link AUDIT_PAGE_JS} returns */
+export interface RawAudit {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Device pixel ratio: an image needs that many pixels per CSS px to look sharp */
+    pixelRatio: number;
+    pageWidth: number;
+    canvasDark: boolean;
+    /** Elements walked, and whether the walk stopped at the cap */
+    walked: number;
+    capped: boolean;
+    texts?: RawAuditText[];
+    wide?: RawWideElement[];
+    truncated?: RawTruncated[];
+    images?: RawImage[];
+    /** Elements whose content scrolls sideways inside them (carousels, tab strips) */
+    scrollers?: Array<{
+        label: string;
+        scrollWidth: number;
+        width: number;
+    }>;
+    layers?: RawLayer[];
+    animations?: RawAnimation[];
+    /** Visible `<canvas>` elements (their animations are drawn by scripts, not CSS or Web Animations) */
+    canvases?: number;
+}
+/**
+ * Page-side audit walk. Arguments: the checks to collect for
+ * (`contrast`, `overflow`, `layers`, `animations`).
+ */
+export declare const AUDIT_PAGE_JS: string;
+//# sourceMappingURL=auditScripts.d.ts.map