[csswg-drafts] [cssom-view] getClientRects() for inline box that contains block-levels (#13711)

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

== [cssom-view] getClientRects() for inline box that contains block-levels ==
https://drafts.csswg.org/cssom-view/#dom-element-getclientrects isn't clear about non-replaced inline boxes that contain block-level boxes.

```html
<!DOCTYPE html>
<span id="inline">
  <div style="width: 5px; height: 5px"></div>
  <div style="width: 10px; height: 10px"></div>
  <div style="width: 15px; height: 15px"></div>
</span>
<script>
let pre = document.createElement("pre");
pre.textContent = JSON.stringify(inline.getClientRects(), null, 2);
document.body.prepend(pre);
</script>
```


<table role="table">
<thead>
<tr>
<th>Gecko</th>
<th>WebKit, Servo</th>
<th>Blink</th>
</tr>
</thead>
<tbody>
<tr>
<td><!-- Gecko -->

```
{
  "0": {
    "x": 8,
    "y": 8,
    "width": 0,
    "height": 0,
    "top": 8,
    "right": 8,
    "bottom": 8,
    "left": 8
  },
  "1": {
    "x": 8,
    "y": 8,
    "width": 5,
    "height": 5,
    "top": 8,
    "right": 13,
    "bottom": 13,
    "left": 8
  },
  "2": {
    "x": 8,
    "y": 13,
    "width": 0,
    "height": 0,
    "top": 13,
    "right": 8,
    "bottom": 13,
    "left": 8
  },
  "3": {
    "x": 8,
    "y": 13,
    "width": 10,
    "height": 10,
    "top": 13,
    "right": 18,
    "bottom": 23,
    "left": 8
  },
  "4": {
    "x": 8,
    "y": 23,
    "width": 0,
    "height": 0,
    "top": 23,
    "right": 8,
    "bottom": 23,
    "left": 8
  },
  "5": {
    "x": 8,
    "y": 23,
    "width": 15,
    "height": 15,
    "top": 23,
    "right": 23,
    "bottom": 38,
    "left": 8
  },
  "6": {
    "x": 8,
    "y": 38,
    "width": 0,
    "height": 0,
    "top": 38,
    "right": 8,
    "bottom": 38,
    "left": 8
  }
}
```

</td>

<td valign="top"><!-- WebKit, Servo -->

```
{
  "0": {
    "x": 8,
    "y": 8,
    "width": 0,
    "height": 0,
    "top": 8,
    "right": 8,
    "bottom": 8,
    "left": 8
  },
  "1": {
    "x": 8,
    "y": 8,
    "width": 0,
    "height": 0,
    "top": 8,
    "right": 8,
    "bottom": 8,
    "left": 8
  },
  "2": {
    "x": 8,
    "y": 13,
    "width": 0,
    "height": 0,
    "top": 13,
    "right": 8,
    "bottom": 13,
    "left": 8
  },
  "3": {
    "x": 8,
    "y": 23,
    "width": 0,
    "height": 0,
    "top": 23,
    "right": 8,
    "bottom": 23,
    "left": 8
  },
  "4": {
    "x": 8,
    "y": 38,
    "width": 0,
    "height": 0,
    "top": 38,
    "right": 8,
    "bottom": 38,
    "left": 8
  }
}
```

</td>

<td valign="top"><!-- Blink -->

```
{
  "0": {
    "x": 8,
    "y": 8,
    "width": 0,
    "height": 0,
    "top": 8,
    "right": 8,
    "bottom": 8,
    "left": 8
  },
  "1": {
    "x": 8,
    "y": 8,
    "width": 1904,
    "height": 30,
    "top": 8,
    "right": 1912,
    "bottom": 38,
    "left": 8
  },
  "2": {
    "x": 8,
    "y": 38,
    "width": 0,
    "height": 0,
    "top": 38,
    "right": 8,
    "bottom": 38,
    "left": 8
  }
}
```

</td>
</tr>
</tbody>
</table>

Basically:

 - Blink wraps sequences of block-levels inside an anonymous block. So it provides 3 entries: the fragment of the inline before the anonymous block, the anonymous block, and the fragment of the inline after the anonymous block
 - Gecko doesn't wrap sequences of block-levels inside an anonymous block. So it provides 7 entries: 3 for the block-levels, and 4 for the interleaved and surrounding fragments of the inline
 - WebKit and Servo don't wrap sequences of block-levels inside an anonymous block either. And they doen't provide entries for the block-levels, just for the inline fragments. The 1st fragment seems to appear twice for some reason.

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


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

Received on Tuesday, 24 March 2026 14:58:52 UTC