third_party/WebKit/LayoutTests/fast/table/table-toggle-paragraph-padding.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/check-layout.js"></script>
   3 <style>
   4 * { font: 15px/1 Ahem }
   5 .cell { border: 5px solid pink; }
   6 .backgroundSalmon { background-color: salmon; }
   7 .cell { display:table-cell; }
   8 </style>
   9
  10 <body onload="checkLayout('.cell')">
  11 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=241331">241331</a>. Margins on children of display:table-cell elements get stuck at highest value.</h3>
  12 <h4>BeforeMargin of the row was not reseting back to 0 when margin of the cell's child is changed from 100px to 0.</h4>
  13 The two blocks below should look identical.
  14 <br/><br/>
  15
  16 <div>
  17     <div class="cell" data-expected-height="25">a</div>
  18     <div class="cell" data-expected-height="25"><div class="backgroundSalmon">b</div></div>
  19 </div>
  20 <br>
  21 <div>
  22     <div class="cell" data-expected-height="25">a</div>
  23     <div class="cell" data-expected-height="25"><div class="backgroundSalmon toggle" style="margin:100px">b</div></div>
  24 </div>
  25
  26 <script>
  27 document.body.offsetWidth;
  28 document.querySelector('.toggle').style.margin = 0;
  29 </script>
  30 </body>