browser-debugger-cli 0.10.0 → 0.12.0

package/dist/runtime/dom/audit.js

@@ -0,0 +1,36 @@
+/**
+ * `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 { 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 cdp.send('Runtime.evaluate', {
+        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,215 @@
+/**
+ * `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),
+        }),
+    };
+}
+/**
+ * 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 failing = checked
+        .filter((item) => item !== undefined)
+        .filter((item) => item.ratio < requiredRatio(item, options.level))
+        .sort((a, b) => a.ratio - b.ratio);
+    return {
+        level: options.level,
+        checked: checked.length,
+        failing: failing.length,
+        items: failing.slice(0, options.limit),
+    };
+}
+/**
+ * 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.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,107 @@
+/**
+ * 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;
+    /** Blend modes and filters on it or an ancestor */
+    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[];
+}
+/**
+ * Page-side audit walk. Arguments: the checks to collect for
+ * (`contrast`, `overflow`, `layers`, `animations`).
+ */
+export declare const AUDIT_PAGE_JS = "function (checks) {\n  const want = (name) => checks.includes(name);\n  const doc = document;\n  const view = window;\n  const style = (n) => view.getComputedStyle(n);\n  const scroller = doc.scrollingElement || doc.documentElement;\n  const viewport = { width: doc.documentElement.clientWidth, height: view.innerHeight };\n  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const parentOf = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const short = (text) => text.replace(/\\s+/g, ' ').trim().slice(0, 60);\n  const ownText = (n) => Array.from(n.childNodes).filter((c) => c.nodeType === 3).map((c) => c.data).join(' ').replace(/\\s+/g, ' ').trim();\n  const inView = (r) => r.bottom > 0 && r.right > 0 && r.top < viewport.height && r.left < viewport.width;\n  const meta = doc.querySelector('meta[name=\"color-scheme\"]');\n  const rootScheme = style(doc.documentElement).colorScheme;\n  const scheme = rootScheme && rootScheme !== 'normal' ? rootScheme : (meta && meta.content) || '';\n  const canvasDark = /dark/.test(scheme) && (!/light/.test(scheme) || view.matchMedia('(prefers-color-scheme: dark)').matches);\n  const result = { viewport: viewport, pixelRatio: view.devicePixelRatio || 1, pageWidth: scroller.scrollWidth, canvasDark: canvasDark, walked: 0, capped: false };\n  const texts = [], wide = [], truncated = [], images = [], layers = [], scrollers = [];\n  const chainOf = (n) => {\n    const backgrounds = [];\n    const risks = [];\n    let opacity = 1;\n    for (let p = n; p && backgrounds.length < 60; p = parentOf(p)) {\n      const s = style(p);\n      const own = Number(s.opacity) || 0;\n      const background = { color: s.backgroundColor, image: s.backgroundImage !== 'none' };\n      backgrounds.push(own < 1 ? Object.assign(background, { opacity: own }) : background);\n      opacity *= own;\n      if (s.mixBlendMode !== 'normal') risks.push('mix-blend-mode ' + s.mixBlendMode + ' on ' + label(p));\n      if (s.filter !== 'none') risks.push('filter on ' + label(p));\n    }\n    return { backgrounds: backgrounds, risks: risks, opacity: opacity };\n  };\n  const visit = (n, fixed) => {\n    if (result.walked >= 20000) { result.capped = true; return; }\n    if (/^(script|style|template|noscript|head|meta|link|title)$/.test(n.localName)) return;\n    const s = style(n);\n    if (s.display === 'none') return;\n    result.walked++;\n    const inFixed = fixed || s.position === 'fixed';\n    const kids = n.shadowRoot ? [...Array.from(n.shadowRoot.children), ...Array.from(n.children)] : Array.from(n.children);\n    const slot = n.localName === 'slot';\n    const box = slot && parentOf(n) ? parentOf(n) : n;\n    const r = box.getBoundingClientRect();\n    const shown = r.width > 0 && r.height > 0 && s.visibility === 'visible';\n    const gradientText = s.backgroundClip === 'text' && /rgba\\(0, 0, 0, 0\\)|transparent/.test(s.webkitTextFillColor);\n    if (shown && want('contrast') && !gradientText) {\n      const text = slot ? short(n.assignedNodes({ flatten: true }).filter((c) => c.nodeType === 3).map((c) => c.data).join(' ')) : n.shadowRoot ? '' : ownText(n);\n      if (text && Number(s.opacity) > 0 && r.width > 2 && r.height > 2) {\n        const chain = chainOf(n);\n        if (chain.opacity > 0) texts.push(Object.assign({ label: label(n), text: short(text), color: s.color, fontSize: s.fontSize, fontWeight: s.fontWeight, inView: inView(r) }, chain));\n      }\n    }\n    if (shown && want('overflow')) {\n      if (r.right > viewport.width + 1 && !inFixed) wide.push({ label: label(n), right: r.right + view.scrollX, width: r.width });\n      const cut = s.overflowX !== 'visible' && n.scrollWidth > n.clientWidth + 1 ? (s.textOverflow === 'ellipsis' ? 'ellipsis' : 'clip')\n        : s.webkitLineClamp !== 'none' && n.scrollHeight > n.clientHeight + 1 ? 'clamp' : null;\n      const textContent = cut && short(n.innerText || '');\n      const visuallyHidden = r.width <= 2 || r.height <= 2;\n      if (cut && textContent && !visuallyHidden) truncated.push({ label: label(n), text: textContent, kind: cut });\n      const vector = /\\.svg([?#]|$)|^data:image\\/svg/i.test(n.currentSrc || '');\n      if (n.localName === 'img' && n.naturalWidth > 2 && n.naturalHeight > 2 && n.complete && !vector) images.push({ label: label(n), natural: { w: n.naturalWidth, h: n.naturalHeight }, rendered: { w: r.width, h: r.height }, objectFit: s.objectFit });\n    }\n    if (shown && want('overflow') && /^(auto|scroll)$/.test(s.overflowX) && n !== doc.documentElement && n !== doc.body && n.scrollWidth > n.clientWidth + 1) {\n      scrollers.push({ label: label(n), scrollWidth: n.scrollWidth, width: n.clientWidth });\n    }\n    if (want('layers') && shown && (s.position === 'fixed' || s.position === 'sticky')) {\n      layers.push({ label: label(n), position: s.position, zIndex: s.zIndex, rect: { x: r.left, y: r.top, w: r.width, h: r.height }, inView: inView(r) });\n    }\n    if (s.overflowX !== 'visible' && s.overflowX !== 'clip' && n !== doc.documentElement && n !== doc.body) {\n      const wideBefore = wide.length;\n      for (const c of kids) visit(c, inFixed);\n      wide.length = wideBefore;\n      return;\n    }\n    for (const c of kids) visit(c, inFixed);\n  };\n  visit(doc.documentElement, false);\n  if (want('contrast')) result.texts = texts;\n  if (want('overflow')) Object.assign(result, { wide: wide, truncated: truncated, images: images, scrollers: scrollers });\n  if (want('layers')) result.layers = layers;\n  if (want('animations')) {\n    result.animations = doc.getAnimations().filter((a) => a.playState === 'running').slice(0, 200).map((a) => {\n      const timing = a.effect && a.effect.getTiming ? a.effect.getTiming() : {};\n      const target = a.effect && a.effect.target;\n      return {\n        label: target && target.localName ? label(target) : '(none)',\n        name: a.animationName || a.transitionProperty || a.id || 'animation',\n        type: a.constructor.name,\n        duration: typeof timing.duration === 'number' ? timing.duration : String(timing.duration),\n        iterations: timing.iterations === Infinity ? 'infinite' : timing.iterations,\n        scrollDriven: Boolean(a.timeline) && a.timeline !== doc.timeline\n      };\n    });\n  }\n  return result;\n}";
+//# sourceMappingURL=auditScripts.d.ts.map

