browser-debugger-cli 0.11.0 → 0.13.0

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

@@ -26,6 +26,10 @@ export interface RawTreeNode {
     display: string;
     /** Text of an element without block-level children */
     text?: string;
+    /** Reached through a slot or a `display: contents` wrapper (`slot.label`, `div.row (contents)`) */
+    via?: string;
+    /** In the shadow root of its parent */
+    shadow?: boolean;
     children?: RawTreeNode[];
     /** Rendered element children (at the depth limit) */
     childCount?: number;
@@ -38,6 +42,15 @@ export interface RawBackground {
     color: string;
     /** Has a background image or gradient */
     image: boolean;
+    /** Its own opacity, below 1 (it fades its background and everything inside it) */
+    opacity?: number;
+}
+/** A rule that would set a property if its `@media`/`@supports` condition applied */
+export interface InactiveRule {
+    selector: string;
+    /** e.g. `@media (max-width: 600px)` */
+    condition: string;
+    value: string;
 }
 /** What {@link INSPECT_PAGE_JS} returns */
 export interface RawInspect {
@@ -56,15 +69,31 @@ export interface RawInspect {
         style: string;
         weight: string;
     };
-    /** Has text to describe: own text, only inline content with text, or a form control */
+    /**
+     * Has text to describe: a text field or select, its own text where most
+     * of its text is, or only inline content with text
+     */
     textual: boolean;
     formControl: boolean;
+    /**
+     * Label of the descendant that draws most of the text (`abbr`,
+     * `slot.button__label`) when it is not the element itself; its styles are
+     * the text's
+     */
+    textHolder?: string;
+    /** Its text (the element, or the descendant that draws it) has a box and is not `visibility: hidden` */
+    rendered: boolean;
+    /** Visible text is drawn in it (or it is a text field or select) */
+    hasText: boolean;
+    /**
+     * The first family of the text's `font-family` is a web font (`@font-face`)
+     * the page loaded: whatever name the font file gives, it is not a fallback
+     */
+    familyLoaded?: boolean;
     /** Replaced element (img, svg and its shapes, video, canvas, iframe, embed, object, form controls): sized by its content */
     replaced?: boolean;
     /** An SVG element (SVG properties are not noise for it) */
     svg?: boolean;
-    /** A text node is a direct child (the rendered font is read from the element itself) */
-    ownText: boolean;
     /** Computed (not resolved) width and height: `auto`, `200px`, `50%`, … */
     typed: {
         width: string;
@@ -86,6 +115,8 @@ export interface RawInspect {
         left?: number;
         right?: number;
     };
+    /** Its text is cut off: clipped by `overflow` (ellipsis or not) or by a line clamp, on it or its text holder */
+    truncated?: boolean;
     /** Content size when it overflows the box */
     scroll?: {
         w: number;
@@ -99,6 +130,12 @@ export interface RawInspect {
     canvasDark: boolean;
     /** Opacity of the element times that of its ancestors */
     opacity?: number;
+    /**
+     * What makes the text's contrast approximate: blend modes and filters on
+     * it or its ancestors, painted content behind it that is not an ancestor
+     * (a canvas, a positioned layer) or on top of it
+     */
+    paintRisks?: string[];
     tree?: RawTreeNode[];
     hiddenChildren: number;
     /** Children the walk did not reach ({@link TREE_NODE_CAP}) */
@@ -109,24 +146,87 @@ export interface RawInspect {
      * given per side, e.g. `top 1px solid … / right 0px none …`
      */
     props?: Record<string, string>;
+    /** Font size of the root element (px), for rem custom properties in `--props` */
+    rootFontSize?: number;
     /** `--props` names the browser does not know as CSS properties */
     unknownProps?: string[];
-    /** Properties of running CSS transitions, and names of running animations */
+    /** The `--why` property is not a CSS property */
+    unknownWhy?: boolean;
+    /** Longhands of the `--why` property when it is a shorthand (as the browser expands it) */
+    whyLonghands?: string[];
+    /** Computed value of the `--why` shorthand (`getComputedStyle` writes it as one value) */
+    whyComputed?: string;
+    /** Rules for the element that set the `--why` property under a condition that does not apply now */
+    whyInactive?: InactiveRule[];
+    /** 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, and the property names asked for with `--props`
- * (or null).
+ * 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) {\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 children = (n) => {\n    const out = [];\n    const add = (c) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        (assigned.length ? assigned : Array.from(c.children)).forEach(add);\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach(add);\n      } else {\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach(add);\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, flatParent, layoutParent, children, rendered, container };\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 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) parts.push('shadow root of <' + describe(root.host) + '>');\n  return parts.join(' > ');\n})(el),\n    content: content,\n    textual: formControl || (content !== '' && !tree.container(el)),\n    formControl: formControl,\n    replaced: el instanceof SVGElement || /^(img|video|canvas|iframe|embed|object|input|textarea|select|button|meter|progress)$/.test(el.localName),\n    svg: el.namespaceURI === 'http://www.w3.org/2000/svg',\n    ownText: Array.from(el.childNodes).some((n) => n.nodeType === 3 && n.data.trim() !== ''),\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').map((a) => a.transitionProperty || a.animationName || 'animation'))] : []\n  };\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.unknownProps = props.filter((name) => !known(name));\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 edge = (side) => parseFloat(ps['border-' + side + '-width']) + parseFloat(ps['padding-' + side]);\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 !== el && tree.rendered(n) && !/^(absolute|fixed)$/.test(tree.style(n).position);\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    backgrounds.push({ color: s.backgroundColor, image: s.backgroundImage !== 'none' });\n    opacity *= Number(s.opacity) || 0;\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})(el, tree, view),\n    ((el, tree, textOf, depth) => {\n  let budget = 400;\n  let skipped = 0;\n  const labelOf = (n) => n.localName + (n.id ? '#' + n.id : n.classList && n.classList.length ? '.' + n.classList[0] : '');\n  const walk = (kids, level, origin) => {\n    const shown = kids.filter(tree.rendered);\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: labelOf(n), x: r.left - origin.left, y: r.top - origin.top, w: r.width, h: r.height, display: tree.style(n).display };\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
- * (`display: contents` skipped, through shadow roots and slots), or
- * `"textHolder"`, for an element whose text is in a descendant
- * (`<button><span>Buy</span></button>`), the first element holding text,
- * whose rendered font is the one shown. Null when there is none.
+ * (`display: contents` skipped, through shadow roots and slots),
+ * `"textHolder"`, the element whose styles draw most of its text
+ * ({@link TEXT_HOLDER_JS}; the element itself when that is its own text), or
+ * `"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: string;
+/** Where a custom property is set, as {@link VARIABLE_SETTERS_JS} finds it */
+export interface VariableSetter {
+    /** Selector of the rule, or `@keyframes name` */
+    selector: string;
+    /** Value as written (`inherit`, `` for an empty one) */
+    value: string;
+    /** Set in a keyframe of this animation */
+    keyframes?: string;
+    /** The rule matches the element or an ancestor now (null: bdg cannot test its selector) */
+    matches: boolean | null;
+    /** The `@media` or `@supports` condition it is under that does not apply now */
+    condition?: string;
+}
+/**
+ * Page-side function run on the element (`this`): for each custom property
+ * name, a rule in the page's stylesheets (same-origin, `@import`ed,
+ * constructed and the element's shadow root's) that sets it, keyframes
+ * included: the first one that matches the element or an ancestor now
+ * (across shadow roots, so `:root` matches inside a component), else the
+ * first that would match without its state (`.btn:hover` for this `.btn`),
+ * else the first one, with the `@media`/`@supports` condition it is under
+ * when that does not apply. At most 20000 rules are read; cross-origin sheets are
+ * skipped.
  */
-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 children = (n) => {\n    const out = [];\n    const add = (c) => {\n      if (skipped.test(c.localName)) return;\n      if (c.localName === 'slot') {\n        const assigned = c.assignedElements({ flatten: true });\n        (assigned.length ? assigned : Array.from(c.children)).forEach(add);\n      } else if (style(c).display === 'contents') {\n        Array.from((c.shadowRoot || c).children).forEach(add);\n      } else {\n        out.push(c);\n      }\n    };\n    Array.from((n.shadowRoot || n).children).forEach(add);\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, flatParent, layoutParent, children, rendered, container };\n})(this.ownerDocument.defaultView);\n  if (which === 'parent') return tree.layoutParent(this);\n  const walker = this.ownerDocument.createTreeWalker(this, NodeFilter.SHOW_TEXT);\n  while (walker.nextNode()) {\n    if (walker.currentNode.data.trim() !== '') return walker.currentNode.parentElement;\n  }\n  return null;\n}";
+export declare const VARIABLE_SETTERS_JS = "function (names) {\n  const el = this;\n  const view = el.ownerDocument.defaultView;\n  const matching = {};\n  const related = {};\n  const other = {};\n  let budget = 20000;\n  const closestAcross = (selector) => {\n    for (let n = el; n; n = n.getRootNode().host || null) {\n      if (n.closest(selector)) return true;\n    }\n    return false;\n  };\n  const matches = (selector) => {\n    try { return closestAcross(selector); } catch (e) { return null; }\n  };\n  const stateless = (selector) => selector.replace(/:(focus-visible|focus-within|focus|hover|active|visited|checked|target|open)(?![\\w-])/g, '');\n  const applies = (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 record = (name, rule, keyframes, condition) => {\n    const selector = keyframes ? '@keyframes ' + keyframes : rule.selectorText || '';\n    const match = keyframes || condition ? false : matches(selector);\n    const setter = Object.assign(\n      { selector: selector, value: rule.style.getPropertyValue(name).trim(), matches: match },\n      keyframes ? { keyframes: keyframes } : {},\n      condition ? { condition: condition } : {}\n    );\n    if (match && !matching[name]) matching[name] = setter;\n    else if (!match && !keyframes && !related[name] && matches(stateless(selector))) related[name] = setter;\n    else if (!match && !other[name]) other[name] = setter;\n  };\n  const visit = (rules, keyframes, condition) => {\n    for (const rule of Array.from(rules)) {\n      if (budget-- <= 0 || names.every((name) => matching[name])) return;\n      if (typeof CSSImportRule !== 'undefined' && rule instanceof CSSImportRule) {\n        try { if (rule.styleSheet) visit(rule.styleSheet.cssRules, keyframes, condition); } catch (e) { continue; }\n        continue;\n      }\n      if (typeof CSSKeyframesRule !== 'undefined' && rule instanceof CSSKeyframesRule) {\n        visit(rule.cssRules, rule.name, condition);\n        continue;\n      }\n      if (rule.style) {\n        for (const name of names) {\n          if (!matching[name] && Array.from(rule.style).includes(name)) record(name, rule, keyframes, condition);\n        }\n      }\n      if (rule.cssRules) visit(rule.cssRules, keyframes, condition || applies(rule));\n    }\n  };\n  const sheets = [];\n  for (const scope of new Set([el.getRootNode(), el.ownerDocument])) {\n    sheets.push(...Array.from(scope.styleSheets || []), ...Array.from(scope.adoptedStyleSheets || []));\n  }\n  for (const sheet of sheets) {\n    try { visit(sheet.cssRules, null, null); } catch (e) { continue; }\n  }\n  return Object.assign({}, other, related, matching);\n}";
 //# sourceMappingURL=inspectScripts.d.ts.map