| <!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 shrinkCellBorder() { |
| middleCell.style.borderWidth = "4px"; |
| checkLayout("table"); |
| } |
| runAfterLayoutAndPaint(shrinkCellBorder, true); |
| </script> |
| <p>Changing a cell's collapsed border's width should change the width of the sibling cells and the table.</p> |
| <p>There should be 3 squares. Outer two are lime, middle one is blue with a lightblue border.</p> |
| <p>Firefox 50.0a1 (nightly 2016-07-19) fails this, so it should probably be upstreamed, except it uses chrome-specific `runAfterLayoutAndPaint`.</p> |
| <table style="border-collapse:collapse" data-expected-width=158 data-expected-height=58> |
| <tr> |
| <td data-expected-width=52></td> |
| <td style="background:blue; border:18px solid lightblue" id="middleCell" data-expected-width=54></td> |
| <td data-expected-width=52></td> |
| </tr> |
| </table> |