package/dist/runtime/dom/auditScripts.js

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ */
+/** Elements the walk looks at, at most */
+export const AUDIT_ELEMENT_CAP = 20000;
+/**
+ * Page-side audit walk. Arguments: the checks to collect for
+ * (`contrast`, `overflow`, `layers`, `animations`).
+ */
+export const AUDIT_PAGE_JS = `function (checks) {
+  const want = (name) => checks.includes(name);
+  const doc = document;
+  const view = window;
+  const style = (n) => view.getComputedStyle(n);
+  const scroller = doc.scrollingElement || doc.documentElement;
+  const viewport = { width: doc.documentElement.clientWidth, height: view.innerHeight };
+  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');
+  const parentOf = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;
+  const short = (text) => text.replace(/\\s+/g, ' ').trim().slice(0, 60);
+  const ownText = (n) => Array.from(n.childNodes).filter((c) => c.nodeType === 3).map((c) => c.data).join(' ').replace(/\\s+/g, ' ').trim();
+  const inView = (r) => r.bottom > 0 && r.right > 0 && r.top < viewport.height && r.left < viewport.width;
+  const meta = doc.querySelector('meta[name="color-scheme"]');
+  const rootScheme = style(doc.documentElement).colorScheme;
+  const scheme = rootScheme && rootScheme !== 'normal' ? rootScheme : (meta && meta.content) || '';
+  const canvasDark = /dark/.test(scheme) && (!/light/.test(scheme) || view.matchMedia('(prefers-color-scheme: dark)').matches);
+  const result = { viewport: viewport, pixelRatio: view.devicePixelRatio || 1, pageWidth: scroller.scrollWidth, canvasDark: canvasDark, walked: 0, capped: false };
+  const texts = [], wide = [], truncated = [], images = [], layers = [], scrollers = [];
+  const chainOf = (n) => {
+    const backgrounds = [];
+    const risks = [];
+    let opacity = 1;
+    for (let p = n; p && backgrounds.length < 60; p = parentOf(p)) {
+      const s = style(p);
+      const own = Number(s.opacity) || 0;
+      const background = { color: s.backgroundColor, image: s.backgroundImage !== 'none' };
+      backgrounds.push(own < 1 ? Object.assign(background, { opacity: own }) : background);
+      opacity *= own;
+      if (s.mixBlendMode !== 'normal') risks.push('mix-blend-mode ' + s.mixBlendMode + ' on ' + label(p));
+      if (s.filter !== 'none') risks.push('filter on ' + label(p));
+    }
+    return { backgrounds: backgrounds, risks: risks, opacity: opacity };
+  };
+  const visit = (n, fixed) => {
+    if (result.walked >= ${AUDIT_ELEMENT_CAP}) { result.capped = true; return; }
+    if (/^(script|style|template|noscript|head|meta|link|title)$/.test(n.localName)) return;
+    const s = style(n);
+    if (s.display === 'none') return;
+    result.walked++;
+    const inFixed = fixed || s.position === 'fixed';
+    const kids = n.shadowRoot ? [...Array.from(n.shadowRoot.children), ...Array.from(n.children)] : Array.from(n.children);
+    const slot = n.localName === 'slot';
+    const box = slot && parentOf(n) ? parentOf(n) : n;
+    const r = box.getBoundingClientRect();
+    const shown = r.width > 0 && r.height > 0 && s.visibility === 'visible';
+    const gradientText = s.backgroundClip === 'text' && /rgba\\(0, 0, 0, 0\\)|transparent/.test(s.webkitTextFillColor);
+    if (shown && want('contrast') && !gradientText) {
+      const text = slot ? short(n.assignedNodes({ flatten: true }).filter((c) => c.nodeType === 3).map((c) => c.data).join(' ')) : n.shadowRoot ? '' : ownText(n);
+      if (text && Number(s.opacity) > 0 && r.width > 2 && r.height > 2) {
+        const chain = chainOf(n);
+        if (chain.opacity > 0) texts.push(Object.assign({ label: label(n), text: short(text), color: s.color, fontSize: s.fontSize, fontWeight: s.fontWeight, inView: inView(r) }, chain));
+      }
+    }
+    if (shown && want('overflow')) {
+      if (r.right > viewport.width + 1 && !inFixed) wide.push({ label: label(n), right: r.right + view.scrollX, width: r.width });
+      const cut = s.overflowX !== 'visible' && n.scrollWidth > n.clientWidth + 1 ? (s.textOverflow === 'ellipsis' ? 'ellipsis' : 'clip')
+        : s.webkitLineClamp !== 'none' && n.scrollHeight > n.clientHeight + 1 ? 'clamp' : null;
+      const textContent = cut && short(n.innerText || '');
+      const visuallyHidden = r.width <= 2 || r.height <= 2;
+      if (cut && textContent && !visuallyHidden) truncated.push({ label: label(n), text: textContent, kind: cut });
+      const vector = /\\.svg([?#]|$)|^data:image\\/svg/i.test(n.currentSrc || '');
+      if (n.localName === 'img' && n.naturalWidth > 2 && n.naturalHeight > 2 && n.complete && !vector) images.push({ label: label(n), natural: { w: n.naturalWidth, h: n.naturalHeight }, rendered: { w: r.width, h: r.height }, objectFit: s.objectFit });
+    }
+    if (shown && want('overflow') && /^(auto|scroll)$/.test(s.overflowX) && n !== doc.documentElement && n !== doc.body && n.scrollWidth > n.clientWidth + 1) {
+      scrollers.push({ label: label(n), scrollWidth: n.scrollWidth, width: n.clientWidth });
+    }
+    if (want('layers') && shown && (s.position === 'fixed' || s.position === 'sticky')) {
+      layers.push({ label: label(n), position: s.position, zIndex: s.zIndex, rect: { x: r.left, y: r.top, w: r.width, h: r.height }, inView: inView(r) });
+    }
+    if (s.overflowX !== 'visible' && s.overflowX !== 'clip' && n !== doc.documentElement && n !== doc.body) {
+      const wideBefore = wide.length;
+      for (const c of kids) visit(c, inFixed);
+      wide.length = wideBefore;
+      return;
+    }
+    for (const c of kids) visit(c, inFixed);
+  };
+  visit(doc.documentElement, false);
+  if (want('contrast')) result.texts = texts;
+  if (want('overflow')) Object.assign(result, { wide: wide, truncated: truncated, images: images, scrollers: scrollers });
+  if (want('layers')) result.layers = layers;
+  if (want('animations')) {
+    result.animations = doc.getAnimations().filter((a) => a.playState === 'running').slice(0, 200).map((a) => {
+      const timing = a.effect && a.effect.getTiming ? a.effect.getTiming() : {};
+      const target = a.effect && a.effect.target;
+      return {
+        label: target && target.localName ? label(target) : '(none)',
+        name: a.animationName || a.transitionProperty || a.id || 'animation',
+        type: a.constructor.name,
+        duration: typeof timing.duration === 'number' ? timing.duration : String(timing.duration),
+        iterations: timing.iterations === Infinity ? 'infinite' : timing.iterations,
+        scrollDriven: Boolean(a.timeline) && a.timeline !== doc.timeline
+      };
+    });
+  }
+  return result;
+}`;
+//# sourceMappingURL=auditScripts.js.map

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

