Intent to Prototype: CSSOM View geometry utilities

[Chromestatus]

Contact emails

jochen....@googlemail.com

Explainer

https://gist.github.com/jogibear9988/8420264d0911ce6c5aab0ac5cda0744e

Specification

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

Summary

Prototype the CSSOM View GeometryUtils API in Blink behind the existing GeometryUtils runtime flag. The API exposes getBoxQuads(), convertQuadFromNode(), convertRectFromNode(), and convertPointFromNode() on Document, Element, Text, and CSSPseudoElement so authors can obtain and convert precise DOM geometry using standard DOMPoint, DOMRect, and DOMQuad objects.

Blink component

Blink>Geometry

Web Feature ID

dom-geometry

Motivation

Web authors currently do not have a standard native API for getting precise box geometry and converting points, rects, and quads between DOM nodes after layout, scrolling, fragmentation, writing modes, and CSS transforms have been applied. Applications that need this today, such as visual editors, inspection tools, custom selection UI, and overlay systems, usually approximate the result in JavaScript by walking ancestor chains, reading layout data, and composing transform matrices. These polyfills are costly when repeated for many elements, are easy to get subtly wrong, and cannot always match the browser’s layout and painting behavior. GeometryUtils exposes this geometry through standard DOMPoint, DOMRect, and DOMQuad objects, allowing authors to ask the engine for the same kind of coordinate-space conversion that is already needed internally for layout, hit testing, painting, and developer tooling. Concrete motivating use cases include visual editor and inspection tools that draw live overlays for many selected elements, including deeply nested custom elements, shadow DOM, transformed content, and generated pseudo-elements. Examples of tools in this space include web-component designers, page builders, browser extensions such as VisBug, and custom design/inspection overlays in developer applications.

Initial public proposal

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

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/427918516

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6015941766807552?gate=4567116687081472

This intent message was generated by Chrome Platform Status.