| <!doctype html> |
| <style> |
| td { |
| width: 50px; |
| height: 50px; |
| padding: 0px; |
| background: lime; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script type="text/javascript"> |
| function addMiddleCell() { |
| var cellToAdd = document.createElement("td"); |
| cellToAdd.style.border = "18px solid lightblue"; |
| theRow.insertBefore(cellToAdd, rightCell); |
| checkLayout("table"); |
| } |
| runAfterLayoutAndPaint(addMiddleCell, true); |
| </script> |
| <p>Adding a middle cell with a large border should make the table expand to accommodate it. The outer two cells' widths should also take on half of the new large border's width.</p> |
| <table style="border-collapse:collapse" data-expected-width=190> |
| <tr id="theRow"> |
| <td style="border:4px solid black" data-expected-width=61></td> |
| <td data-expected-width=59 id="rightCell"></td> |
| </tr> |
| </table> |
