| <!doctype html> |
| <style> |
| td { |
| width: 50px; |
| height: 50px; |
| padding: 0px; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script type="text/javascript"> |
| function shrinkSectionBorder() { |
| document.getElementById("section").style.borderWidth = "4px"; |
| checkLayout("div"); |
| } |
| runAfterLayoutAndPaint(shrinkSectionBorder, true); |
| </script> |
| <p>Changing a collapsed border's width should change the width of the table and the width of a shrink-to-fit containing block.</p> |
| <p>There should be a square with a 4px inner blue border and a 1px outer black border.</p> |
| <p>Firefox 50.0a1 (nightly 2016-07-07) fails this, so it should probably be upstreamed, except it uses chrome-specific `runAfterLayoutAndPaint`.</p> |
| <p>The table cell has rowspan=2 because we almost didn't cover the case where a cell's rowspan exceeded the declared rows.</p> |
| <div style="float:left; border: 1px solid black" data-expected-width=60> |
| <table style="border-collapse:collapse" data-expected-width=58 data-expected-height=58> |
| <tbody style="border:18px solid lightblue" id="section"> |
| <tr> |
| <td rowspan=2></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
