browser-debugger-cli 0.12.0 → 0.13.0

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

@@ -4,9 +4,9 @@
  * checked against authored declarations only (never the browser's own
  * styles), and `var()` references to custom properties that are not set.
  */
+import type { InspectHint } from '../../ipc/protocol/inspectTypes.js';
 import type { Declaration, Resolution } from './inspectCascade.js';
 import type { StyleMap } from './inspectLayoutModel.js';
-import type { InspectHint } from '../../ipc/protocol/inspectTypes.js';
 import type { VariableSetter } from './inspectScripts.js';
 /** A declaration that has no effect */
 export interface CssHint {

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

@@ -52,7 +52,8 @@ export interface InspectRequest {
     propValues?: InspectResult['props'];
 }
 /**
- * The element's label: tag, id and the first classes, with a count of the rest.
+ * The element's label: tag, id and the first classes ({@link isLabelClass}),
+ * with a count of the rest.
  *
  * @param raw - Tag, id and classes
  * @returns e.g. `a.z-1.max-sm:hidden(+11)`, `input#user-name`

package/dist/runtime/dom/inspectModel.js

@@ -5,6 +5,7 @@
  * tree. Pure: every input is plain data, so the rules are tested without a
  * browser.
  */
+import { isLabelClass } from './elementInfo.js';
 import { allStyles } from './inspectAllStyles.js';
 import { buildBox, buildLayout } from './inspectLayoutModel.js';
 import { buildEffects, buildFills, buildSvgPaint, buildFx, buildOutline, buildPseudo, buildRadius, buildState, buildStrokes, buildText, effectiveBackground, } from './inspectPaintModel.js';
@@ -14,17 +15,19 @@ import { normalizeCssValue, round1 } from '../../utils/cssValues.js';
 /** Classes shown in the label (the rest are counted) */
 const LABEL_CLASSES = 2;
 /**
- * The element's label: tag, id and the first classes, with a count of the rest.
+ * The element's label: tag, id and the first classes ({@link isLabelClass}),
+ * with a count of the rest.
  *
  * @param raw - Tag, id and classes
  * @returns e.g. `a.z-1.max-sm:hidden(+11)`, `input#user-name`
  */
 export function elementLabel(raw) {
-    const shown = raw.classes
+    const classes = raw.classes.filter(isLabelClass);
+    const shown = classes
         .slice(0, LABEL_CLASSES)
         .map((name) => `.${name}`)
         .join('');
-    const more = raw.classes.length - LABEL_CLASSES;
+    const more = classes.length - LABEL_CLASSES;
     return `${raw.tag}${raw.id ? `#${raw.id}` : ''}${shown}${more > 0 ? `(+${more})` : ''}`;
 }
 /**
@@ -48,6 +51,7 @@ export function visibilityOf(layout, rendered) {
         ...(offscreen && { offscreen }),
         ...(layout.coveredBy && { coveredBy: layout.coveredBy }),
         ...(layout.coverTransparent && { coverTransparent: true }),
+        ...(layout.masked && { masked: layout.masked }),
     };
 }
 /**

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

@@ -46,6 +46,8 @@ export declare function effectiveBackground(backgrounds: readonly RawBackground[
     inherited: boolean;
     overImage: boolean;
 };
+/** Why a contrast over a background image or gradient is approximate (its pixels are unknown) */
+export declare const OVER_IMAGE_RISK = "background image or gradient behind";
 /**
  * Contrast of the text color with the background behind it, both painted
  * as the browser composites them ({@link paintOver}), with what makes the

package/dist/runtime/dom/inspectPaintModel.js

@@ -128,6 +128,8 @@ export function effectiveBackground(backgrounds, canvasDark) {
         overImage: painted.overImage,
     };
 }
+/** Why a contrast over a background image or gradient is approximate (its pixels are unknown) */
+export const OVER_IMAGE_RISK = 'background image or gradient behind';
 /**
  * Contrast of the text color with the background behind it, both painted
  * as the browser composites them ({@link paintOver}), with what makes the
@@ -146,7 +148,7 @@ export function textContrast(style, raw) {
     const ratio = Math.floor(contrastRatio(painted.text, painted.background) * 100) / 100;
     const size = pxNumber(style['font-size']) ?? 16;
     const weight = Number(style['font-weight'] ?? 400);
-    const approximate = raw.paintRisks ?? [];
+    const approximate = [...(raw.paintRisks ?? []), ...(painted.overImage ? [OVER_IMAGE_RISK] : [])];
     return {
         ratio,
         level: contrastLevel(ratio, size, weight),

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

@@ -161,12 +161,39 @@ export interface RawInspect {
     /** Properties of running CSS transitions, and names of running animations (time-based: scroll-driven ones do not change on their own) */
     animating: string[];
 }
