third_party/WebKit/LayoutTests/fast/block/containing-block-negative-margins.html

   1 <!doctype html>
   2 <style>
   3     body {
   4         margin-left: 200px;
   5         width: 35em;
   6     }
   7     div.floater {
   8         float: right;
   9         width: 20em;
  10         margin-right: -23em;
  11         margin-bottom: 1em;
  12     }
  13     table {
  14         background-color: green;
  15     }
  16     #expands {
  17         margin-left: -200px;
  18         margin-right: -200px;
  19     }
  20     #shrinks {
  21         margin-left: 200px;
  22         margin-right: 200px;
  23     }
  24
  25     td {
  26         width: 1500px;
  27     }
  28
  29 </style>
  30 <div style="position: absolute">crbug.com/413202: Margins can expand/shrink the width of an element if a float does not constrain it.</div>
  31 <div class="floater"></div>
  32 <table id="expands" data-expected-client-width="960">
  33     <tr>
  34         <td></td>
  35     </tr>
  36 </table>
  37 <table id="shrinks" data-expected-client-width="160">
  38     <tr>
  39         <td></td>
  40     </tr>
  41 </table>
  42 <script src="../../resources/check-layout.js"></script>
  43 <script>
  44     document.body.offsetLeft;
  45     checkLayout("#expands");
  46     checkLayout("#shrinks");
  47 </script>
  48
  49
  50
  51
  52