| <!DOCTYPE html> |
| <script src="../../resources/check-layout.js"></script> |
| <style> |
| * { font: 15px/1 Ahem } |
| .cell { border: 5px solid pink; } |
| .backgroundSalmon { background-color: salmon; } |
| .cell { display:table-cell; } |
| </style> |
| |
| <body onload="checkLayout('.cell')"> |
| <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> |
| <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> |
| The two blocks below should look identical. |
| <br/><br/> |
| |
| <div> |
| <div class="cell" data-expected-height="25">a</div> |
| <div class="cell" data-expected-height="25"><div class="backgroundSalmon">b</div></div> |
| </div> |
| <br> |
| <div> |
| <div class="cell" data-expected-height="25">a</div> |
| <div class="cell" data-expected-height="25"><div class="backgroundSalmon toggle" style="margin:100px">b</div></div> |
| </div> |
| |
| <script> |
| document.body.offsetWidth; |
| document.querySelector('.toggle').style.margin = 0; |
| </script> |
| </body> |
