Bug 291728 – removing a thead element (collapsed table-row-group) doesn't relayout properly the table

• Status: NEW
• Component: Tables

[Karl Dubost]

https://wpt.fyi/results/css/css-tables/collapsed-border-remove-row-group.html
https://wpt.live/css/css-tables/collapsed-border-remove-row-group.html

The original table looks like

```
<style>
  table {
    border-collapse: collapse;
  }
  td {
    border-bottom: 10px solid;
  }
</style>
<table>
  <thead>
    <tr>
      <td>Something</td>
    </tr>
  </thead>
  <thead id="removeMe">
    <tr>
      <td style="border: 0">Something</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body</td>
    </tr>
  </tbody>
</table>
```


It has a script when the page has finished loading which removes the second thead.


```
  onload = function () {
    removeMe.getBoundingClientRect();
    removeMe.remove();
  };
```

Then the table becomes:


```
<table>
  <thead>
    <tr>
      <td>Something</td>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Body</td>
    </tr>
  </tbody>
</table>
```

On Safari:

Before removing.  Height values

TABLE 80
  THEAD 25
  THEAD 25 (removeMe)
  TBODY 25

After removing.
TABLE 55
  THEAD 25
  TBODY 25


On Firefox I have 
Before removing.  Height values

TABLE 83.6
  THEAD 26.2
  THEAD 26.2 (removeMe)
  TBODY 26.2

After removing.
TABLE 62.4
  THEAD 26.2
  TBODY 31.2


the tbody/tr/td comes to collide with the thead above.

[Karl Dubost]

Created attachment 474949 [details]
rendering in safari, firefox, chrome

[Radar WebKit Bug Importer]

<rdar://problem/149996973>