blob: 709d48be3a458078c29061408b9a2fc18ae0f01d [file] [log] [blame]
<!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.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>