| <!doctype html> |
| <style> |
| td { |
| width: 50px; |
| height: 50px; |
| padding: 0px; |
| background: lime; |
| box-sizing: border-box; |
| } |
| td div { |
| display: inline-block; |
| width: 22px; |
| height: 5px; |
| background: orange; |
| } |
| </style> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script type="text/javascript"> |
| runAfterLayoutAndPaint(() => theRow.removeChild(cellToRemove), true); |
| </script> |
| <p>Removing the left cell with a big border should give the remaining cells enough space to put the orange inline-blocks on the same line.</p> |
| <table style="border-collapse:collapse"> |
| <tr id="theRow"> |
| <td><div></div> <div></div></td> |
| <td style="border:18px solid red" id="cellToRemove"></td> |
| <td><div></div> <div></div></td> |
| </tr> |
| </table> |
