@reticlehq/browser 3.5.0 → 3.7.0

package/dist/actions/actions.js

@@ -1,15 +1,16 @@
-import { ActionType, ActionWarning, DANGEROUS_ACTION_CONFIRM_ARG, ElementState, NATIVE_INPUT_ARG, SettleReason, } from '@reticlehq/core';
+import { ActionType, ActionWarning, clampHoldMs, DANGEROUS_ACTION_CONFIRM_ARG, ElementState, NATIVE_INPUT_ARG, SettleReason, } from '@reticlehq/core';
 import { asSyntheticInput } from './synthetic/synthetic-input.js';
 import { echoRef, refs } from '../dom/addressing/refs.js';
-import { dangerousActionContext, requiresDangerousConfirmation, submitControlFor, } from './danger-context.js';
-import { assertEditable, assertNotRichText, setNativeValue } from './value-input.js';
-import { getAccessibleName, getRole, isVisible, getStates } from '../dom/a11y.js';
-import { elementHasHoverHandlers, identifyComponent } from '../registry/stores/adapters.js';
+import { dangerousActionContext, requiresDangerousConfirmation, assertOutwardAllowed, submitControlFor, } from './danger-context.js';
+import { assertEditable, assertNotRichText, isAutofillSafeTarget, setNativeValue, } from './value-input.js';
+import { getRole, isVisible, getStates } from '../dom/a11y.js';
+import { elementHasHoverHandlers } from '../registry/stores/adapters.js';
 import { isActionTarget, isForm, isInput, isSelect, isTextArea, } from '../dom/realm.js';
 import { nativeSetTimeout, settle } from '../timers/native/native-timers.js';
 import { AppearedText } from './appeared-text.js';
 import { alreadyAtCheckedState, assertAriaToggleLanded, isAriaToggle } from './check-state.js';
-import { focusedOrDocument, isReflessDocumentPress, pressCode, pressKey, pressModifiers, pressKeys, holdKey, pressCombo, } from './actions-press.js';
+import { focusedOrDocument, isReflessDocumentPress, pressCode, pressKey, pressModifiers, pressKeys, holdKey, pressCombo, dispatchKeypress, closeModalOnEscape, keyboardEvent, } from './actions-press.js';
+import { anchorOf, result } from './action-report.js';
 function asString(value, fallback = '') {
     return 'string' === typeof value ? value : fallback;
 }
@@ -21,49 +22,6 @@ function requireElement(ref) {
         throw new Error(`ref '${echoRef(ref)}' is not an HTML or SVG element`);
     return el;
 }
