browser-debugger-cli 0.11.0 → 0.12.0

package/dist/runtime/dom/elementInfo.js

@@ -225,7 +225,8 @@ export const ELEMENT_IDENTITY_JS = `(el) => {
 }`;
 /**
  * Page-side location of an element: the iframes it is in (outermost first)
- * and the shadow root holding it, e.g. `iframe#pay > shadow root of <x-card>`;
+ * and the shadow root holding it, with the host's first class and light-DOM
+ * text, e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
  * empty for the main document.
  */
 export const ELEMENT_CONTEXT_JS = `(el) => {
@@ -237,7 +238,12 @@ export const ELEMENT_CONTEXT_JS = `(el) => {
     doc = frame.ownerDocument;
   }
   const root = el.getRootNode();
-  if (root.host) parts.push('shadow root of <' + describe(root.host) + '>');
+  if (root.host) {
+    const host = root.host;
+    const label = describe(host) + (!host.id && host.classList.length ? '.' + host.classList[0] : '');
+    const text = (host.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 30);
+    parts.push('shadow root of <' + label + (text ? ' "' + text + '"' : '') + '>');
+  }
   return parts.join(' > ');
 }`;
 /**

package/dist/runtime/dom/formFillHelpers/fill.js

@@ -7,7 +7,7 @@ import * as path from 'node:path';
 import { CommandError } from '../../../errors/index.js';
 import { fileNotFoundError, uploadDirectoryError, singleFileInputError, fillableElementNotFoundError, clickableElementNotFoundError, clickTargetDetachedError, unexpectedResponseFormatError, operationFailedError, pressNotReceivedError, unreachableElementError, } from '../../../errors/messages.js';
 import { escapeValueForJS, formatScriptExecutionError, throwIfInvalidSelector, withMultipleMatchesWarning, withValueMismatchWarning, } from './shared.js';
-import { FILL_READ_BACK_SCRIPT, REACT_FILL_SCRIPT, CLICK_ELEMENT_SCRIPT, isFillResult, isClickResult, } from '../reactEventHelpers.js';
+import { FILL_READ_BACK_SCRIPT, REACT_FILL_SCRIPT, CLICK_ELEMENT_SCRIPT, SHADOW_FIELD_JS, isFillResult, isClickResult, } from '../reactEventHelpers.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS, selectorArgsJS } from '../targetNode.js';
 import { createLogger } from '../../../ui/logging/index.js';
 import { CLICK_NOT_RECEIVED_WARNING, POINTER_ACTION_DONE, POINTER_ACTION_NOUN, domClickFallbackWarning, } from '../../../ui/messages/commands.js';
@@ -176,7 +176,7 @@ async function setFileInput(cdp, selector, value, options) {
         return problem;
     try {
         const located = (await cdp.send('Runtime.evaluate', {
-            expression: `((el) => (${LABEL_CONTROL_JS})(el) || el)((${FIND_ELEMENTS_JS})(${selectorArgsJS(selector)})[${options.index ?? 0}])`,
+            expression: `((el) => (${LABEL_CONTROL_JS})(el) || (${SHADOW_FIELD_JS})(el) || el)((${FIND_ELEMENTS_JS})(${selectorArgsJS(selector)})[${options.index ?? 0}])`,
             objectGroup: UPLOAD_OBJECT_GROUP,
         }));
         if (located.exceptionDetails)

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

@@ -25,4 +25,11 @@ import type { InspectResult } from '../../ipc/protocol/inspectTypes.js';
  *   selector or unknown property, (87) the cached element left the page
  */
 export declare function inspectElement(cdp: CDPConnection, params: DomInspectCommand): Promise<InspectResult>;
+/**
+ * Enable DOM and CSS once per connection (kept on: CSS.enable replays every
+ * stylesheet, which costs up to a few hundred ms on large sites the first time).
+ *
+ * @param cdp - CDP connection
+ */
+export declare function enableStyleDomains(cdp: CDPConnection): Promise<void>;
 //# sourceMappingURL=inspect.d.ts.map

package/dist/runtime/dom/inspect.js

@@ -13,13 +13,14 @@
  * read (no cascade).
  */
 import { CommandError } from '../../errors/index.js';
-import { operationFailedError, unknownCssPropertyError } from '../../errors/messages.js';
+import { operationFailedError, unknownCssPropertyError, whyAllPropertyError, } from '../../errors/messages.js';
 import { throwIfInvalidSelector } from './formFillHelpers/shared.js';
 import { selectedProps } from './inspectAllStyles.js';
 import { buildCascadeFields } from './inspectCascadeModel.js';
 import { buildInspectResult } from './inspectModel.js';
 import { matchedStyles, sourceLabel, trackStyleSheets } from './inspectRules.js';
-import { INSPECT_PAGE_JS, RELATED_NODE_JS } from './inspectScripts.js';
+import { explainUnsetVariables } from './inspectHints.js';
+import { INSPECT_PAGE_JS, RELATED_NODE_JS, VARIABLE_SETTERS_JS, } from './inspectScripts.js';
 import { DEFAULT_TREE_DEPTH, DEFAULT_TREE_LIMIT } from './inspectTree.js';
 import { inspectLayout } from './layout.js';
 import { DEEP_QUERY_JS, missingElementError, selectorArgsJS } from './targetNode.js';
@@ -36,12 +37,18 @@ const HINTS_BUDGET_MS = 1000;
 const RULES_BUDGET_MS = 5000;
 /** Distinguishes the object groups of concurrent calls */
 let groupCounter = 0;
-/** Page-side choice of a match: the index asked for, else the first rendered one (the first when none is) */
+/**
+ * Page-side choice of a match: the index asked for, else the first visible
+ * one (rendered, not `visibility: hidden`, not `opacity: 0`), else the first
+ * rendered one, else the first
+ */
 const PICK_MATCH_JS = `function (i) {
   if (i !== null) return i;
-  const shown = (el) => (el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0);
-  const first = Array.prototype.findIndex.call(this, shown);
-  return first < 0 ? 0 : first;
+  const check = (el, options) => (el.checkVisibility ? el.checkVisibility(options) : el.getClientRects().length > 0);
+  const visible = Array.prototype.findIndex.call(this, (el) => check(el, { visibilityProperty: true, opacityProperty: true }));
+  if (visible >= 0) return visible;
+  const rendered = Array.prototype.findIndex.call(this, (el) => check(el, {}));
+  return rendered < 0 ? 0 : rendered;
 }`;
 /**
  * Inspect one element.
@@ -54,10 +61,20 @@ const PICK_MATCH_JS = `function (i) {
  */
 export async function inspectElement(cdp, params) {
     const started = Date.now();
+    if (params.why === 'all') {
+        const err = whyAllPropertyError();
+        throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.INVALID_ARGUMENTS);
+    }
+    const pseudoOf = /::?(before|after)\s*$/i.exec(params.selector)?.[1]?.toLowerCase();
+    const request = pseudoOf
+        ? { ...params, selector: params.selector.replace(/::?(before|after)\s*$/i, '') }
+        : params;
     const objectGroup = `bdg-inspect-${++groupCounter}`;
     try {
-        const found = await findElement(cdp, params, objectGroup);
-        const sources = await readSources(cdp, found.objectId, params, objectGroup);
+        const found = await findElement(cdp, request, objectGroup);
+        const sources = await readSources(cdp, found.objectId, request, objectGroup);
+        if (sources.raw.unknownWhy)
+            throwUnknownProperties([params.why ?? ''], sources);
         const propValues = sources.props ? checkedProps(sources.props, sources) : undefined;
         const built = buildInspectResult(sources, {
             selector: params.selector,
@@ -67,8 +84,14 @@ export async function inspectElement(cdp, params) {
             ...(params.all && { all: true }),
             ...(propValues && { propValues }),
         });
-        const withCascade = { ...built, ...cascadeFields(cdp, sources) };
-        const result = found.picked ? { ...withCascade, picked: found.picked } : withCascade;
+        const cascade = cascadeFields(cdp, sources);
+        const hints = cascade.hints && (await explainedHints(cdp, found.objectId, cascade.hints));
+        const withCascade = { ...built, ...cascade, ...(hints && { hints }) };
+        const result = {
+            ...withCascade,
+            ...(found.picked && { picked: found.picked }),
+            ...(pseudoOf && { pseudoOf: `::${pseudoOf}` }),
+        };
         log.debug(`Inspected ${result.element} in ${Date.now() - started} ms`);
         return result;
     }
@@ -78,6 +101,25 @@ export async function inspectElement(cdp, params) {
             .catch((error) => log.debug(`Object group not released: ${getErrorMessage(error)}`));
     }
 }
+/**
+ * Hints with unset variables told where the page sets them
+ * ({@link VARIABLE_SETTERS_JS}); unchanged when there are none or the
+ * search fails.
+ *
+ * @param cdp - CDP connection
+ * @param objectId - The element
+ * @param hints - Hints
+ * @returns Hints
+ */
+async function explainedHints(cdp, objectId, hints) {
+    const names = [...new Set(hints.flatMap((hint) => hint.variables ?? []))];
+    if (names.length === 0)
+        return hints;
+    const setters = await callOn(cdp, objectId, VARIABLE_SETTERS_JS, [
+        names,
+    ]);
+    return setters ? explainUnsetVariables(hints, setters) : hints;
+}
 /**
  * The properties asked for with `--props`.
  *
@@ -87,9 +129,19 @@ export async function inspectElement(cdp, params) {
  * @throws CommandError (81) for a name no value was found for
  */
 function checkedProps(names, sources) {
-    const { props, unknown } = selectedProps(names, sources.style, sources.raw.props, sources.raw.unknownProps);
+    const { props, unknown } = selectedProps(names, sources.style, sources.raw.props, sources.raw.unknownProps, sources.raw.rootFontSize);
     if (unknown.length === 0)
         return props;
+    return throwUnknownProperties(unknown, sources);
+}
+/**
+ * Reject names that are not CSS properties, with the closest computed ones.
+ *
+ * @param unknown - Names
+ * @param sources - What was read (computed property names)
+ * @throws CommandError (81) always
+ */
+function throwUnknownProperties(unknown, sources) {
     const suggestions = unknown.flatMap((name) => findSimilar(name, Object.keys(sources.style), { maxSuggestions: 1 }));
     const err = unknownCssPropertyError(unknown, suggestions);
     throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.INVALID_ARGUMENTS);
@@ -130,11 +182,14 @@ function cascadeFields(cdp, sources) {
         style: sources.style,
         parentStyle: sources.parentStyle,
         replaced: sources.raw.replaced === true,
-        formControl: sources.raw.formControl,
+        formControl: sources.raw.formControl && sources.raw.hasText,
         ...(sources.hints === false && { hints: false }),
         label: (declaration) => sourceLabel(declaration, cdp),
         ...(sources.rules && { rules: true }),
         ...(sources.why && { why: sources.why }),
+        ...(sources.raw.whyLonghands && { whyLonghands: sources.raw.whyLonghands }),
+        ...(sources.raw.whyComputed && { whyComputed: sources.raw.whyComputed }),
+        ...(sources.raw.whyInactive && { whyInactive: sources.raw.whyInactive }),
         ...(sources.props && { props: sources.props }),
     });
 }
