table-cell.html | Explore in Territory

<!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>

chromium/third_party/blink/web_tests/fast/box-sizing/table-cell.html