[csswg-drafts] Extend GeometryUtils with transformation and size utilities (#12534)

jogibear9988 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Extend GeometryUtils with transformation and size utilities ==
**Title:** Proposal: Extend `GeometryUtils` with transformation and size utilities

---

## Summary

This is a proposal to extend the [`GeometryUtils`](https://drafts.fxtf.org/geometry/#geometryutils) interface with two additional methods:

### 1. `getResultingTransformationBetweenNodeAndAncestor(node, ancestor)`

Returns a `DOMMatrix` representing the *complete transformation* matrix from `node` to the specified `ancestor`. This includes all `transform`, `transform-style`, `will-change`, scrolling offsets, and coordinate space effects in between.

**Key requirements:**

- Works across Shadow DOM boundaries.
- Optional: To be discussed whether it works across same-origin `<iframe>` boundaries.
- Returns a precise transformation that allows UI overlays (e.g. rotation handles) to match visually transformed elements.

---

### 2. `getNodeSize(node)`

Returns the *intrinsic size* (`{width, height}`) of the node **before** any applied transformations. This differs from `getBoundingClientRect`, which reflects the *rendered* size including transformations and possibly even effects like `zoom`.

**Use case:** Needed for applications such as visual designers or element inspectors that must display untransformed element dimensions alongside transformed overlays.

---

## Information

When the getBoxQuads is implemented, these values are already calculated to get the boxQuads, so this would not be much overhead.

## Use Case

In design or inspection tools (e.g. web page builders, Figma-like apps, DevTools), we need to:

- Show overlays (rotation arrows, transform handles, highlights) that accurately match an element’s visual placement and size.
- Calculate transformation deltas between elements and ancestors (e.g. an element inside a deeply nested shadow root) in order to properly align editor components.
- Retrieve the untransformed size of an element for layout calculations.

### Example

```js
const matrix = GeometryUtils.getResultingTransformationBetweenNodeAndAncestor(
  innerElement,
  topLevelHost
);
const { width, height } = GeometryUtils.getNodeSize(innerElement);
```

---

## Naming Discussion

### Proposed:

- `getResultingTransformationBetweenNodeAndAncestor(node, ancestor)`
- `getNodeSize(node)`

### Alternatives:

- `getTransformMatrixRelativeTo(node, ancestor)` – shorter, commonly used naming pattern
- `getUntransformedSize(node)` – emphasizes distinction from transformed box

Would appreciate feedback from the community on preferred terminology.

---

## Compatibility and Cross-Domain Concerns

### Shadow DOM:
These APIs must resolve correctly across open and closed ShadowRoots for maximum utility in real-world component trees.

### IFrames:
Behavior across same-origin iframes could follow the model of `getBoundingClientRect`, possibly throwing a security error for cross-origin access. More discussion is needed here.

---

## Prior Art

- `element.getBoundingClientRect()` – includes transformations
- `element.offsetWidth/offsetHeight` – does not consider fractional values or precise box models
- `element.computedStyle.transform` – string parsing required, does not yield complete matrix

These are insufficient for accurate matrix composition or untransformed size in tooling contexts.

---

## Suggested Spec Target

This could fit into the [CSSOM View Module](https://drafts.csswg.org/cssom-view/) or be a focused addition to [`GeometryUtils`](https://drafts.fxtf.org/geometry/#geometryutils) in the [Geometry Interfaces Module Level 1](https://drafts.fxtf.org/geometry/).

---

## Related Issues

None found directly related, but if there are existing discussions on extending `GeometryUtils`, please link here.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12534 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 July 2025 15:30:19 UTC