| <!DOCTYPE html> |
| |
| <style> |
| .styledForTest { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-color: orange; |
| color: white; |
| border: 7px solid black; |
| padding: 5px; |
| width: 80px; |
| height: 30px; |
| margin: 2px; |
| } |
| </style> |
| |
| <p id="description">All of the boxes should be 80x30 and look identical.</p> |
| <div id="console"></div> |
| |
| <div id="expected" class="styledForTest"></div> |
| |
| <div id="div-display-table-cell" class="styledForTest" style="display: table-cell;"></div> |
| |
| <table> |
| <tr> |
| <td id="td" class="styledForTest"></td> |
| </tr> |
| </table> |
| |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| description('Tests that display: table-cell and box-sizing: border-box work when used together.'); |
| |
| ['div-display-table-cell', 'td'].forEach(function (id) { |
| debug(id); |
| element = document.querySelector('#' + id); |
| shouldBe('element.offsetWidth', '80'); |
| shouldBe('element.offsetHeight', '30'); |
| }); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