@@ -14,6 +14,12 @@ import type { ViewportPosition } from '../../types.js';
 export interface ElementGeometry {
     /** Border box in top-level viewport coordinates */
     rect: LayoutBox;
+    /**
+     * For a zero-size element whose children show (an inline list around
+     * floated items): the box around those children, which is what can be
+     * seen of it
+     */
+    content?: LayoutBox | null;
     /** Area its iframes and overflow-clipping ancestors leave visible, in the same coordinates */
     clip: LayoutBox | null;
     /** Whether overlay scrollbars of the clipping containers show along the clip's right and bottom edges */
@@ -161,10 +167,10 @@ export declare function scrollTarget(start: number, size: number, viewSize: numb
  * out of a list), and `hidden` when it is not rendered at all. Being inert
  * does not change the position: inert elements are shown.
  *
- * @param geometry - Page-side measurements
+ * @param measured - Page-side measurements (a zero-size holder is placed by its children)
  * @param viewport - Top-level viewport size
  * @returns Position, with the visible share, hidden reason, clipping
  *   ancestor or page scroll when relevant
  */
-export declare function classifyViewportPosition(geometry: ElementGeometry, viewport: LayoutSize): ViewportPlacement;
+export declare function classifyViewportPosition(measured: ElementGeometry, viewport: LayoutSize): ViewportPlacement;
 //# sourceMappingURL=elementGeometry.d.ts.map

package/dist/runtime/dom/elementGeometry.js

@@ -311,7 +311,20 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
     }
     return 'not rendered';
   };
