CSSOM View GeometryUtils – Developer Trial Instructions

gistfile1.txt

# 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:

```text
--enable-experimental-web-platform-features
```

## Testing `getBoxQuads()`

```html
<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:

```js
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