+/**
+ * Page-side flat-tree helpers: the element's computed style, its flat-tree
+ * parent, the parent that lays it out (skipping `display: contents`), its
+ * element children in the flat tree and whether an element is rendered.
+ */
+export declare const FLAT_TREE_JS: string;
+/**
+ * Page-side hit test that also sees elements with `pointer-events: none`
+ * (hero images, decorative layers and blended duplicates often have it, and
+ * `elementsFromPoint` skips them): for the duration of `test`, a constructed
+ * stylesheet makes every element of the given roots (documents and shadow
+ * roots) hittable. It is added and removed within one script turn, so nothing
+ * is painted with it and no DOM mutation is recorded. A root that already has
+ * it (an outer call covering a whole page walk) is left as it is, so nested
+ * calls cost no extra style recalculation.
+ */
+export declare const HIT_EVERYTHING_JS = "(roots, test) => {\n  const added = [];\n  for (const root of roots) {\n    if (!root || !root.adoptedStyleSheets) continue;\n    const view = (root.ownerDocument || root).defaultView;\n    try {\n      if (!view.__bdgHitSheet) {\n        view.__bdgHitSheet = new view.CSSStyleSheet();\n        view.__bdgHitSheet.replaceSync('* { pointer-events: auto !important; }');\n      }\n      if (root.adoptedStyleSheets.includes(view.__bdgHitSheet)) continue;\n      root.adoptedStyleSheets = [...root.adoptedStyleSheets, view.__bdgHitSheet];\n      added.push([root, view.__bdgHitSheet]);\n    } catch (e) {\n      continue;\n    }\n  }\n  try {\n    return test();\n  } finally {\n    for (const [root, sheet] of added) root.adoptedStyleSheets = root.adoptedStyleSheets.filter((s) => s !== sheet);\n  }\n}";
+/**
+ * Page-side reasons the contrast of an element's text is approximate: a
+ * blend mode or filter on it or an ancestor, and, hit-testing the middle of
+ * its first line of text (else of its first box; only in the viewport), the
+ * nearest element below it that is not an ancestor, above the first opaque
+ * background of its own chain, and
+ * paints (a canvas, video, image, background) and the nearest one on top of
+ * it that paints (an overlay).
+ */
+export declare const PAINT_RISKS_JS = "(el, tree, textParent) => {\n  const risks = [];\n  const chain = [];\n  for (let n = el; n && chain.length < 60; n = tree.flatParent(n)) chain.push(n);\n  for (const n of chain) {\n    const s = tree.style(n);\n    if (s.mixBlendMode !== 'normal') risks.push('mix-blend-mode ' + s.mixBlendMode + ' on ' + tree.label(n));\n    if (s.filter !== 'none') risks.push('filter on ' + tree.label(n));\n  }\n  const textNode = Array.from(textParent.childNodes).find((c) => c.nodeType === 3 && c.data.trim() !== '');\n  const range = el.ownerDocument.createRange();\n  if (textNode) range.selectNodeContents(textNode);\n  const box = tree.style(el).display === 'contents' ? tree.layoutParent(el) : el;\n  const rect = (textNode && range.getClientRects()[0]) || (box && box.getClientRects()[0]);\n  const view = el.ownerDocument.defaultView;\n  if (!rect) return risks;\n  const x = rect.left + rect.width / 2;\n  const y = rect.top + rect.height / 2;\n  if (x < 0 || y < 0 || x >= view.innerWidth || y >= view.innerHeight) return risks;\n  const root = el.getRootNode();\n  const hits = ((roots, test) => {\n  const added = [];\n  for (const root of roots) {\n    if (!root || !root.adoptedStyleSheets) continue;\n    const view = (root.ownerDocument || root).defaultView;\n    try {\n      if (!view.__bdgHitSheet) {\n        view.__bdgHitSheet = new view.CSSStyleSheet();\n        view.__bdgHitSheet.replaceSync('* { pointer-events: auto !important; }');\n      }\n      if (root.adoptedStyleSheets.includes(view.__bdgHitSheet)) continue;\n      root.adoptedStyleSheets = [...root.adoptedStyleSheets, view.__bdgHitSheet];\n      added.push([root, view.__bdgHitSheet]);\n    } catch (e) {\n      continue;\n    }\n  }\n  try {\n    return test();\n  } finally {\n    for (const [root, sheet] of added) root.adoptedStyleSheets = root.adoptedStyleSheets.filter((s) => s !== sheet);\n  }\n})([el.ownerDocument, root], () => (root.elementsFromPoint ? root : el.ownerDocument).elementsFromPoint(x, y));\n  const at = hits.findIndex((h) => chain.includes(h));\n  if (at < 0) return risks;\n  const clear = (color) => color === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(color) || /\\/\\s*0\\)$/.test(color);\n  const opaque = (n) => {\n    const s = tree.style(n);\n    return /^rgb\\(/.test(s.backgroundColor) && s.backgroundImage === 'none' && Number(s.opacity) === 1;\n  };\n  const paints = (n) => {\n    const s = tree.style(n);\n    return /^(canvas|video|img|iframe|embed|object|svg)$/.test(n.localName) || s.backgroundImage !== 'none' || !clear(s.backgroundColor);\n  };\n  let behind = null;\n  for (const h of hits.slice(at)) {\n    if (chain.includes(h)) {\n      if (opaque(h)) break;\n    } else if (paints(h)) {\n      behind = h;\n      break;\n    }\n  }\n  if (behind) risks.push(tree.label(behind) + ' behind');\n  const onTop = hits.slice(0, at).find((h) => !el.contains(h) && paints(h));\n  if (onTop) risks.push(tree.label(onTop) + ' on top');\n  return risks;\n}";
 /**
  * Page-side function run on the element (`this`), see {@link RawInspect}.
  * Arguments: tree depth, the property names asked for with `--props` (or
  * null) and the `--why` property (or null).
  */