-  const hiddenReason = (style, box) => {
+  const shownChildren = (node) => {
+    const s = styleOf(node);
+    if (s.overflowX !== 'visible' || s.overflowY !== 'visible') return null;
+    let union = null;
+    for (const c of Array.from(node.children).slice(0, 50)) {
+      const r = c.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0 || styleOf(c).visibility !== 'visible') continue;
+      union = union
+        ? { left: Math.min(union.left, r.left), top: Math.min(union.top, r.top), right: Math.max(union.right, r.right), bottom: Math.max(union.bottom, r.bottom) }
+        : { left: r.left, top: r.top, right: r.right, bottom: r.bottom };
+    }
+    return union;
+  };
+  const hiddenReason = (style, box, content) => {
     if (style.display === 'none') return 'display: none';
     if (style.display === 'contents') return 'display: contents (no box of its own)';
     if (el.getClientRects().length === 0) {
@@ -320,7 +333,7 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
     const skipped = skippedReason(el);
     if (skipped) return skipped;
     if (style.visibility !== 'visible') return 'visibility: ' + style.visibility;
-    if (box.width === 0 || box.height === 0) return 'zero size';
+    if ((box.width === 0 || box.height === 0) && !content) return 'zero size';
     return null;
   };
   const isSticky = () => {
@@ -343,7 +356,8 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
   let clipper = own.clipper;
   let fixed = own.fixed;
   let fixedBy = own.fixedBy;
-  let hidden = hiddenReason(styleOf(el), box) || own.collapsed;
+  let content = box.width === 0 || box.height === 0 ? shownChildren(el) : null;
+  let hidden = hiddenReason(styleOf(el), box, content) || own.collapsed;
   let x = 0;
   let y = 0;
   for (let view = el.ownerDocument.defaultView; view && view.frameElement; view = view.parent) {
@@ -355,6 +369,7 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
     overlay = { right: !!unframed && unframed.right <= clip.right && overlay.right, bottom: !!unframed && unframed.bottom <= clip.bottom && overlay.bottom };
     const offset = frameOffset(frame);
     rect = shift(rect, offset.x, offset.y);
+    content = shift(content, offset.x, offset.y);
     const outer = ancestorClip(frame, rect, describe);
     const inner = shift(clip, offset.x, offset.y);
     clip = intersect(inner, outer.clip);
@@ -373,7 +388,7 @@ export const ELEMENT_GEOMETRY_JS = `(el) => {
   const invisible = hidden ? null : invisibleReason(el, describe);
   const lock = scrollLock(top, describe);
   if (lock && fixedBy === top.document.body) fixed = false;
-  return { rect: toBox(rect), clip: toBox(clip), clipOverlay: overlay, clipper: clipper, hidden: hidden, invisible: invisible, inert: isInert(), fixed: fixed, sticky: !fixed && isSticky(), pageScroll: scrollRange(top), scrollLock: lock, offset: { x: x, y: y } };
+  return { rect: toBox(rect), content: toBox(content), clip: toBox(clip), clipOverlay: overlay, clipper: clipper, hidden: hidden, invisible: invisible, inert: isInert(), fixed: fixed, sticky: !fixed && isSticky(), pageScroll: scrollRange(top), scrollLock: lock, offset: { x: x, y: y } };
 }`;
 /**
  * Edges of a box.
@@ -481,14 +496,15 @@ function axisScroll(start, size, viewSize, range, aim) {
  * out of a list), and `hidden` when it is not rendered at all. Being inert
  * does not change the position: inert elements are shown.
  *
- * @param geometry - Page-side measurements
+ * @param measured - Page-side measurements (a zero-size holder is placed by its children)
  * @param viewport - Top-level viewport size
  * @returns Position, with the visible share, hidden reason, clipping
  *   ancestor or page scroll when relevant
  */
-export function classifyViewportPosition(geometry, viewport) {
-    if (geometry.hidden)
-        return { inViewport: 'hidden', hiddenReason: geometry.hidden };
+export function classifyViewportPosition(measured, viewport) {
+    if (measured.hidden)
+        return { inViewport: 'hidden', hiddenReason: measured.hidden };
+    const geometry = measured.content ? { ...measured, rect: measured.content } : measured;
     const rect = edgesOf(geometry.rect);
     const screen = edgesOf({ x: 0, y: 0, ...viewport });
     const view = geometry.clip ? overlap(screen, edgesOf(geometry.clip)) : screen;

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

@@ -87,10 +87,11 @@ export declare const SIBLING_POSITION_JS = "(el) => {\n  const describe = (node)
 export declare const ELEMENT_IDENTITY_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const siblingPosition = (el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const parent = el.parentElement;\n  if (!parent) return '';\n  const own = describe(el);\n  const same = Array.from(parent.children).filter((child) => describe(child) === own);\n  if (same.length < 2) return '';\n  const n = same.indexOf(el) + 1;\n  const teen = n % 100 >= 11 && n % 100 <= 13;\n  const suffix = teen ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' })[n % 10] || 'th';\n  return '(' + n + suffix + ' of ' + same.length + ')';\n};\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const clean = (text) => (text || '').replace(/\\s+/g, ' ').trim();\n  const cut = (text) => {\n    const characters = Array.from(text);\n    return characters.length > 40 ? characters.slice(0, 40).join('') + '\u2026' : text;\n  };\n  const isControl = (node) => /^(input|select|textarea)$/.test(node.localName) || node.isContentEditable;\n  const shownText = (node) =>\n    isControl(node) ? '' : clean(withoutDecorations(node, typeof node.innerText === 'string' ? node.innerText : node.textContent));\n  const buttonValue = (node) => (node.localName === 'input' && /^(submit|button|reset)$/i.test(node.type) ? clean(node.value) : '');\n  const attributeText = (node) =>\n    clean(node.getAttribute('aria-label')) || clean(node.getAttribute('placeholder')) || clean(node.getAttribute('title'));\n  const selectName = (node) =>\n    clean(node.labels && node.labels[0] && node.labels[0].innerText) ||\n    clean(node.getAttribute('aria-label')) ||\n    clean(node.getAttribute('name')) ||\n    clean(node.selectedOptions && node.selectedOptions[0] && node.selectedOptions[0].label);\n  const shown = (node, options) => !node.checkVisibility || node.checkVisibility(options);\n  const textOutsideSelects = (node) => {\n    if (!node.querySelector('select')) return shownText(node);\n    const hiddenLeftOut = shown(node);\n    const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT);\n    let text = '';\n    for (let visited = 0; visited < 500 && text.length < 200 && walker.nextNode(); visited++) {\n      const parent = walker.currentNode.parentElement;\n      if (!parent || parent.closest('select, textarea')) continue;\n      if (!hiddenLeftOut || shown(parent, { visibilityProperty: true })) text += ' ' + walker.currentNode.data;\n    }\n    return clean(text);\n  };\n  const quoted = (text) => (text ? ' \"' + cut(text) + '\"' : '');\n  const visible = shownText(el) || buttonValue(el) || (el.localName === 'select' ? selectName(el) : '');\n  if (visible) return describe(el) + quoted(visible);\n  const attribute = attributeText(el);\n  const position = siblingPosition(el);\n  if (position) return describe(el) + ' ' + position + quoted(attribute);\n  let ancestor = el.id || el.isContentEditable ? null : el.parentElement;\n  for (let depth = 0; ancestor && depth < 3; depth++, ancestor = ancestor.parentElement) {\n    if (isControl(ancestor)) break;\n    const text = textOutsideSelects(ancestor);\n    if (text) return describe(el) + ' in ' + describe(ancestor) + quoted(text);\n  }\n  return describe(el) + quoted(attribute);\n}";
 /**
  * Page-side location of an element: the iframes it is in (outermost first)
- * and the shadow root holding it, e.g. `iframe#pay > shadow root of <x-card>`;
+ * and the shadow root holding it, with the host's first class and light-DOM
+ * text, e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
  * empty for the main document.
  */
-export declare const ELEMENT_CONTEXT_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');\n  const parts = [];\n  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {\n    const frame = doc.defaultView.frameElement;\n    parts.unshift(describe(frame));\n    doc = frame.ownerDocument;\n  }\n  const root = el.getRootNode();\n  if (root.host) parts.push('shadow root of <' + describe(root.host) + '>');\n  return parts.join(' > ');\n}";
+export declare const ELEMENT_CONTEXT_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');\n  const parts = [];\n  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {\n    const frame = doc.defaultView.frameElement;\n    parts.unshift(describe(frame));\n    doc = frame.ownerDocument;\n  }\n  const root = el.getRootNode();\n  if (root.host) {\n    const host = root.host;\n    const label = describe(host) + (!host.id && host.classList.length ? '.' + host.classList[0] : '');\n    const text = (host.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 30);\n    parts.push('shadow root of <' + label + (text ? ' \"' + text + '\"' : '') + '>');\n  }\n  return parts.join(' > ');\n}";
 /**
  * Short text preview of an element's text: whitespace collapsed, cut on a
  * whole character (an emoji is never split, which would make JSON invalid).