[csswg-drafts] getVisibleClientRect API analogous to getBoundingClientRect (#13294)

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

== getVisibleClientRect API analogous to getBoundingClientRect ==
`getBoundingClientRect` returns the full laid out `DomRect` of the element.

A very common use case in complex apps is to want to ascertain the **visible** rectangle of an element as clipped by all clipping ancestor elements.

This is surprisingly difficult to do in Javascript. Of course you can walk up the `parentNode` axis, but there are many caveats to navigate when determining whether an ancestor clips and the clipping rectangle of that ancestor which makes the code difficult to understand and maintain.

In the example below, the day's schedule is clipped by the small size of the editor:

<img width="1236" height="798" alt="Image" src="https://github.com/user-attachments/assets/3390cc4b-8f8e-4092-8c02-df244c747e96" />

In that screenshot I use our utility class to work out the visible client rect for the day column element, and visualize it in red.

It would be very useful for applications to have `element.getVisibleClientRect()` available. What happens if the element is fully out of view can be discussed. Our utility returns `false` rather than a zero dimension rectangle, because it is possible to also ask whether a _Point_ is in visible space.

Also, do we not think that the `DomRect` API is rather insipid? Do do anything interesting with rectangles of elements, you have to write your own `Rectangle` class which wraps or extends `DomRect`.

How about these new methods?

```
newRect = firstRect.intersection(secondRect, thirdRect, ...);
```

```
newRect = firstRect.union(secondRect, thirdRect, ...);
```

```
isWithin = firstRect.contains(secondRect);
```

And `equals`, and `translate` etc?

Maybe these are methods of a lower base class which does not have a relationship to DOM.

Just a `Rect` class which `DomRect` extends because it is connected to a Dom element.

So the `intersection` of two `DomRect`s would just yield a `Rect` because it is now not connected to any element.

I can't imagine the anchor positioning API was written without these methods being available. They should be public.

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


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

Received on Monday, 5 January 2026 10:35:28 UTC