-export declare const INSPECT_PAGE_JS = "function (depth, props, why) {\n  const el = this;\n  const view = el.ownerDocument.defaultView;\n  const tree = ((view) => {\n  const style = (n, pseudo) => view.getComputedStyle(n, pseudo);\n  const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;\n  const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const layoutParent = (n) => {\n    let p = flatParent(n);\n    while (p && style(p).display === 'contents') p = flatParent(p);\n    return p;\n  };\n  const via = new WeakMap();\n  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const slotText = (slot) => slot.assignedNodes({ flatten: true }).some((t) => t.nodeType === 3 && t.data.trim() !== '');\n  const children = (n) => {\n    const out = [];\n    const add = (c, through) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        if (assigned.length === 0 && slotText(c)) out.push(c);\n        else (assigned.length ? assigned : Array.from(c.children)).forEach((a) => add(a, label(c)));\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach((a) => add(a, label(c) + ' (contents)'));\n      } else {\n        if (through) via.set(c, through);\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach((c) => add(c, null));\n    return out;\n  };\n  const rendered = (n) => n.getClientRects().length > 0 &&\n    (!n.checkVisibility || n.checkVisibility({ visibilityProperty: true }));\n  const container = (n) => children(n).some((c) => rendered(c) && !/^inline/.test(style(c).display));\n  return { style, skipped, flatParent, layoutParent, children, rendered, container, label, via, slotText };\n})(view);\n  const textOf = (el) => {\n  const isSensitive = (el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n};\n  const clean = (text) => String(text || '').replace(/\\s+/g, ' ').trim().slice(0, 200);\n  if (el.localName === 'input' && el.type === 'hidden') return '';\n  if (el.localName === 'input' || el.localName === 'textarea') {\n    return el.value && isSensitive(el) ? '\u2022\u2022\u2022\u2022' : clean(el.value);\n  }\n  if (el.localName === 'select') {\n    const chosen = clean(Array.from(el.selectedOptions || [], (o) => o.label).join(', '));\n    return chosen && isSensitive(el) ? '\u2022\u2022\u2022\u2022' : chosen;\n  }\n  const outsideControls = () => {\n    const parts = [];\n    const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n    for (let n = walker.nextNode(); n && parts.length < 400; n = walker.nextNode()) {\n      const holder = n.parentElement;\n      if (!holder || holder.closest('select, textarea, script, style, template, noscript')) continue;\n      if (holder.checkVisibility && !holder.checkVisibility({ visibilityProperty: true })) continue;\n      parts.push(n.data);\n    }\n    return parts.join(' ');\n  };\n  const holdsControls = Boolean(el.querySelector && el.querySelector('select, textarea'));\n  const raw = holdsControls ? outsideControls() : typeof el.innerText === 'string' ? el.innerText : el.textContent;\n  const text = clean(raw);\n  const view = el.ownerDocument.defaultView;\n  const security = view ? view.getComputedStyle(el).getPropertyValue('-webkit-text-security') : '';\n  return text && security && security !== 'none' ? '\u2022\u2022\u2022\u2022' : text;\n};\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 s = tree.style(el);\n  const formControl = /^(input|textarea|select|button)$/.test(el.localName);\n  const textControl = ((el) => {\n  if (el.localName === 'textarea' || el.localName === 'select') return true;\n  return el.localName === 'input' && !/^(checkbox|radio|range|color|hidden|image)$/.test(el.type);\n})(el);\n  const holder = textControl ? null : ((el, tree) => {\n  const counts = new Map();\n  const parents = new Map();\n  let budget = 2000;\n  const shown = (n) => tree.style(n).display === 'contents' || tree.rendered(n);\n  const nodesOf = (n) => {\n    if (n.localName !== 'slot') return Array.from((n.shadowRoot || n).childNodes);\n    const assigned = n.assignedNodes({ flatten: true });\n    return assigned.length ? assigned : Array.from(n.childNodes);\n  };\n  const visit = (n) => {\n    if (budget-- <= 0) return;\n    for (const c of nodesOf(n)) {\n      if (budget <= 0) return;\n      if (c.nodeType === 3) {\n        const length = c.data.replace(/\\s+/g, '').length;\n        if (length === 0) continue;\n        counts.set(n, (counts.get(n) || 0) + length);\n        if (!parents.has(n)) parents.set(n, c.parentElement || n);\n      } else if (c.nodeType === 1 && !tree.skipped.test(c.localName) && shown(c)) {\n        visit(c);\n      }\n    }\n  };\n  visit(el);\n  let best = null;\n  for (const [holder, length] of counts) if (!best || length > counts.get(best)) best = holder;\n  let total = 0;\n  for (const length of counts.values()) total += length;\n  return best && { style: best, font: parents.get(best), share: counts.get(best) / total };\n})(el, tree);\n  const textChildren = tree.children(el).filter((c) => tree.rendered(c) && (c.textContent || '').trim() !== '').length;\n  const textual = textControl || Boolean(holder && (holder.style === el || (holder.share >= 0.9 && textChildren <= 1) || !tree.container(el)));\n  const textFrom = holder && holder.style !== el ? holder.style : el;\n  const content = textOf(el);\n  const parent = tree.layoutParent(el);\n  const typedMap = el.computedStyleMap ? el.computedStyleMap() : null;\n  const typed = (name) => { try { return typedMap ? String(typedMap.get(name)) : ''; } catch (e) { return ''; } };\n  const result = {\n    tag: el.localName,\n    id: el.id || '',\n    classes: el.classList ? Array.from(el.classList) : [],\n    context: ((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})(el),\n    content: content,\n    textual: textual,\n    formControl: formControl,\n    rendered: textual && textFrom !== el\n      ? tree.style(textFrom).visibility !== 'hidden' && tree.rendered(tree.style(textFrom).display === 'contents' ? tree.layoutParent(textFrom) : textFrom)\n      : tree.rendered(el),\n    hasText: textControl || holder !== null,\n    replaced: el instanceof SVGElement || /^(img|video|audio|canvas|iframe|embed|object|input|textarea|select|button|meter|progress)$/.test(el.localName),\n    svg: el.namespaceURI === 'http://www.w3.org/2000/svg',\n    typed: { width: typed('width'), height: typed('height') },\n    parent: parent ? describe(parent) : undefined,\n    animating: el.getAnimations ? [...new Set(el.getAnimations().filter((a) => a.playState === 'running' && (!a.timeline || a.timeline === el.ownerDocument.timeline)).map((a) => a.transitionProperty || a.animationName || 'animation'))] : []\n  };\n  if (textFrom !== el) result.textHolder = tree.label(textFrom);\n  const clipped = (n) => {\n    const cs = tree.style(n);\n    if (cs.overflowX !== 'visible' && n.scrollWidth > n.clientWidth + 1) return true;\n    return cs.webkitLineClamp !== 'none' && cs.overflowY !== 'visible' && n.scrollHeight > n.clientHeight + 1;\n  };\n  if (textual && !textControl && (clipped(el) || (textFrom !== el && clipped(textFrom)))) result.truncated = true;\n  if (((n, tree, text) => {\n  const unquote = (name) => name.trim().replace(/^[\"']|[\"']$/g, '').toLowerCase();\n  const match = /^\\s*(\"[^\"]*\"|'[^']*'|[^,]*)/.exec(tree.style(n).fontFamily);\n  const first = unquote(match ? match[1] : '');\n  if (!first || !n.ownerDocument.fonts) return false;\n  const ranges = [];\n  for (const face of n.ownerDocument.fonts) {\n    if (face.status !== 'loaded' || unquote(face.family) !== first) continue;\n    for (const part of face.unicodeRange.split(',')) {\n      const [from, to] = part.trim().replace(/^U\\+/i, '').split('-');\n      const low = parseInt(from.replace(/\\?/g, '0'), 16);\n      const high = parseInt((to || from).replace(/\\?/g, 'F'), 16);\n      if (!Number.isNaN(low) && !Number.isNaN(high)) ranges.push([low, high]);\n    }\n  }\n  if (ranges.length === 0) return false;\n  const covered = (code) => ranges.some(([low, high]) => code >= low && code <= high);\n  return Array.from(text.replace(/\\s+/g, '')).every((char) => covered(char.codePointAt(0)));\n})(textFrom, tree, textOf(textFrom))) result.familyLoaded = true;\n  if (/^(input|textarea)$/.test(el.localName) && el.placeholder && !el.value) {\n    result.placeholder = el.placeholder.replace(/\\s+/g, ' ').trim();\n    const placeholderStyle = tree.style(el, '::placeholder');\n    result.placeholderColor = placeholderStyle.color;\n    result.placeholderFont = { style: placeholderStyle.fontStyle, weight: placeholderStyle.fontWeight };\n  }\n  if (el.clientWidth > 0 && (el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1)) {\n    result.scroll = { w: el.scrollWidth, h: el.scrollHeight, clientW: el.clientWidth, clientH: el.clientHeight };\n  }\n  if (props) {\n    const known = (name) => name.startsWith('--') || CSS.supports(name, 'inherit');\n    const valueOf = (name) => {\n      const value = s.getPropertyValue(name).trim();\n      if (value !== '' || name.startsWith('--')) return value;\n      const sides = ['top', 'right', 'bottom', 'left'].map((side) => name + '-' + side).filter(known);\n      return sides.map((side) => side.slice(name.length + 1) + ' ' + s.getPropertyValue(side).trim()).join(' / ');\n    };\n    result.props = Object.fromEntries(props.filter(known).map((name) => [name, valueOf(name)]));\n    result.rootFontSize = parseFloat(tree.style(el.ownerDocument.documentElement).fontSize) || 16;\n    result.unknownProps = props.filter((name) => !known(name));\n  }\n  if (why && !why.startsWith('--')) {\n    if (!CSS.supports(why, 'inherit')) result.unknownWhy = true;\n    else {\n      const probe = el.ownerDocument.createElement('div').style;\n      probe.setProperty(why, 'inherit');\n      if (probe.length > 1) {\n        result.whyLonghands = Array.from(probe);\n        result.whyComputed = s.getPropertyValue(why).trim();\n      }\n      const inactive = ((el, names) => {\n  const view = el.ownerDocument.defaultView;\n  const found = [];\n  let budget = 20000;\n  const unmet = (rule) => {\n    if (rule.media && rule.media.mediaText && !view.matchMedia(rule.media.mediaText).matches) return '@media ' + rule.media.mediaText;\n    if (typeof CSSSupportsRule !== 'undefined' && rule instanceof CSSSupportsRule && !CSS.supports(rule.conditionText)) return '@supports ' + rule.conditionText;\n    return null;\n  };\n  const sets = (rule) => names.map((name) => rule.style.getPropertyValue(name).trim()).find((value) => value !== '');\n  const matches = (selector) => {\n    try { return el.matches(selector); } catch (e) { return false; }\n  };\n  const visit = (rules, condition) => {\n    for (const rule of Array.from(rules)) {\n      if (budget-- <= 0 || found.length >= 5) return;\n      if (typeof CSSImportRule !== 'undefined' && rule instanceof CSSImportRule) {\n        try { if (rule.styleSheet) visit(rule.styleSheet.cssRules, condition); } catch (e) { continue; }\n        continue;\n      }\n      const value = condition && rule.style && rule.selectorText ? sets(rule) : undefined;\n      if (value !== undefined && matches(rule.selectorText)) found.push({ selector: rule.selectorText, condition: condition, value: value });\n      if (rule.cssRules) visit(rule.cssRules, condition || unmet(rule));\n    }\n  };\n  for (const scope of new Set([el.getRootNode(), el.ownerDocument])) {\n    for (const sheet of [...Array.from(scope.styleSheets || []), ...Array.from(scope.adoptedStyleSheets || [])]) {\n      try { visit(sheet.cssRules, null); } catch (e) { continue; }\n    }\n  }\n  return found;\n})(el, [why].concat(result.whyLonghands || []));\n      if (inactive.length > 0) result.whyInactive = inactive;\n    }\n  }\n  return Object.assign(result,\n    ((el, tree) => {\n  const parent = tree.layoutParent(el);\n  if (!parent || tree.style(el).position === 'fixed' || !tree.rendered(el)) return {};\n  const r = el.getBoundingClientRect();\n  const p = parent.getBoundingClientRect();\n  const ps = tree.style(parent);\n  const zoom = parent.currentCSSZoom || 1;\n  const edge = (side) => (parseFloat(ps['border-' + side + '-width']) + parseFloat(ps['padding-' + side])) * zoom;\n  const inParent = {\n    left: r.left - (p.left + edge('left')),\n    top: r.top - (p.top + edge('top')),\n    right: (p.right - edge('right')) - r.right,\n    bottom: (p.bottom - edge('bottom')) - r.bottom\n  };\n  const inFlow = (n) => {\n    if (n === el || !tree.rendered(n) || /^(absolute|fixed)$/.test(tree.style(n).position)) return false;\n    const box = n.getBoundingClientRect();\n    return box.width > 0 || box.height > 0;\n  };\n  const siblings = tree.children(parent);\n  const at = siblings.indexOf(el);\n  const before = siblings.slice(0, Math.max(at, 0)).reverse().find(inFlow);\n  const after = at < 0 ? undefined : siblings.slice(at + 1).find(inFlow);\n  const gaps = {};\n  for (const sibling of [before, after]) {\n    if (!sibling) continue;\n    const s = sibling.getBoundingClientRect();\n    if (s.bottom <= r.top + 0.5) gaps.top = r.top - s.bottom;\n    else if (s.top >= r.bottom - 0.5) gaps.bottom = s.top - r.bottom;\n    else if (s.right <= r.left + 0.5) gaps.left = r.left - s.right;\n    else if (s.left >= r.right - 0.5) gaps.right = s.left - r.right;\n  }\n  return { inParent: inParent, siblings: gaps };\n})(el, tree),\n    ((el, tree, view) => {\n  const backgrounds = [];\n  let opacity = 1;\n  for (let n = el; n && backgrounds.length < 60; n = tree.flatParent(n)) {\n    const s = tree.style(n);\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  }\n  const doc = el.ownerDocument;\n  const meta = doc.querySelector('meta[name=\"color-scheme\"]');\n  const rootScheme = tree.style(doc.documentElement).colorScheme;\n  const scheme = rootScheme && rootScheme !== 'normal' ? rootScheme : (meta && meta.content) || '';\n  const prefersDark = view.matchMedia('(prefers-color-scheme: dark)').matches;\n  const canvasDark = /dark/.test(scheme) && (!/light/.test(scheme) || prefersDark);\n  return { backgrounds: backgrounds, canvasDark: canvasDark, opacity: opacity };\n})(textual ? textFrom : el, tree, view),\n    textual ? { paintRisks: ((el, tree, textParent) => {\n  const risks = [];\n  const chain = [];\n  for (let n = el; n && chain.length < 60; n = tree.flatParent(n)) chain.push(n);\n  for (const n of chain) {\n    const s = tree.style(n);\n    if (s.mixBlendMode !== 'normal') risks.push('mix-blend-mode ' + s.mixBlendMode + ' on ' + tree.label(n));\n    if (s.filter !== 'none') risks.push('filter on ' + tree.label(n));\n  }\n  const textNode = Array.from(textParent.childNodes).find((c) => c.nodeType === 3 && c.data.trim() !== '');\n  const range = el.ownerDocument.createRange();\n  if (textNode) range.selectNodeContents(textNode);\n  const box = tree.style(el).display === 'contents' ? tree.layoutParent(el) : el;\n  const rect = (textNode && range.getClientRects()[0]) || (box && box.getClientRects()[0]);\n  const view = el.ownerDocument.defaultView;\n  if (!rect) return risks;\n  const x = rect.left + rect.width / 2;\n  const y = rect.top + rect.height / 2;\n  if (x < 0 || y < 0 || x >= view.innerWidth || y >= view.innerHeight) return risks;\n  const root = el.getRootNode();\n  const hits = (root.elementsFromPoint ? root : el.ownerDocument).elementsFromPoint(x, y);\n  const at = hits.findIndex((h) => chain.includes(h));\n  if (at < 0) return risks;\n  const clear = (color) => color === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(color) || /\\/\\s*0\\)$/.test(color);\n  const opaque = (n) => {\n    const s = tree.style(n);\n    return /^rgb\\(/.test(s.backgroundColor) && s.backgroundImage === 'none' && Number(s.opacity) === 1;\n  };\n  const paints = (n) => {\n    const s = tree.style(n);\n    return /^(canvas|video|img|iframe|embed|object|svg)$/.test(n.localName) || s.backgroundImage !== 'none' || !clear(s.backgroundColor);\n  };\n  let behind = null;\n  for (const h of hits.slice(at)) {\n    if (chain.includes(h)) {\n      if (opaque(h)) break;\n    } else if (paints(h)) {\n      behind = h;\n      break;\n    }\n  }\n  if (behind) risks.push(tree.label(behind) + ' behind');\n  const onTop = hits.slice(0, at).find((h) => !el.contains(h) && paints(h));\n  if (onTop) risks.push(tree.label(onTop) + ' on top');\n  return risks;\n})(textFrom, tree, holder ? holder.font : el) } : {},\n    ((el, tree, textOf, depth) => {\n  let budget = 400;\n  let skipped = 0;\n  const walk = (kids, level, origin) => {\n    const shown = kids.filter((k) => tree.rendered(k) || k.localName === 'slot');\n    const nodes = [];\n    for (const k of shown) {\n      if (budget <= 0) { skipped++; continue; }\n      budget--;\n      nodes.push(nodeOf(k, level, origin));\n    }\n    return { nodes: nodes, hidden: kids.length - shown.length };\n  };\n  const nodeOf = (n, level, origin) => {\n    const r = n.getBoundingClientRect();\n    const node = { label: tree.label(n), x: r.left - origin.left, y: r.top - origin.top, w: r.width, h: r.height, display: tree.style(n).display };\n    if (tree.via.has(n)) node.via = tree.via.get(n);\n    if (n.parentNode && n.parentNode.nodeType === 11 && n.parentNode.host) node.shadow = true;\n    if (n.localName === 'slot') {\n      node.text = n.assignedNodes({ flatten: true }).map((t) => t.textContent).join(' ').replace(/\\s+/g, ' ').trim().slice(0, 60);\n      return node;\n    }\n    const kids = tree.children(n);\n    if (!tree.container(n)) node.text = textOf(n).slice(0, 60);\n    if (level >= depth) {\n      node.childCount = kids.filter(tree.rendered).length;\n      return node;\n    }\n    const sub = walk(kids, level + 1, r);\n    node.children = sub.nodes;\n    node.hidden = sub.hidden;\n    return node;\n  };\n  if (depth <= 0) return { hiddenChildren: 0, treeSkipped: 0 };\n  const top = walk(tree.children(el), 1, el.getBoundingClientRect());\n  return { tree: top.nodes, hiddenChildren: top.hidden, treeSkipped: skipped };\n})(el, tree, textOf, depth));\n}";
+export declare const INSPECT_PAGE_JS: string;
 /**
  * Page-side function run on the element (`this`) that returns another
  * element whose styles CDP reads: `"parent"`, the parent that lays it out
@@ -176,7 +203,7 @@ export declare const INSPECT_PAGE_JS = "function (depth, props, why) {\n  const
  * `"fontHolder"`, the parent of that text's nodes (for the rendered font: a
  * slot's text nodes belong to the host's light DOM). Null when there is none.
  */