-function anchorOf(el) {
-    const testid = el.getAttribute('data-testid') ?? undefined;
-    const info = identifyComponent(el);
-    const out = {};
-    if (testid !== undefined)
-        out.testid = testid;
-    const component = info?.componentStack[0];
-    if (component !== undefined)
-        out.component = component;
-    if (info?.source !== undefined)
-        out.source = info.source;
-    const role = getRole(el);
-    const name = getAccessibleName(el);
-    if (role.length > 0)
-        out.role = role;
-    if (name.length > 0)
-        out.name = name;
-    return out;
-}
-const result = (ref, action, effect, settled, settleReason, anchor, warning) => {
-    const base = {
-        ok: true,
-        ref,
-        action,
-        dispatched: true,
-        settled,
-        settleReason,
-        effect,
-    };
-    if (anchor.testid !== undefined)
-        base.testid = anchor.testid;
-    if (anchor.component !== undefined)
-        base.component = anchor.component;
-    if (anchor.source !== undefined)
-        base.source = anchor.source;
-    if (anchor.role !== undefined)
-        base.role = anchor.role;
-    if (anchor.name !== undefined)
-        base.name = anchor.name;
-    if (warning !== undefined)
-        base.warning = warning;
-    return base;
-};
 const FILL_LIKE = new Set([
     ActionType.FILL,
     ActionType.TYPE,
@@ -109,6 +67,8 @@ function assertActionAllowed(el, action, args) {
         (action === ActionType.PRESS && 'Enter' === pressKey(args));
     const dragTarget = action === ActionType.DRAG ? refs.resolve(dragTargetRef(args)) : null;
     const submitter = action === ActionType.PRESS && 'Enter' === pressKey(args) ? submitControlFor(el) : null;
+    if (canTrigger)
+        assertOutwardAllowed([el, submitter, isActionTarget(dragTarget) ? dragTarget : null]);
     const sourceDangerous = requiresDangerousConfirmation(dangerousActionContext(el), getRole(el)) ||
         (submitter !== null &&
             requiresDangerousConfirmation(dangerousActionContext(submitter), getRole(submitter)));
@@ -120,7 +80,13 @@ function assertActionAllowed(el, action, args) {
         throw new Error(`potentially destructive action blocked; retry with args.${DANGEROUS_ACTION_CONFIRM_ARG}=true`);
     }
 }
-import { NO_GEOMETRY, fireClickSequence, fireTapSequence, clickGeometry, firePointer, firePointerNonBubbling, dragElement, mouseEventFor, } from './actions-dom.js';
+function optionValueFor(options, named) {
+    if (options.some((option) => option.value === named))
+        return named;
+    const byLabel = options.filter((option) => option.label.trim() === named.trim());
+    return 1 === byLabel.length ? (byLabel[0]?.value ?? named) : named;
+}
+import { NO_GEOMETRY, fireClickSequence, fireTapSequence, clickGeometry, firePointer, firePointerNonBubbling, dragElement, mouseEventFor, assertNotLeaving, } from './actions-dom.js';
 import { scrollFrom } from './scroll.js';
 function enabledOf(el) {
     return !getStates(el).includes(ElementState.DISABLED);
@@ -137,19 +103,13 @@ function activeRef(el) {
         return null;
     return refs.refFor(active);
 }
-const MAX_HOLD_MS = 30_000;
-function clampHold(raw) {
-    if ('number' !== typeof raw || !Number.isFinite(raw) || raw <= 0)
-        return 0;
-    return Math.min(raw, MAX_HOLD_MS);
-}
 async function dispatchFor(el, action, args) {
     if (ActionType.CLICK === action) {
-        const hold = clampHold(args['holdMs']);
+        const hold = clampHoldMs(args['holdMs']);
         return await fireClickSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() });
     }
     if (ActionType.TAP === action) {
-        const hold = clampHold(args['holdMs']);
+        const hold = clampHoldMs(args['holdMs']);
         return await fireTapSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() });
     }
     return { prevented: await dispatchOther(el, action, args), heldMs: 0 };
@@ -175,7 +135,7 @@ async function dispatchOther(el, action, args) {
             el.dispatchEvent(mouseEventFor(el, 'mouseenter', { relatedTarget: from }));
             firePointer(el, 'pointermove', from);
             const moved = el.dispatchEvent(mouseEventFor(el, 'mousemove', { bubbles: true, cancelable: true }));
-            const holdMs = clampHold(args['holdMs']);
+            const holdMs = clampHoldMs(args['holdMs']);
             if (holdMs > 0)
                 await sleep(holdMs);
             return !moved;
@@ -201,7 +161,8 @@ async function dispatchOther(el, action, args) {
                         'To empty a field on purpose use the `clear` action, or fill with an explicit "".');
                 }
                 assertEditable(el, 'fill');
-                el.focus();
+                if (!isAutofillSafeTarget(el))
+                    el.focus();
                 return setNativeValue(el, args['value']);
             }
             assertNotRichText(el, 'fill');
