Skip to content

dom-layout-shim 0.2.0

Choose a tag to compare

@github-actions github-actions released this 05 Aug 21:32
· 52 commits to main since this release
Immutable release. Only release title and notes can be modified.

Minor Changes

  • ff1ef3b: Patch offsetTop, offsetLeft, and offsetParent from the layout snapshot.

    Previously, these properties came from the host DOM implementation and could
    disagree with the engine's geometry:

    element.offsetTop;
    element.offsetLeft;
    element.offsetParent;

    They now describe the element relative to its layout-backed CSS offset parent,
    including positioned ancestors, borders, margins, and scrolling.

  • a6bdc8b: Implement Element.scrollIntoView() against the layout snapshot so calls
    consistently affect layout-backed geometry instead of relying on the host DOM
    implementation.

    The method scrolls nested containers and the configured viewport using boolean
    or block/inline alignment options. Smooth behavior is applied immediately
    to keep test layout deterministic.

  • 8be6e4f: Support adjacent (+) and general (~) sibling combinators in stylesheet selectors.

  • 68fc5d9: Answer window.matchMedia() queries from the configured layout viewport.

    Previously, matchMedia() used the DOM environment's viewport, which could
    disagree with the dimensions used by the layout engine:

    await attachLayoutEngine({
      window,
      viewport: { width: 320, height: 640 },
    });
    
    // Previously: false when the DOM environment was wider than 500px
    window.matchMedia("(max-width: 500px)").matches;

    It now evaluates the query against the configured 320px-wide layout viewport:

    // Now: true
    window.matchMedia("(max-width: 500px)").matches;
  • 3724069: Recompute layout after style elements are added or changed and after existing CSSOM rules are edited or deleted.

  • b26f8ce: Add an unsupported CSS reporter that reduces warning streams to a stable
    adoption-cost summary across a test suite.

    Previously, consumers had to build their own aggregation around onWarning:

    const warnings = [];
    
    await attachLayoutEngine({
      window,
      unsupportedCss: {
        onWarning: (warning) => warnings.push(warning),
      },
    });

    The reporter now deduplicates declarations and exposes one headline count with
    sorted diagnostic details:

    const reporter = createUnsupportedCssReporter();
    
    await attachLayoutEngine({
      window,
      unsupportedCss: { onWarning: reporter.onWarning },
    });
    
    const { unsupportedDeclarationCount, declarations } = reporter.getSummary();