@@ -269,7 +324,7 @@ async function readSources(cdp, objectId, params, objectGroup) {
     return {
         raw,
         ...styles,
-        fonts: raw.ownText || raw.formControl ? styles.fonts.node : styles.fonts.textHolder,
+        fonts: raw.textHolder ? styles.fonts.textHolder : styles.fonts.node,
         ...measured,
         ...(params.rules && { rules: true }),
         ...(params.why && { why: params.why }),
@@ -290,6 +345,7 @@ async function readPage(cdp, objectId, params) {
     const raw = await callOn(cdp, objectId, INSPECT_PAGE_JS, [
         params.props || params.all ? 0 : (params.tree ?? DEFAULT_TREE_DEPTH),
         params.props ?? null,
+        params.why ?? null,
     ]);
     if (raw)
         return raw;
@@ -297,11 +353,12 @@ async function readPage(cdp, objectId, params) {
     throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.SCRIPT_ERROR);
 }
 /**
- * The backend node id of the element's layout parent or first text holder.
+ * The backend node id of the element's layout parent, the element that
+ * draws most of its text, or the parent of that text's nodes.
  *
  * @param cdp - CDP connection
  * @param objectId - The element
- * @param which - `parent` or `textHolder`
+ * @param which - `parent`, `textHolder` or `fontHolder`
  * @param objectGroup - Object group for handles
  * @returns Backend node id, or undefined when there is none
  */
@@ -316,8 +373,8 @@ async function relatedNode(cdp, objectId, which, objectGroup) {
     return id ? (await describe(cdp, id)).backendNodeId : undefined;
 }
 /**
- * The backend node ids of the element, its layout parent, its first text
- * holder and its generated pseudo-elements.
+ * The backend node ids of the element, its layout parent, its text holder
+ * (with the parent of its text nodes) and its generated pseudo-elements.
  *
  * @param cdp - CDP connection
  * @param objectId - The element
@@ -325,10 +382,11 @@ async function relatedNode(cdp, objectId, which, objectGroup) {
  * @returns Backend node ids
  */
 async function relatedNodes(cdp, objectId, objectGroup) {
-    const [node, parent, textHolder] = await Promise.all([
+    const [node, parent, textHolder, fontHolder] = await Promise.all([
         describe(cdp, objectId),
         relatedNode(cdp, objectId, 'parent', objectGroup),
         relatedNode(cdp, objectId, 'textHolder', objectGroup),
+        relatedNode(cdp, objectId, 'fontHolder', objectGroup),
     ]);
     const pseudo = (node.pseudoElements ?? [])
         .filter((p) => p.pseudoType === 'before' || p.pseudoType === 'after')
@@ -339,7 +397,8 @@ async function relatedNodes(cdp, objectId, objectGroup) {
     return {
         node: node.backendNodeId,
         ...(parent && { parent }),
-        ...(textHolder && { textHolder }),
+        ...(textHolder && textHolder !== node.backendNodeId && { textHolder }),
+        ...(fontHolder && { fontHolder }),
         pseudo,
     };
 }
@@ -392,6 +451,7 @@ async function nodeIdLookup(cdp, related) {
         related.node,
         related.parent,
         related.textHolder,
+        related.fontHolder,
         ...related.pseudo.map((p) => p.backendNodeId),
     ];
     const ids = await pushNodes(cdp, order.filter((id) => id !== undefined));
@@ -408,18 +468,23 @@ async function nodeIdLookup(cdp, related) {
 async function readStyles(cdp, related, params) {
     await enableStyleDomains(cdp);
     const nodeIdOf = await nodeIdLookup(cdp, related);
-    const [matched, style, parentStyle, nodeFonts, holderFonts, size, pseudo] = await Promise.all([
+    const optionalStyle = (backendNodeId) => backendNodeId === undefined
+        ? Promise.resolve(undefined)
+        : computedStyle(cdp, nodeIdOf(backendNodeId));
+    const [matched, style, parentStyle, holderStyle, nodeFonts, holderFonts, size, pseudo] = await Promise.all([
         readMatched(cdp, nodeIdOf(related.node), params),
         computedStyle(cdp, nodeIdOf(related.node)),
-        related.parent === undefined ? undefined : computedStyle(cdp, nodeIdOf(related.parent)),
+        optionalStyle(related.parent),
+        optionalStyle(related.textHolder),
         platformFonts(cdp, nodeIdOf(related.node)),
-        platformFonts(cdp, nodeIdOf(related.textHolder)),
+        platformFonts(cdp, nodeIdOf(related.fontHolder)),
         borderBoxSize(cdp, related.node),
         Promise.all(related.pseudo.map((p) => pseudoSource(cdp, p.type, p.backendNodeId, nodeIdOf(p.backendNodeId)))),
     ]);
     return {
         style,
         ...(parentStyle && { parentStyle }),
+        ...(holderStyle && { holderStyle }),
         pseudo,
         fonts: { node: nodeFonts, textHolder: holderFonts },
         ...(size && { size }),
@@ -466,7 +531,7 @@ async function pseudoSource(cdp, type, backendNodeId, nodeId) {
  *
  * @param cdp - CDP connection
  */
-async function enableStyleDomains(cdp) {
+export async function enableStyleDomains(cdp) {
     if (stylesEnabled.has(cdp))
         return;
     trackStyleSheets(cdp);

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

@@ -3,13 +3,13 @@
  *
  * `--all` lists every computed longhand that is not noise and not its
  * default, collapsed into shorthands (margin, padding, inset, border,
- * radius, overflow, gap, flex, grid area, outline, animation). Defaults are
+ * radius, overflow, gap, flex, grid area, outline, animation, transition). Defaults are
  * the CSS initial values as Chrome computes them; the UA stylesheet's
  * per-tag values (a `<p>`'s margins, a button's padding) are real values and
  * are listed. Display, font, size, line height and color are always listed.
  *
  * Noise: custom properties, logical duplicates of physical properties,
- * width/height (in the header), transitions, origins without a transform,
+ * width/height (in the header), origins without a transform,
  * colors that only repeat `color` (currentColor), properties of borders,
  * outlines and rules that are not drawn, SVG paint properties on HTML
  * elements, and vendor-prefixed internals.
@@ -34,15 +34,25 @@ export declare function isDefaultValue(name: string, value: string): boolean;
  * @returns Normalized value
  */
 export declare function normalizeProperty(name: string, value: string): string;
+/**
+ * A shorthand's computed value as `--all` writes it (`margin 0 8`,
+ * `outline 2 solid #f00`, `transition color 1s ease-in`).
+ *
+ * @param shorthand - Shorthand name
+ * @param style - Computed longhands
+ * @returns Value, or undefined for a shorthand `--all` does not collapse
+ */
+export declare function collapsedValue(shorthand: string, style: StyleMap): string | undefined;
 /**
  * Every computed longhand that is not noise and not a default, normalized
  * and collapsed into shorthands.
  *
  * @param style - Computed styles
  * @param svg - The element is an SVG element (SVG properties are listed)
+ * @param formControl - A form control (`appearance: none` is not its default)
  * @returns Properties and values
  */
-export declare function allStyles(style: StyleMap, svg: boolean): Record<string, string>;
+export declare function allStyles(style: StyleMap, svg: boolean, formControl?: boolean): Record<string, string>;
 /**
  * The properties asked for with `--props`, raw and normalized. CDP's
  * computed longhands come first; shorthands and custom properties come from
@@ -52,10 +62,12 @@ export declare function allStyles(style: StyleMap, svg: boolean): Record<string,
  * @param style - Computed longhands (CDP)
  * @param pageValues - Values the page read
  * @param pageUnknown - Names the page does not know as CSS properties
+ * @param rootFontSize - Root font size (px): a custom property that is one
+ *   rem length is also given in px
  * @returns Values by name (an unset custom property is empty), and the
  *   names that are not properties
  */
-export declare function selectedProps(names: readonly string[], style: StyleMap, pageValues: Record<string, string> | undefined, pageUnknown?: readonly string[]): {
+export declare function selectedProps(names: readonly string[], style: StyleMap, pageValues: Record<string, string> | undefined, pageUnknown?: readonly string[], rootFontSize?: number): {
     props: Record<string, InspectProp>;
     unknown: string[];
 };

package/dist/runtime/dom/inspectAllStyles.js

@@ -3,13 +3,13 @@
  *
  * `--all` lists every computed longhand that is not noise and not its
  * default, collapsed into shorthands (margin, padding, inset, border,
- * radius, overflow, gap, flex, grid area, outline, animation). Defaults are
+ * radius, overflow, gap, flex, grid area, outline, animation, transition). Defaults are
  * the CSS initial values as Chrome computes them; the UA stylesheet's
  * per-tag values (a `<p>`'s margins, a button's padding) are real values and
  * are listed. Display, font, size, line height and color are always listed.
  *
  * Noise: custom properties, logical duplicates of physical properties,
- * width/height (in the header), transitions, origins without a transform,
+ * width/height (in the header), origins without a transform,
  * colors that only repeat `color` (currentColor), properties of borders,
  * outlines and rules that are not drawn, SVG paint properties on HTML
  * elements, and vendor-prefixed internals.
@@ -98,6 +98,28 @@ const INITIAL_BY_VALUE = [
     ['collapse', 'white-space-collapse'],
     ['horizontal-tb', 'writing-mode'],
     ['isolate', 'unicode-bidi'],
+    ['rgb(0, 0, 0)', 'fill flood-color stop-color'],
+    ['1', 'fill-opacity flood-opacity stop-opacity stroke-opacity'],
+    ['rgb(255, 255, 255)', 'lighting-color'],
+    ['1px', 'stroke-width'],
+    ['4', 'stroke-miterlimit'],
+    ['butt', 'stroke-linecap'],
+    ['miter', 'stroke-linejoin'],
+    ['nonzero', 'fill-rule clip-rule'],
+    ['none', 'stroke stroke-dasharray marker-start marker-mid marker-end vector-effect'],
+    ['0px', 'stroke-dashoffset baseline-shift'],
+    [
+        'auto',
+        'shape-rendering dominant-baseline alignment-baseline buffered-rendering color-rendering',
+    ],
+    ['srgb', 'color-interpolation'],
+    ['linearrgb', 'color-interpolation-filters'],
+    ['all', 'transition-property'],
+    ['0s', 'transition-duration transition-delay'],
+    ['ease', 'transition-timing-function'],
+    ['normal', 'transition-behavior paint-order'],
+    ['start', 'text-anchor'],
+    ['rgba(0, 0, 0, 0.18)', '-webkit-tap-highlight-color'],
 ];
 /** Initial value per property ({@link INITIAL_BY_VALUE}) */
 const INITIAL_VALUES = new Map(INITIAL_BY_VALUE.flatMap(([value, names]) => names.split(' ').map((name) => [name, value])));
@@ -144,6 +166,7 @@ const NOISE = new Set([
 const LOGICAL = /((^|-)block(-|$)|(^|-)inline(-|$)|^inset-|-start-start|-start-end|-end-end|-end-start)/;
 /** Vendor-prefixed properties worth listing */
 const PREFIXED_KEPT = new Set([
+    '-webkit-tap-highlight-color',
     '-webkit-line-clamp',
     '-webkit-text-stroke-width',
     '-webkit-text-security',
@@ -161,7 +184,9 @@ const CURRENT_COLOR_ECHOES = /^(border-(top|right|bottom|left)-color|outline-col
  * @returns True when it is left out
  */
 function isNoise(name, style, svg) {
-    if (name.startsWith('--') || NOISE.has(name) || name.startsWith('transition'))
+    if (name.startsWith('--') || NOISE.has(name))
+        return true;
+    if (name.startsWith('transition') && style['transition-duration'] === '0s')
         return true;
     if (LOGICAL.test(name) && !name.endsWith('-axis'))
         return true;
@@ -266,7 +291,56 @@ const COLLAPSES = [
         ],
         write: (v) => v.join(' '),
     },
+    {
+        shorthand: 'transition',
+        longhands: [
+            'transition-property',
+            'transition-duration',
+            'transition-timing-function',
+            'transition-delay',
+            'transition-behavior',
+        ],
+        write: transitionList,
+    },
 ];
+/**
+ * A transition list from its longhands' comma lists, one transition per
+ * property, defaults left out (`background-color 0.25s ease-in, opacity 0.2s`).
+ *
+ * @param values - Property, duration, timing function, delay and behavior lists
+ * @returns Transition shorthand
+ */
+function transitionList(values) {
+    const lists = values.map((value) => value.split(/,\s*(?![^(]*\))/));
+    const [properties = []] = lists;
+    return properties
+        .map((property, i) => {
+        const at = (list) => list?.[i % list.length] ?? '';
+        const [duration, timing, delay, behavior] = lists.slice(1).map(at);
+        return [
+            property,
+            duration,
+            timing === 'ease' ? '' : timing,
+            delay === '0s' ? '' : delay,
+            behavior === 'normal' ? '' : behavior,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    })
+        .join(', ');
+}
+/**
+ * A shorthand's computed value as `--all` writes it (`margin 0 8`,
+ * `outline 2 solid #f00`, `transition color 1s ease-in`).
+ *
+ * @param shorthand - Shorthand name
+ * @param style - Computed longhands
+ * @returns Value, or undefined for a shorthand `--all` does not collapse
+ */
+export function collapsedValue(shorthand, style) {
+    const group = COLLAPSES.find((entry) => entry.shorthand === shorthand);
+    return group?.write(group.longhands.map((longhand) => normalizeProperty(longhand, style[longhand] ?? '')));
+}
 /**
  * Border longhands collapsed: one `border` when the four drawn sides are
  * equal, else one entry per drawn side.
@@ -337,13 +411,15 @@ function isUnsetOffset(name, value, style) {
  *
  * @param style - Computed styles
  * @param svg - The element is an SVG element (SVG properties are listed)
+ * @param formControl - A form control (`appearance: none` is not its default)
  * @returns Properties and values
  */
-export function allStyles(style, svg) {
+export function allStyles(style, svg, formControl = false) {
     const kept = new Map();
     const transformed = (style['transform'] ?? 'none') !== 'none';
     for (const [name, value] of Object.entries(style)) {
-        if (name === 'transform-origin' && transformed) {
+        const set = (name === 'transform-origin' && transformed) || (name === 'appearance' && formControl);
+        if (set) {
             kept.set(name, normalizeProperty(name, value));
             continue;
         }
@@ -364,10 +440,12 @@ export function allStyles(style, svg) {
  * @param style - Computed longhands (CDP)
  * @param pageValues - Values the page read
  * @param pageUnknown - Names the page does not know as CSS properties
+ * @param rootFontSize - Root font size (px): a custom property that is one
+ *   rem length is also given in px
  * @returns Values by name (an unset custom property is empty), and the
  *   names that are not properties
  */
-export function selectedProps(names, style, pageValues, pageUnknown = []) {
+export function selectedProps(names, style, pageValues, pageUnknown = [], rootFontSize = 16) {
     const props = {};
     const unknown = [];
     for (const name of names) {
@@ -377,7 +455,11 @@ export function selectedProps(names, style, pageValues, pageUnknown = []) {
             unknown.push(name);
         }
         else {
-            props[name] = { computed, value: normalizeProperty(name, computed) };
+            const rem = name.startsWith('--') ? /^(-?\d*\.?\d+)rem$/.exec(computed.trim()) : null;
+            const value = rem
+                ? String(Math.round(Number(rem[1]) * rootFontSize * 10) / 10)
+                : normalizeProperty(name, computed);
+            props[name] = { computed, value };
         }
     }
     return { props, unknown };

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

@@ -32,6 +32,11 @@ export interface DeclarationSource {
     condition?: string;
     /** Specificity of the matching selector (ids, classes, types) */
     specificity?: [number, number, number];
+    /** The rule as written, whitespace collapsed (no selector: the style attribute) */
+    rule?: {
+        selector?: string;
+        declarations: string;
+    };
 }
 /** One declaration of a longhand */
 export interface Declaration {
@@ -66,9 +71,11 @@ export declare function shorthandLonghands(name: string): readonly string[] | un
  * Whether a property inherits.
  *
  * @param property - Longhand
- * @returns True for inherited properties (custom properties inherit)
+ * @param notInherited - Custom properties registered with `inherits: false`
+ * @returns True for inherited properties (custom properties inherit unless
+ *   registered otherwise)
  */
-export declare function isInherited(property: string): boolean;
+export declare function isInherited(property: string, notInherited?: ReadonlySet<string>): boolean;
 /**
  * The physical longhand a logical property sets.
  *
@@ -91,4 +98,14 @@ export declare function ownProperties(matched: Protocol.CSS.GetMatchedStylesForN
  * @returns Resolution per property
  */
 export declare function resolveCascade(matched: Protocol.CSS.GetMatchedStylesForNodeResponse, properties: readonly string[]): Map<string, Resolution>;
+/**
+ * The rule a declaration is in, as written: whole when short, else its
+ * selector and that declaration (`.btn { … background-color:var(--bs-btn-bg); … }`).
+ *
+ * @param declaration - Declaration
+ * @returns `{ rule }`, or nothing for a browser, extension or attribute style
+ */
+export declare function ruleField(declaration: Declaration): {
+    rule?: string;
+};
 //# sourceMappingURL=inspectCascade.d.ts.map