@@ -227,8 +188,8 @@ async function dispatchOther(el, action, args) {
                 if (typeof args['value'] !== 'string') {
                     throw new Error("select requires a string `value` — pass it nested, as args: { value: '…' }.");
                 }
-                const wanted = args['value'];
                 const options = Array.from(el.options);
+                const wanted = optionValueFor(options, args['value']);
                 if (!options.some((option) => option.value === wanted)) {
                     const available = options.map((option) => `${option.value} (${option.label})`).join(', ');
                     throw new Error(`no <option> with value '${echoRef(wanted)}' — available: ${0 === options.length ? '(none)' : available}`);
@@ -274,14 +235,17 @@ async function dispatchOther(el, action, args) {
             const mods = pressModifiers(args);
             const combo = pressKeys(args);
             if (combo.length > 0)
-                return await pressCombo(el, combo, mods, clampHold(args['holdMs']));
+                return await pressCombo(el, combo, mods, clampHoldMs(args['holdMs']));
             const key = pressKey(args);
             const code = pressCode(args, key);
-            const down = asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keydown', { key, code, bubbles: true, cancelable: true, ...mods })));
-            const hold = clampHold(args['holdMs']);
+            const down = asSyntheticInput(() => el.dispatchEvent(keyboardEvent('keydown', { key, code, bubbles: true, cancelable: true, ...mods })));
+            closeModalOnEscape(el, key, down);
+            if (down)
+                dispatchKeypress(el, key, code, mods);
+            const hold = clampHoldMs(args['holdMs']);
             if (hold > 0)
                 await holdKey(el, key, code, mods, hold);
-            asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keyup', { key, code, bubbles: true, ...mods })));
+            asSyntheticInput(() => el.dispatchEvent(keyboardEvent('keyup', { key, code, bubbles: true, ...mods })));
             return !down;
         }
         case ActionType.SCROLL_INTO_VIEW:
@@ -346,6 +310,8 @@ export async function executeAction(ref, action, args = {}) {
     const el = isReflessDocumentPress(ref, action, args) ? focusedOrDocument() : requireElement(ref);
     if (named)
         assertActionAllowed(el, action, args);
+    if (named)
+        assertNotLeaving(el);
     const anchor = named ? anchorOf(el) : {};
     const visible = isVisible(el);
     const enabled = enabledOf(el);
@@ -392,6 +358,7 @@ export async function executeAction(ref, action, args = {}) {
         defaultPrevented,
         focusMoved: prevFocus !== nextFocus ? `${prevFocus ?? 'null'}->${nextFocus ?? 'null'}` : null,
         valueChanged: isFillLike(action) ? valueBefore !== valueAfter : false,
+        ...(ActionType.FILL === action && isAutofillSafeTarget(el) ? { autofillSafe: true } : {}),
         domMutatedWithin: mutated,
         ...said.effect(valueAfter),
         occluded: geometry.occluded,

package/dist/actions/appeared-text.js

@@ -1,4 +1,5 @@
 import { isIgnored } from '../dom/dom-ignore.js';
+import { isSensitiveField } from '../dom/a11y.js';
 const APPEARED_MAX = 200;
 const JOIN = ' | ';
 const TEXT_NODE = 3;
@@ -46,6 +47,8 @@ export class AppearedText {
     #add(raw, owner) {
         if (null !== owner && isIgnored(owner))
             return;
+        if (null !== owner && isSensitiveField(owner))
+            return;
         const text = (raw ?? '').replace(/\s+/g, ' ').trim();
         if (0 === text.length)
             return;

package/dist/actions/danger-context.d.ts

@@ -2,3 +2,5 @@ import { type ActionTarget } from '../dom/realm.js';
 export declare function dangerousActionContext(el: ActionTarget): string;
 export declare function submitControlFor(el: ActionTarget): HTMLElement | null;
 export declare function requiresDangerousConfirmation(text: string, role?: string): boolean;
+export declare function setOutwardPolicy(allowed: readonly string[] | undefined): void;
+export declare function assertOutwardAllowed(targets: readonly (ActionTarget | null)[]): void;

package/dist/actions/danger-context.js

@@ -1,5 +1,5 @@
-import { isDangerousActionText } from '@reticlehq/core';
-import { getAccessibleName } from '../dom/a11y.js';
+import { isDangerousActionText, outwardActionOf, outwardRefusal } from '@reticlehq/core';
+import { getAccessibleName, getRole } from '../dom/a11y.js';
 import { isHtmlElement } from '../dom/realm.js';
 const LABEL_VALUED_INPUT_TYPES = new Set([
     'submit',
@@ -16,7 +16,18 @@ function holdsUserText(el) {
         return !LABEL_VALUED_INPUT_TYPES.has(el.type.toLowerCase());
     return false;
 }
+const ANCHOR_TAG = 'A';
+const INERT_HREF = /^\s*(#.*|javascript:.*)?$/i;
+function navigatingHref(el) {
+    if (ANCHOR_TAG !== el.tagName)
+        return undefined;
+    const href = el.getAttribute('href');
+    return null === href || INERT_HREF.test(href) ? undefined : href;
+}
 export function dangerousActionContext(el) {
+    const href = navigatingHref(el);
+    if (href !== undefined)
+        return href;
     const form = el.closest('form');
     const ownText = holdsUserText(el)
         ? ['', '']
@@ -33,8 +44,23 @@ export function dangerousActionContext(el) {
 const SUBMIT_CONTROL_SELECTOR = 'button[type="submit"], input[type="submit"], button:not([type]):not([type=""])';
 export function submitControlFor(el) {
     const found = el.closest('form')?.querySelector(SUBMIT_CONTROL_SELECTOR);
-    return found instanceof HTMLElement ? found : null;
+    return isHtmlElement(found) ? found : null;
 }
 export function requiresDangerousConfirmation(text, role) {
     return isDangerousActionText(text, role);
 }
+let outwardAllowed;
+export function setOutwardPolicy(allowed) {
+    outwardAllowed = allowed;
+}
+export function assertOutwardAllowed(targets) {
+    if (outwardAllowed === undefined)
+        return;
+    for (const el of targets) {
+        if (null === el)
+            continue;
+        const kind = outwardActionOf(dangerousActionContext(el), getRole(el));
+        if (kind !== undefined && !outwardAllowed.includes(kind))
+            throw new Error(outwardRefusal(kind));
+    }
+}

package/dist/actions/value-input.d.ts

@@ -1,4 +1,5 @@
 import { type ActionTarget } from '../dom/realm.js';
+export declare function isAutofillSafeTarget(el: Element, ua?: string): boolean;
 export declare function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string): boolean;
 export declare function assertNotRichText(el: ActionTarget, action: string): void;
 export declare function assertEditable(el: HTMLInputElement | HTMLTextAreaElement, action: string): void;

package/dist/actions/value-input.js

@@ -1,5 +1,16 @@
 import { captureValueSetter } from '../patching/capture-method.js';
 import { isHtmlElement, valuePrototypeOf } from '../dom/realm.js';
+const PASSWORD_AUTOCOMPLETE = /\b(current|new)-password\b/;
+const NOT_WEBKIT = /Chrome|Chromium|Edg\/|Firefox|Gecko\//;
+export function isAutofillSafeTarget(el, ua = navigator.userAgent) {
+    if (!(el instanceof HTMLInputElement))
+        return false;
+    const password = 'password' === el.type.toLowerCase() ||
+        PASSWORD_AUTOCOMPLETE.test(el.getAttribute('autocomplete') ?? '');
+    if (!password || NOT_WEBKIT.test(ua))
+        return false;
+    return 600 <= Number(/AppleWebKit\/(\d+)/.exec(ua)?.[1] ?? 0);
+}
 export function setNativeValue(el, value) {
     const proto = valuePrototypeOf(el);
     const setter = proto === undefined ? undefined : captureValueSetter(proto);

package/dist/commands/commands.js

@@ -122,6 +122,9 @@ function readState(ref, store, path, depth) {
     const names = storeNames();
     if (path !== undefined || depth !== undefined) {
         const rawStores = readStoresRaw(store);
+        if (store !== undefined && !Object.hasOwn(rawStores, store)) {
+            return { store, path, found: false, value: null, storeNames: names };
+        }
         const base = store !== undefined ? rawStores[store] : { stores: rawStores, storeNames: names };
         const selection = path !== undefined ? selectPath(base, path) : { found: true, value: base };
         const selected = selection.found && depth !== undefined ? capDepth(selection.value, depth) : selection.value;
@@ -220,6 +223,7 @@ export function createCommandRegistry() {
     reg.set(ReticleCommand.STORAGE_READ, (args) => readStorage(str(args['area'])));
     reg.set(ReticleCommand.CAPABILITIES, () => getCapabilities());
     reg.set(ReticleCommand.CAPTURE, (args) => captureDesktopWindow(true === args['fullPage']));
+    reg.set(ReticleCommand.RENDER, () => import('../dom/render-page.js').then((m) => m.renderPage()));
     reg.set(ReticleCommand.SCROLL, (args) => {
         const dy = args['dy'];
         const fraction = args['fraction'];

package/dist/connect-options.d.ts

@@ -6,6 +6,7 @@ export interface ReticleConnectOptions {
     token?: string;
     allowNonLocalhost?: boolean;
     allowInProduction?: boolean;
+    testIdAttribute?: string;
     overlay?: boolean;
     captureNetworkBodies?: boolean;
     networkBodyMaxChars?: number;

package/dist/dom/a11y.js

@@ -1,4 +1,5 @@
-import { ElementState, REDACTED_VALUE } from '@reticlehq/core';
+import { readTestId } from './addressing/testid-attr.js';
+import { DEFAULT_TESTID_ATTR, ElementState, REDACTED_VALUE, } from '@reticlehq/core';
 import { isButton, isHtmlElement, isImage, isInput, isMeter, isOutput, isProgress, isSelect, isTextArea, } from './realm.js';
 import { refs } from './addressing/refs.js';
 import { capturedRootOf } from './shadow-registry.js';
@@ -31,9 +32,11 @@ const NAME_FROM_CONTENT = new Set([
     'status',
     'alert',
 ]);
-const INPUT_TEXT_TYPES = new Set(['text', 'email', 'tel', 'url', 'search', 'password', '']);
+const INPUT_TEXT_TYPES = new Set(['text', 'email', 'tel', 'url', 'password', '']);
 function inputRole(input) {
     const type = input.type.toLowerCase();
+    if ('search' === type)
+        return 'searchbox';
     if (INPUT_TEXT_TYPES.has(type))
         return 'textbox';
     if ('checkbox' === type)
@@ -274,6 +277,7 @@ export function getStates(el, visible = isVisible(el)) {
         states.push(ElementState.FOCUSED);
     return states;
 }
+const SENSITIVE_AUTOCOMPLETE = /\b(cc-|current-password|new-password|one-time-code)/i;
 export function isSensitiveField(el) {
     if (!isInput(el) && !isTextArea(el) && !isSelect(el)) {
         return false;
@@ -282,10 +286,11 @@ export function isSensitiveField(el) {
     const identifiers = [
         el.getAttribute('name') ?? '',
         el.id,
-        el.getAttribute('data-testid') ?? '',
+        readTestId(el) ?? '',
+        el.getAttribute(DEFAULT_TESTID_ATTR) ?? '',
         el.getAttribute('aria-label') ?? '',
     ];
-    const sensitiveAutocomplete = /current-password|new-password|cc-number|cc-csc|one-time-code/i.test(autocomplete);
+    const sensitiveAutocomplete = SENSITIVE_AUTOCOMPLETE.test(autocomplete);
     return ((isInput(el) && 'password' === el.type.toLowerCase()) ||
         sensitiveAutocomplete ||
         identifiers.some(isSensitiveKey));
@@ -293,7 +298,7 @@ export function isSensitiveField(el) {
 export function getValue(el) {
     if (isInput(el) || isTextArea(el) || isSelect(el)) {
         if (isSensitiveField(el))
-            return REDACTED_VALUE;
+            return '' === el.value ? '' : REDACTED_VALUE;
         return el.value;
     }
     const valueNow = el.getAttribute('aria-valuenow');
@@ -309,22 +314,29 @@ function hiddenInsideClosedDetails(el) {
     const summary = Array.from(details.children).find((child) => HTML_SUMMARY_TAG === child.localName);
     return summary === undefined || !summary.contains(el);
 }
-function selfHidden(el) {
-    if ('true' === el.getAttribute('aria-hidden'))
+function stalledFade(el) {
+    if (!el.ownerDocument.hidden || !('getAnimations' in el))
+        return false;
+    return el.getAnimations().some((a) => 'running' === a.playState || a.pending);
+}
+const OVERLAY_ARIA_HIDDEN = 'data-aria-hidden';
+function hiddenByAnOverlay(el) {
+    return el.hasAttribute(OVERLAY_ARIA_HIDDEN);
+}
+function selfHidden(el, style) {
+    if ('true' === el.getAttribute('aria-hidden') && !hiddenByAnOverlay(el))
         return true;
     if (isHtmlElement(el) && el.hidden)
         return true;
     if (hiddenInsideClosedDetails(el))
         return true;
-    const view = el.ownerDocument.defaultView;
-    if (view !== null) {
-        const style = view.getComputedStyle(el);
+    if (style !== null) {
         if ('none' === style.display ||
             'hidden' === style.visibility ||
             'collapse' === style.visibility) {
             return true;
         }
-        if (0 === Number.parseFloat(style.opacity || '1'))
+        if (0 === Number.parseFloat(style.opacity || '1') && !stalledFade(el))
             return true;
     }
     return false;
@@ -351,13 +363,252 @@ function parentAcrossShadowBoundary(el) {
     const host = el.getRootNode().host;
     return host ?? null;
 }
+const CLIPPING_OVERFLOW = new Set(['hidden', 'clip']);
+const SCROLLING_OVERFLOW = new Set(['auto', 'scroll']);
+const NON_CLIPPING_DISPLAY = new Set([
+    'contents',
+    'table-row',
+    'table-row-group',
+    'table-header-group',
+    'table-footer-group',
+    'table-column',
+    'table-column-group',
+]);
+const TRANSFORM_CONTAINING_BLOCK_PROPERTIES = new Set([
+    'transform',
+    'translate',
+    'rotate',
+    'scale',
+    'perspective',
+]);
+const CONTAINING_BLOCK_PROPERTIES = new Set([
+    ...TRANSFORM_CONTAINING_BLOCK_PROPERTIES,
+    'filter',
+    'backdrop-filter',
+]);
+const CONTAINING_BLOCK_CONTAIN = new Set(['layout', 'paint', 'strict', 'content']);
+const REPLACED_INLINE_TAGS = new Set([
+    'img',
+    'video',
+    'audio',
+    'canvas',
+    'iframe',
+    'embed',
+    'object',
+    'input',
+    'textarea',
+    'select',
+]);
+const visibilityInfoMemos = new WeakMap();
+function visibilityInfoMemo(memo) {
+    if (memo === undefined)
+        return new Map();
+    let info = visibilityInfoMemos.get(memo);
+    if (info === undefined) {
+        info = new Map();
+        visibilityInfoMemos.set(memo, info);
+    }
+    return info;
+}
+function ownVisibilityInfo(el, memo) {
+    let info = memo.get(el);
+    if (info === undefined) {
+        const style = el.ownerDocument.defaultView?.getComputedStyle(el) ?? null;
+        if (selfHidden(el, style)) {
+            info = {
+                hidden: true,
+                style,
+                parent: null,
+                clipX: false,
+                clipY: false,
+                scrollX: false,
+                scrollY: false,
+                hasClipping: false,
+            };
+            memo.set(el, info);
+            return info;
+        }
+        const parent = parentAcrossShadowBoundary(el);
+        const inherited = null === parent ? undefined : ownVisibilityInfo(parent, memo);
+        const [overflowX, overflowY] = overflowAxes(style);
+        const root = el.ownerDocument.documentElement;
+        const viewportOverflow = el === root ||
+            (el === el.ownerDocument.body &&
+                overflowAxes(ownVisibilityInfo(root, memo).style).every((axis) => 'visible' === axis));
+        const hasClipBox = !viewportOverflow &&
+            !NON_CLIPPING_DISPLAY.has(style?.display ?? '') &&
+            !(isHtmlElement(el) && 'inline' === style?.display);
+        const clipX = hasClipBox && CLIPPING_OVERFLOW.has(overflowX);
+        const clipY = hasClipBox && CLIPPING_OVERFLOW.has(overflowY);
+        info = {
+            hidden: true === inherited?.hidden,
+            style,
+            parent,
+            clipX,
+            clipY,
+            scrollX: hasClipBox && SCROLLING_OVERFLOW.has(overflowX),
+            scrollY: hasClipBox && SCROLLING_OVERFLOW.has(overflowY),
+            hasClipping: clipX || clipY || true === inherited?.hasClipping,
+        };
+        memo.set(el, info);
+    }
+    return info;
+}
+function overflowAxes(style) {
+    const shorthand = style?.overflow ?? '';
+    const [x = 'visible', y = x] = ('' === shorthand ? 'visible' : shorthand).split(/\s+/);
+    return [
+        null === style || '' === style.overflowX ? x : style.overflowX,
+        null === style || '' === style.overflowY ? y : style.overflowY,
+    ];
+}
+function positionedContainingBlock(el, fixed, memo) {
+    for (let parent = ownVisibilityInfo(el, memo).parent; parent !== null; parent = ownVisibilityInfo(parent, memo).parent) {
+        const style = ownVisibilityInfo(parent, memo).style;
+        if (null === style || 'contents' === style.display)
+            continue;
+        if (!fixed && '' !== style.position && 'static' !== style.position)
+            return parent;
+        const transformable = !('inline' === style.display &&
+            isHtmlElement(parent) &&
+            !REPLACED_INLINE_TAGS.has(parent.localName)) &&
+            'table-column' !== style.display &&
+            'table-column-group' !== style.display;
+        const applies = (property) => transformable || !TRANSFORM_CONTAINING_BLOCK_PROPERTIES.has(property);
+        if ([...CONTAINING_BLOCK_PROPERTIES].some((property) => {
+            const value = style.getPropertyValue(property);
+            return applies(property) && '' !== value && 'none' !== value;
+        }) ||
+            style.willChange
+                .split(',')
+                .some((property) => CONTAINING_BLOCK_PROPERTIES.has(property.trim()) && applies(property.trim())) ||
+            (transformable &&
+                !NON_CLIPPING_DISPLAY.has(style.display) &&
+                (style.contain.split(/\s+/).some((value) => CONTAINING_BLOCK_CONTAIN.has(value)) ||
+                    'auto' === style.contentVisibility)))
+            return parent;
+    }
+    return null;
+}
+function clippingBox(el, info) {
+    if (info.clipBox !== undefined)
+        return info.clipBox;
+    const rect = el.getBoundingClientRect();
+    const style = info.style;
+    const px = (value) => Number.parseFloat(value ?? '') || 0;
+    const border = (value, kind) => kind === undefined || '' === kind || 'none' === kind || 'hidden' === kind ? 0 : px(value);
+    const scaleX = isHtmlElement(el) && el.offsetWidth > 0 ? rect.width / el.offsetWidth : 1;
+    const scaleY = isHtmlElement(el) && el.offsetHeight > 0 ? rect.height / el.offsetHeight : 1;
+    const left = isHtmlElement(el) && el.offsetWidth > 0
+        ? rect.left + el.clientLeft * scaleX
+        : rect.left + border(style?.borderLeftWidth, style?.borderLeftStyle);
+    const top = isHtmlElement(el) && el.offsetHeight > 0
+        ? rect.top + el.clientTop * scaleY
+        : rect.top + border(style?.borderTopWidth, style?.borderTopStyle);
+    const right = isHtmlElement(el) && el.offsetWidth > 0
+        ? left + el.clientWidth * scaleX
+        : rect.right - border(style?.borderRightWidth, style?.borderRightStyle);
+    const bottom = isHtmlElement(el) && el.offsetHeight > 0
+        ? top + el.clientHeight * scaleY
+        : rect.bottom - border(style?.borderBottomWidth, style?.borderBottomStyle);
+    const margin = (style?.overflowClipMargin ?? '').split(/\s+/);
+    const outset = px(margin.at(-1));
+    const borderBox = margin.includes('border-box');
+    const contentBox = margin.includes('content-box');
+    const [x, y] = overflowAxes(style);
+    const clipLeft = 'clip' === x
+        ? (borderBox ? rect.left : left + (contentBox ? px(style?.paddingLeft) * scaleX : 0)) -
+            outset * scaleX
+        : left;
+    const clipRight = 'clip' === x
+        ? (borderBox ? rect.right : right - (contentBox ? px(style?.paddingRight) * scaleX : 0)) +
+            outset * scaleX
+        : right;
+    const clipTop = 'clip' === y
+        ? (borderBox ? rect.top : top + (contentBox ? px(style?.paddingTop) * scaleY : 0)) -
+            outset * scaleY
+        : top;
+    const clipBottom = 'clip' === y
+        ? (borderBox ? rect.bottom : bottom - (contentBox ? px(style?.paddingBottom) * scaleY : 0)) +
+            outset * scaleY
+        : bottom;
+    info.clipBox = {
+        left: clipLeft,
+        right: clipRight,
+        top: clipTop,
+        bottom: clipBottom,
+        width: clipRight - clipLeft,
+        height: clipBottom - clipTop,
+    };
+    return info.clipBox;
+}
+function scrolledInto(b, port, alongX, alongY) {
+    const axis = (lo, hi, size, from, to) => {
+        if (hi > from && lo < to)
+            return [lo, hi];
+        const span = Math.min(size, to - from);
+        return lo >= to ? [to - span, to] : [from, from + span];
+    };
+    const [left, right] = alongX
+        ? axis(b.left, b.right, b.width, port.left, port.right)
+        : [b.left, b.right];
+    const [top, bottom] = alongY
+        ? axis(b.top, b.bottom, b.height, port.top, port.bottom)
+        : [b.top, b.bottom];
+    return { left, right, top, bottom, width: right - left, height: bottom - top };
+}
+function visibleBounds(el, memo, initial, throughScrollers = false) {
+    let bounds = initial;
+    const target = ownVisibilityInfo(el, memo);
+    if (target.hidden)
+        return null;
+    if (null === target.parent || !ownVisibilityInfo(target.parent, memo).hasClipping)
+        return bounds;
+    let clipFrom;
+    for (let current = el; current !== null; current = ownVisibilityInfo(current, memo).parent) {
+        const info = ownVisibilityInfo(current, memo);
+        if (info.hidden)
+            return null;
+        if (current === clipFrom)
+            clipFrom = undefined;
+        const style = info.style;
+        if (throughScrollers &&
+            current !== el &&
+            undefined === clipFrom &&
+            (info.scrollX || info.scrollY)) {
+            bounds ??= el.getBoundingClientRect();
+            if (bounds.width > 0 && bounds.height > 0) {
+                bounds = scrolledInto(bounds, clippingBox(current, info), info.scrollX, info.scrollY);
+            }
+        }
+        if (current !== el && undefined === clipFrom && (info.clipX || info.clipY)) {
+            bounds ??= el.getBoundingClientRect();
+            if (bounds.width > 0 && bounds.height > 0) {
+                const clip = clippingBox(current, info);
+                const left = info.clipX ? Math.max(bounds.left, clip.left) : bounds.left;
+                const right = info.clipX ? Math.min(bounds.right, clip.right) : bounds.right;
+                const top = info.clipY ? Math.max(bounds.top, clip.top) : bounds.top;
+                const bottom = info.clipY ? Math.min(bounds.bottom, clip.bottom) : bounds.bottom;
+                if (right <= left || bottom <= top)
+                    return null;
+                bounds = { left, right, top, bottom, width: right - left, height: bottom - top };
+            }
+        }
+        if (clipFrom === undefined && ('absolute' === style?.position || 'fixed' === style?.position)) {
+            clipFrom = positionedContainingBlock(current, 'fixed' === style?.position, memo);
+        }
+    }
+    return bounds;
+}
 export function isInViewport(el, memo) {
     if (!isVisible(el, memo))
         return false;
     const view = el.ownerDocument.defaultView;
     if (null === view)
         return false;
-    const r = el.getBoundingClientRect();
+    const r = visibleBounds(el, visibilityInfoMemo(memo), el.getBoundingClientRect());
+    if (null === r || undefined === r)
+        return false;
     if (r.width <= 0 || r.height <= 0)
         return false;
     return r.bottom > 0 && r.right > 0 && r.top < view.innerHeight && r.left < view.innerWidth;
@@ -368,8 +619,7 @@ export function isVisible(el, memo) {
     const cached = memo?.get(el);
     if (cached !== undefined)
         return cached;
-    const parent = parentAcrossShadowBoundary(el);
-    const result = !selfHidden(el) && (null === parent || isVisible(parent, memo));
+    const result = visibleBounds(el, visibilityInfoMemo(memo), undefined, true) !== null;
     if (memo !== undefined)
         memo.set(el, result);
     return result;

package/dist/dom/addressing/coverage-markers.d.ts

@@ -0,0 +1,6 @@
+export declare function coverageMarkers(doc: Document): string[];
+export declare function notApplicableFor(page: {
+    buildPlugin: boolean;
+    adapters: readonly string[];
+    markers: readonly string[];
+}): string[];