CSSOM View GeometryUtils – Developer Trial Instructions

gistfile.md

CSSOM View GeometryUtils – Developer Trial Instructions

The CSSOM View GeometryUtils APIs are currently available in Chromium behind the Experimental Web Platform features flag.

Enable the feature

1. Open chrome://flags/#enable-experimental-web-platform-features in Chrome Canary.
2. Set Experimental Web Platform features to Enabled.
3. Restart Chrome.

Alternatively, start Chromium with:

--enable-experimental-web-platform-features

Testing getBoxQuads()

<div id="target" style="width: 100px; height: 50px; transform: rotate(20deg)">
  Test
</div>

<script>
  const element = document.getElementById("target");

  const quads = element.getBoxQuads();

  console.log(quads[0]);
</script>

getBoxQuads() returns a DOMQuad describing the transformed geometry of the element.

Coordinate conversion

The implementation also provides the CSSOM View coordinate conversion APIs:

element.convertPointFromNode(point, otherElement);
element.convertRectFromNode(rect, otherElement);
element.convertQuadFromNode(quad, otherElement);

These APIs convert geometry between the coordinate systems of different nodes.

Specification

CSSOM View Module – GeometryUtils:

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