CSSOM View geometry utilities explainer

gistfile.md

CSSOM View geometry utilities explainer

Problem

Web applications that draw overlays, selections, inspection UI, or designer handles need precise element geometry after layout, scrolling, fragmentation, writing modes, and transforms have been applied.

Today they usually approximate this in JavaScript by walking ancestor chains and composing matrices. This is costly for many elements and can diverge from browser layout and painting behavior.

Proposal

Expose the CSSOM View GeometryUtils API on Document, Element, Text, and CSSPseudoElement.

The API includes:

• getBoxQuads()
• convertQuadFromNode()
• convertRectFromNode()
• convertPointFromNode()

These return or consume standard DOMPoint, DOMRect, and DOMQuad objects.

Example

const quad = element.getBoxQuads()[0]; const converted = document.convertQuadFromNode(quad, element);

Use cases

• visual editors
• page builders
• browser extensions such as VisBug
• custom selection UI
• inspection overlays
• transformed or deeply nested component trees
• generated pseudo-element overlays

Standards and tests

Spec: https://drafts.csswg.org/cssom-view/#geometryutils

WPT: web-platform-tests/wpt#61015

Chromium CL: https://chromium-review.googlesource.com/c/chromium/src/+/8039580