| <!doctype html> |
| <style> |
| body { |
| margin-left: 200px; |
| width: 35em; |
| } |
| div.floater { |
| float: right; |
| width: 20em; |
| margin-right: -23em; |
| margin-bottom: 1em; |
| } |
| table { |
| background-color: green; |
| } |
| #expands { |
| margin-left: -200px; |
| margin-right: -200px; |
| } |
| #shrinks { |
| margin-left: 200px; |
| margin-right: 200px; |
| } |
| |
| td { |
| width: 1500px; |
| } |
| |
| </style> |
| <div style="position: absolute">crbug.com/413202: Margins can expand/shrink the width of an element if a float does not constrain it.</div> |
| <div class="floater"></div> |
| <table id="expands" data-expected-client-width="960"> |
| <tr> |
| <td></td> |
| </tr> |
| </table> |
| <table id="shrinks" data-expected-client-width="160"> |
| <tr> |
| <td></td> |
| </tr> |
| </table> |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| document.body.offsetLeft; |
| checkLayout("#expands"); |
| checkLayout("#shrinks"); |
| </script> |
| |
| |
| |
| |
| |
