3 x interop width on empty cell

https://bugs.chromium.org/p/chromium/issues/detail?id=860084

by david

HTML

<div style="width:500px">
  <table>
    <tr>
      <td></td>
      <td> <!--width:150px here doesn't repro -->
        <x-word></x-word>
        <x-word></x-word>
        <x-word></x-word>
        <x-word></x-word>
      </td>
    </tr>
    <tr>
      <td>
        <x-long-word></x-long-word>
      </td>
      <td style="width: 150px"></td>
    </tr>
  </table>
</div>
<div id=log></div>

CSS

table {
  border-spacing: 0px;
}

td {
  outline: 1px solid black;
  padding: 0px; /* it's the default */
}

x-word {
  display: inline-block;
  width: 50px;
  height: 10px;
  background: green;
}

x-long-word {
  display: inline-block;
  width: 200px;
  height: 10px;
  background: orange;
}

JavaScript

let tds = document.querySelectorAll("tr:first-child td");
for (let i = 0; i < tds.length; i++) {
  log.innerHTML += getComputedStyle(tds[i]).width + " ← column " + i + "\n<br>";
}
log.innerHTML += getComputedStyle(document.querySelector("table")).width + " ← table\n<br>";
log.innerHTML += getComputedStyle(document.querySelector("table").parentNode).width + " ← table parent\n<br>";