-export declare const RELATED_NODE_JS = "function (which) {\n  const tree = ((view) => {\n  const style = (n, pseudo) => view.getComputedStyle(n, pseudo);\n  const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;\n  const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;\n  const layoutParent = (n) => {\n    let p = flatParent(n);\n    while (p && style(p).display === 'contents') p = flatParent(p);\n    return p;\n  };\n  const via = new WeakMap();\n  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const slotText = (slot) => slot.assignedNodes({ flatten: true }).some((t) => t.nodeType === 3 && t.data.trim() !== '');\n  const children = (n) => {\n    const out = [];\n    const add = (c, through) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        if (assigned.length === 0 && slotText(c)) out.push(c);\n        else (assigned.length ? assigned : Array.from(c.children)).forEach((a) => add(a, label(c)));\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach((a) => add(a, label(c) + ' (contents)'));\n      } else {\n        if (through) via.set(c, through);\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach((c) => add(c, null));\n    return out;\n  };\n  const rendered = (n) => n.getClientRects().length > 0 &&\n    (!n.checkVisibility || n.checkVisibility({ visibilityProperty: true }));\n  const container = (n) => children(n).some((c) => rendered(c) && !/^inline/.test(style(c).display));\n  return { style, skipped, flatParent, layoutParent, children, rendered, container, label, via, slotText };\n})(this.ownerDocument.defaultView);\n  if (which === 'parent') return tree.layoutParent(this);\n  const holder = ((el, tree) => {\n  const counts = new Map();\n  const parents = new Map();\n  let budget = 2000;\n  const shown = (n) => tree.style(n).display === 'contents' || tree.rendered(n);\n  const nodesOf = (n) => {\n    if (n.localName !== 'slot') return Array.from((n.shadowRoot || n).childNodes);\n    const assigned = n.assignedNodes({ flatten: true });\n    return assigned.length ? assigned : Array.from(n.childNodes);\n  };\n  const visit = (n) => {\n    if (budget-- <= 0) return;\n    for (const c of nodesOf(n)) {\n      if (budget <= 0) return;\n      if (c.nodeType === 3) {\n        const length = c.data.replace(/\\s+/g, '').length;\n        if (length === 0) continue;\n        counts.set(n, (counts.get(n) || 0) + length);\n        if (!parents.has(n)) parents.set(n, c.parentElement || n);\n      } else if (c.nodeType === 1 && !tree.skipped.test(c.localName) && shown(c)) {\n        visit(c);\n      }\n    }\n  };\n  visit(el);\n  let best = null;\n  for (const [holder, length] of counts) if (!best || length > counts.get(best)) best = holder;\n  let total = 0;\n  for (const length of counts.values()) total += length;\n  return best && { style: best, font: parents.get(best), share: counts.get(best) / total };\n})(this, tree);\n  if (!holder) return null;\n  return which === 'textHolder' ? holder.style : holder.font;\n}";
+export declare const RELATED_NODE_JS: string;
 /** Where a custom property is set, as {@link VARIABLE_SETTERS_JS} finds it */
 export interface VariableSetter {
     /** Selector of the rule, or `@keyframes name` */

package/dist/runtime/dom/inspectScripts.js

@@ -12,7 +12,7 @@
  * instead of the light DOM, slots replaced by what is assigned to them, and
  * `display: contents` wrappers by their children.
  */
-import { ELEMENT_CONTEXT_JS, ELEMENT_DESCRIPTION_JS, MASKED_VALUE, SENSITIVE_FIELD_JS, } from './elementInfo.js';
+import { COMPOSED_JS, ELEMENT_CONTEXT_JS, ELEMENT_DESCRIPTION_JS, FLAT_TEXT_JS, LABEL_CLASSES_JS, MASKED_VALUE, SENSITIVE_FIELD_JS, } from './elementInfo.js';
 /** Elements walked for the child tree at most (the rest are counted) */
 export const TREE_NODE_CAP = 400;
 /**
@@ -20,7 +20,7 @@ export const TREE_NODE_CAP = 400;
  * parent, the parent that lays it out (skipping `display: contents`), its
  * element children in the flat tree and whether an element is rendered.
  */
-const FLAT_TREE_JS = `(view) => {
+export const FLAT_TREE_JS = `(view) => {
   const style = (n, pseudo) => view.getComputedStyle(n, pseudo);
   const skipped = /^(script|style|template|link|meta|noscript|title|head|base)$/;
   const flatParent = (n) => n.assignedSlot || n.parentElement || (n.parentNode && n.parentNode.host) || null;
@@ -30,7 +30,8 @@ const FLAT_TREE_JS = `(view) => {
     return p;
   };
   const via = new WeakMap();
-  const label = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');
+  const firstClass = (n) => (${LABEL_CLASSES_JS})(n)[0];
+  const label = (n) => n.localName + (n.id ? '#' + n.id : firstClass(n) ? '.' + firstClass(n) : '');
   const slotText = (slot) => slot.assignedNodes({ flatten: true }).some((t) => t.nodeType === 3 && t.data.trim() !== '');
   const children = (n) => {
     const out = [];
@@ -60,14 +61,15 @@ const FLAT_TREE_JS = `(view) => {
  * of the visible text in its flat tree (characters, whitespace aside), and
  * the element whose child text nodes those are (for the rendered font).
  * Text slotted into a shadow root is drawn with the slot's styles, and text
- * of an element with a shadow root that is not slotted is not drawn. Null
- * when there is no visible text.
+ * of an element with a shadow root that is not slotted is not drawn, nor is
+ * text inside a fully transparent descendant (a measuring copy under a
+ * mask). Null when there is no visible text.
  */
 const TEXT_HOLDER_JS = `(el, tree) => {
   const counts = new Map();
   const parents = new Map();
   let budget = 2000;
-  const shown = (n) => tree.style(n).display === 'contents' || tree.rendered(n);
+  const shown = (n) => Number(tree.style(n).opacity) !== 0 && (tree.style(n).display === 'contents' || tree.rendered(n));
   const nodesOf = (n) => {
     if (n.localName !== 'slot') return Array.from((n.shadowRoot || n).childNodes);
     const assigned = n.assignedNodes({ flatten: true });
@@ -132,13 +134,16 @@ const TEXT_CONTROL_JS = `(el) => {
 /**
  * Page-side text of an element: a form control's value or a select's chosen
  * options (masked for secrets, {@link SENSITIVE_FIELD_JS}), else its
- * `innerText` (`textContent` for SVG), masked when CSS hides it as a secret
+ * `innerText` (`textContent` for SVG; the flat tree's text for web
+ * components and slots, {@link FLAT_TEXT_JS}), masked when CSS hides it as a secret
  * (`-webkit-text-security`), whitespace collapsed. A container holding a
  * select or textarea gets its visible text without theirs, so a form's text
  * never carries a chosen option or typed text.
  */
 const TEXT_JS = `(el) => {
   const isSensitive = ${SENSITIVE_FIELD_JS};
+  const composed = ${COMPOSED_JS};
+  const flatText = ${FLAT_TEXT_JS};
   const clean = (text) => String(text || '').replace(/\\s+/g, ' ').trim().slice(0, 200);
   if (el.localName === 'input' && el.type === 'hidden') return '';
   if (el.localName === 'input' || el.localName === 'textarea') {
@@ -160,7 +165,8 @@ const TEXT_JS = `(el) => {
     return parts.join(' ');
   };
   const holdsControls = Boolean(el.querySelector && el.querySelector('select, textarea'));
-  const raw = holdsControls ? outsideControls() : typeof el.innerText === 'string' ? el.innerText : el.textContent;
+  const ownText = () => (typeof el.innerText === 'string' ? el.innerText : el.textContent);
+  const raw = holdsControls ? outsideControls() : composed(el) ? flatText(el, 2000) : ownText();
   const text = clean(raw);
   const view = el.ownerDocument.defaultView;
   const security = view ? view.getComputedStyle(el).getPropertyValue('-webkit-text-security') : '';
@@ -232,6 +238,39 @@ const BACKGROUNDS_JS = `(el, tree, view) => {
   const canvasDark = /dark/.test(scheme) && (!/light/.test(scheme) || prefersDark);
   return { backgrounds: backgrounds, canvasDark: canvasDark, opacity: opacity };
 }`;
+/**
+ * Page-side hit test that also sees elements with `pointer-events: none`
+ * (hero images, decorative layers and blended duplicates often have it, and
+ * `elementsFromPoint` skips them): for the duration of `test`, a constructed
+ * stylesheet makes every element of the given roots (documents and shadow
+ * roots) hittable. It is added and removed within one script turn, so nothing
+ * is painted with it and no DOM mutation is recorded. A root that already has
+ * it (an outer call covering a whole page walk) is left as it is, so nested
+ * calls cost no extra style recalculation.
+ */
+export const HIT_EVERYTHING_JS = `(roots, test) => {
+  const added = [];
+  for (const root of roots) {
+    if (!root || !root.adoptedStyleSheets) continue;
+    const view = (root.ownerDocument || root).defaultView;
+    try {
+      if (!view.__bdgHitSheet) {
+        view.__bdgHitSheet = new view.CSSStyleSheet();
+        view.__bdgHitSheet.replaceSync('* { pointer-events: auto !important; }');
+      }
+      if (root.adoptedStyleSheets.includes(view.__bdgHitSheet)) continue;
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, view.__bdgHitSheet];
+      added.push([root, view.__bdgHitSheet]);
+    } catch (e) {
+      continue;
+    }
+  }
+  try {
+    return test();
+  } finally {
+    for (const [root, sheet] of added) root.adoptedStyleSheets = root.adoptedStyleSheets.filter((s) => s !== sheet);
+  }
+}`;
 /**
  * Page-side reasons the contrast of an element's text is approximate: a
  * blend mode or filter on it or an ancestor, and, hit-testing the middle of
@@ -241,7 +280,7 @@ const BACKGROUNDS_JS = `(el, tree, view) => {
  * paints (a canvas, video, image, background) and the nearest one on top of
  * it that paints (an overlay).
  */
-const PAINT_RISKS_JS = `(el, tree, textParent) => {
+export const PAINT_RISKS_JS = `(el, tree, textParent) => {
   const risks = [];
   const chain = [];
   for (let n = el; n && chain.length < 60; n = tree.flatParent(n)) chain.push(n);
@@ -261,7 +300,7 @@ const PAINT_RISKS_JS = `(el, tree, textParent) => {
   const y = rect.top + rect.height / 2;
   if (x < 0 || y < 0 || x >= view.innerWidth || y >= view.innerHeight) return risks;
   const root = el.getRootNode();
-  const hits = (root.elementsFromPoint ? root : el.ownerDocument).elementsFromPoint(x, y);
+  const hits = (${HIT_EVERYTHING_JS})([el.ownerDocument, root], () => (root.elementsFromPoint ? root : el.ownerDocument).elementsFromPoint(x, y));
   const at = hits.findIndex((h) => chain.includes(h));
   if (at < 0) return risks;
   const clear = (color) => color === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(color) || /\\/\\s*0\\)$/.test(color);

package/dist/runtime/dom/layout.js

@@ -15,6 +15,7 @@ import { throwIfInvalidSelector } from './formFillHelpers/shared.js';
 import { findFrameOwner, placeInOwnerFrame } from './frameLayout.js';
 import { measureFrameMapping } from './frameScopedConnection.js';
 import { DEEP_QUERY_JS, missingElementError, selectorArgsJS } from './targetNode.js';
+import { evaluateInBdgWorld, resolveNodeInBdgWorld } from '../page/bdgWorld.js';
 import { createLogger } from '../../ui/logging/index.js';
 import { getErrorMessage } from '../../utils/errors.js';
 import { EXIT_CODES } from '../../utils/exitCodes.js';
@@ -247,10 +248,10 @@ export async function inspectLayout(cdp, params) {
  */
 async function measureSelector(cdp, params) {
     const found = `(${DEEP_QUERY_JS})(${selectorArgsJS(params.selector)})`;
-    const response = (await cdp.send('Runtime.evaluate', {
+    const response = await evaluateInBdgWorld(cdp, {
         expression: `(${LAYOUT_JS})(${found}, ${params.index ?? null}, ${LAYOUT_ELEMENT_LIMIT})`,
         returnByValue: true,
-    }));
+    });
     if (response.exceptionDetails) {
         throwIfInvalidSelector(response.exceptionDetails, params.selector);
         const err = operationFailedError('measure the elements', response.exceptionDetails.text);
@@ -269,9 +270,7 @@ async function measureSelector(cdp, params) {
  *   viewport through the iframe's own measurements.
  */
 async function measureNode(cdp, backendNodeId, objectGroup) {
-    const resolved = (await cdp
-        .send('DOM.resolveNode', { backendNodeId, objectGroup })
-        .catch((error) => {
+    const resolved = (await resolveNodeInBdgWorld(cdp, { backendNodeId, objectGroup }).catch((error) => {
         log.debug(`Node ${backendNodeId} not resolved: ${getErrorMessage(error)}`);
         return {};
     }));
@@ -326,14 +325,16 @@ function roundPage(page) {
     };
 }
 /**
- * Layout of one element.
+ * Layout of one element. A `display: contents` element (no box of its own)
+ * is placed by the box around its shown children.
  *
  * @param raw - Element measurements
  * @param page - Page layout (viewport size and scroll position)
  * @returns Element layout; `coveredBy` only for elements that are in view
  */
 function elementLayout(raw, page) {
-    const { rect } = raw.geometry;
+    const { content } = raw.geometry;
+    const rect = raw.computed.display === 'contents' && content ? content : raw.geometry.rect;
     const placement = classifyViewportPosition(raw.geometry, page.viewport);
     const inView = placement.inViewport === 'visible' || placement.inViewport === 'partly';
     const text = textPreview(raw.text);
@@ -354,6 +355,7 @@ function elementLayout(raw, page) {
         ...(inView && raw.cover && { coveredBy: raw.cover.element }),
         ...(inView && raw.cover?.transparent && { coverTransparent: true }),
         ...(raw.geometry.invisible && { invisible: raw.geometry.invisible }),
+        ...(raw.geometry.masked && { masked: raw.geometry.masked }),
         ...(raw.geometry.inert && { inert: true }),
         ...(raw.geometry.fixed && { fixed: true }),
         computed: raw.computed,

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

@@ -18,7 +18,7 @@ import type { FillResult, ClickResult } from '../../ipc/protocol/domTypes.js';
  * whitespace collapsed. A value cut to the field's maxlength sets
  * `truncatedTo`; a password mismatch gives masked values and both lengths.
  */
-export declare const FILL_VALUE_MISMATCH_JS = "(field, expected) => {\n  const type = (field.type || '').toLowerCase();\n  const actual = field.isContentEditable\n    ? (field.textContent || '')\n    : type === 'checkbox' || type === 'radio'\n      ? (field.checked ? 'checked' : 'unchecked')\n      : field.localName === 'select' && field.multiple\n        ? Array.from(field.selectedOptions).map((o) => o.value).join(', ')\n        : String(field.value);\n  const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');\n  const normalize = (text) => {\n    text = String(text);\n    if (field.isContentEditable) return text.replace(/\\s+/g, ' ').trim();\n    if (field.localName === 'textarea') return text.replace(/\\r\\n?/g, '\\n');\n    if (type === 'color') return text.trim().toLowerCase();\n    if (type === 'email') return text.trim();\n    if (type === 'time' || type === 'datetime-local') return time(text);\n    return text;\n  };\n  const numeric = (type === 'number' || type === 'range') && actual.trim() !== '' && String(expected).trim() !== '';\n  const same = numeric ? Number(actual) === Number(expected) : normalize(actual) === normalize(expected);\n  if (same) return undefined;\n  if (type === 'password') {\n    const mask = (text) => (text === '' ? '' : '********');\n    return { expected: mask(expected), actual: mask(actual), expectedLength: expected.length, actualLength: actual.length };\n  }\n  const cut = field.maxLength > 0 && actual.length === field.maxLength && expected.length > actual.length &&\n    expected.startsWith(actual);\n  return cut ? { expected: expected, actual: actual, truncatedTo: actual.length } : { expected: expected, actual: actual };\n}";
+export declare const FILL_VALUE_MISMATCH_JS = "(field, expected) => {\n  const type = (field.type || '').toLowerCase();\n  const actual = field.isContentEditable\n    ? (field.textContent || '')\n    : type === 'checkbox' || type === 'radio'\n      ? (field.checked ? 'checked' : 'unchecked')\n      : field.localName === 'select' && field.multiple\n        ? ((list) => {\n  const items = [];\n  for (let i = 0; i < list.length; i++) items[items.length] = list[i];\n  return items;\n})(field.selectedOptions).map((o) => o.value).join(', ')\n        : String(field.value);\n  const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');\n  const normalize = (text) => {\n    text = String(text);\n    if (field.isContentEditable) return text.replace(/\\s+/g, ' ').trim();\n    if (field.localName === 'textarea') return text.replace(/\\r\\n?/g, '\\n');\n    if (type === 'color') return text.trim().toLowerCase();\n    if (type === 'email') return text.trim();\n    if (type === 'time' || type === 'datetime-local') return time(text);\n    return text;\n  };\n  const numeric = (type === 'number' || type === 'range') && actual.trim() !== '' && String(expected).trim() !== '';\n  const same = numeric ? Number(actual) === Number(expected) : normalize(actual) === normalize(expected);\n  if (same) return undefined;\n  if (type === 'password') {\n    const mask = (text) => (text === '' ? '' : '********');\n    return { expected: mask(expected), actual: mask(actual), expectedLength: expected.length, actualLength: actual.length };\n  }\n  const cut = field.maxLength > 0 && actual.length === field.maxLength && expected.length > actual.length &&\n    expected.startsWith(actual);\n  return cut ? { expected: expected, actual: actual, truncatedTo: actual.length } : { expected: expected, actual: actual };\n}";
 /**
  * Page-side list of the other text-like fields of a field's form (of the
  * document when it has none), with their values: taken before a fill, so
@@ -41,6 +41,13 @@ export declare const FILL_REFUSAL_JS: string;
  * field itself or its shadow root has none or several.
  */
 export declare const SHADOW_FIELD_JS = "(el) => {\n  if (!el.shadowRoot || /^(input|textarea|select)$/.test(el.localName) || el.isContentEditable) return null;\n  const fields = el.shadowRoot.querySelectorAll('input:not([type=\"hidden\"]), textarea, select, [contenteditable]:not([contenteditable=\"false\"])');\n  return fields.length === 1 ? fields[0] : null;\n}";
+/**
+ * Page-side: fire a bubbling, non-cancelable event of a type on an element,
+ * like `new Event(type, { bubbles: true })`. The event comes from
+ * `document.createEvent`, which keeps working on pages that replace the
+ * `Event` constructor (MooTools 1.2 does).
+ */
+export declare const FIRE_EVENT_JS = "(target, type) => {\n  const event = target.ownerDocument.createEvent('Event');\n  event.initEvent(type, true, false);\n  return target.dispatchEvent(event);\n}";
 /**
  * JavaScript function to fill an input element in a React-compatible way.
  *
@@ -67,7 +74,7 @@ export declare const REACT_FILL_SCRIPT: string;
  * name (`input#first-name`, `input[name="first"]`) or else its
  * description, or undefined. Passwords are never searched for.
  */
-export declare const MOVED_VALUE_JS = "(field, expected, before) => {\n  const wanted = String(expected).trim();\n  if (!before || wanted.length < 2 || (field.type || '').toLowerCase() === 'password') return undefined;\n  const other = Array.from(before.keys()).find((f) =>\n    String(f.value).trim() === wanted && String(before.get(f)).trim() !== wanted);\n  if (!other) return undefined;\n  if (other.id) return other.localName + '#' + other.id;\n  return other.name ? other.localName + '[name=\"' + other.name + '\"]' : ((node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : ''))(other);\n}";
+export declare const MOVED_VALUE_JS: string;
 /**
  * Page script reading back the field the last fill left in
  * `window.__bdgFillCheck`, after one macrotask (so frameworks that render
@@ -78,11 +85,11 @@ export declare const MOVED_VALUE_JS = "(field, expected, before) => {\n  const w
  * value matches, nothing was left (the page navigated) or the field left the
  * page.
  */
-export declare const FILL_READ_BACK_SCRIPT = "(() => {\n  const check = window.__bdgFillCheck;\n  delete window.__bdgFillCheck;\n  if (!check) return null;\n  const readBack = () => {\n    if (!check.el.isConnected) return null;\n    const mismatch = ((field, expected) => {\n  const type = (field.type || '').toLowerCase();\n  const actual = field.isContentEditable\n    ? (field.textContent || '')\n    : type === 'checkbox' || type === 'radio'\n      ? (field.checked ? 'checked' : 'unchecked')\n      : field.localName === 'select' && field.multiple\n        ? Array.from(field.selectedOptions).map((o) => o.value).join(', ')\n        : String(field.value);\n  const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');\n  const normalize = (text) => {\n    text = String(text);\n    if (field.isContentEditable) return text.replace(/\\s+/g, ' ').trim();\n    if (field.localName === 'textarea') return text.replace(/\\r\\n?/g, '\\n');\n    if (type === 'color') return text.trim().toLowerCase();\n    if (type === 'email') return text.trim();\n    if (type === 'time' || type === 'datetime-local') return time(text);\n    return text;\n  };\n  const numeric = (type === 'number' || type === 'range') && actual.trim() !== '' && String(expected).trim() !== '';\n  const same = numeric ? Number(actual) === Number(expected) : normalize(actual) === normalize(expected);\n  if (same) return undefined;\n  if (type === 'password') {\n    const mask = (text) => (text === '' ? '' : '********');\n    return { expected: mask(expected), actual: mask(actual), expectedLength: expected.length, actualLength: actual.length };\n  }\n  const cut = field.maxLength > 0 && actual.length === field.maxLength && expected.length > actual.length &&\n    expected.startsWith(actual);\n  return cut ? { expected: expected, actual: actual, truncatedTo: actual.length } : { expected: expected, actual: actual };\n})(check.el, check.expected);\n    if (!mismatch) return null;\n    const movedTo = ((field, expected, before) => {\n  const wanted = String(expected).trim();\n  if (!before || wanted.length < 2 || (field.type || '').toLowerCase() === 'password') return undefined;\n  const other = Array.from(before.keys()).find((f) =>\n    String(f.value).trim() === wanted && String(before.get(f)).trim() !== wanted);\n  if (!other) return undefined;\n  if (other.id) return other.localName + '#' + other.id;\n  return other.name ? other.localName + '[name=\"' + other.name + '\"]' : ((node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : ''))(other);\n})(check.el, check.expected, check.before);\n    return movedTo ? Object.assign(mismatch, { movedTo: movedTo }) : mismatch;\n  };\n  return new Promise((resolve) => {\n    const channel = new MessageChannel();\n    channel.port1.onmessage = () => {\n      channel.port1.close();\n      resolve(readBack());\n    };\n    channel.port2.postMessage(null);\n  });\n})()";
+export declare const FILL_READ_BACK_SCRIPT: string;
 /**
  * JavaScript function to locate an element for clicking.
  *
- * Scrolls the element into view and reports its center point and whether it
+ * Scrolls the element into view (reporting how far the page moved) and reports its center point and whether it
  * is the topmost element there (`hittable`). It does not click; see
  * `clickElement`, which dispatches real mouse events or falls back to
  * `el.click()`.
@@ -98,6 +105,9 @@ export declare const FILL_READ_BACK_SCRIPT = "(() => {\n  const check = window._
  * a press, a probe (`window.__bdgPressProbe`) records whether the press
  * reaches the element, and otherwise which element it landed on: a browser
  * dialog or bubble can swallow input while the page looks normal.
+ * Slotted text hit-tests as its shadow host, so an element in a shadow root
+ * that shows slotted content (a button labelled through a `<slot>`) is
+ * topmost where its host is hit.
  */
 export declare const CLICK_ELEMENT_SCRIPT: string;
 /**