Class StyleMetricAbstract

Provides computed style–based metric utilities for DOM elements.

The StyleMetric static class offers precise runtime calculations for visual and painted metrics (IE border-image thicknesses, resolved pixel sizes). All methods operate on live DOM elements using computed style data.

Index
expand4Length getScrollbarWidth getVisualEdgeInsets

  • Expands a CSS 1–4 value shorthand sequence into its four physical sides (top, right, bottom, left) following standard CSS expansion rules.

    This applies to properties whose value syntax follows the box-side shorthand model used by margin, padding, border-width, border-image-width, and border-image-slice, where the tokens map as:

    1. value: [v, v, v, v]
    2. values: [vTopBottom, vRightLeft]
    3. values: [vTop, vRightLeft, vBottom]
    4. values: [vTop, vRight, vBottom, vLeft]

    Parameters

    • tokens: string[]

      The raw token array (1–4 items) extracted from a CSS property.

    • Optionaloutput: { defaultValue?: string; output?: string[] }

      Optional preallocated 4-element array to write into.

    Returns string[]

    A 4-element array representing [top, right, bottom, left].

    StyleMetric.expand4Length(['10px']);
      // → ['10px','10px','10px','10px']

      StyleMetric.expand4Length(['10px','20px']);
      // → ['10px','20px','10px','20px']

      StyleMetric.expand4Length(['10px','20px','30px']);
      // → ['10px','20px','30px','20px']

  • Gets the global scrollbar width. The value is cached on subsequent invocations unless cached is set to false in options.

    Parameters

    • Optionaloptions: { cached?: boolean }

      Options.

      • Optionalcached?: boolean

        When false, the calculation is run again.

    Returns number

    Default element scrollbar width.

  • Computes the effective visual edge insets for an element — the per-side * pixel offsets where the element’s visual border intrudes inward into the content area.

    These insets represent the internal constraints imposed by visually rendered border effects. They are intended for layout adjustments such as applying padding, positioning slotted elements, or aligning content to remain fully inside the element’s painted border region.

    The current implementation evaluates intrusions resulting from border-image, including:

    - `border-image-width` values (absolute, percentage, or unitless),
    - `auto` fallback resolution using `border-image-slice`,
    - the absence of a border image (`border-image-source: none` → zero insets),
    - optional pre-fetched metrics to avoid repeated DOM/style reads.

    Type Parameters

    Parameters

    • el: Element

      HTMLElement to compute painted border widths for.

    • Optionaloutput: Output

      Existing BoxSides output data object.

    • Optionaloptions: PrefetchMetrics

      Optional pre-fetched element data for performance reuse.

    Returns Output

    Painted border width constraints in pixel units.

Settings
Member Visibility

On This Page
Methods