<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test table-cell content overflowing in the block direction for each
    vertical-align value</title>
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
  <style>
  td {
    border: 20px solid teal;
    height: 100%;
  }
  table {
    height: 100px;
  }
  .content {
    padding: 20px;
    height: 100%;
    width:  20px;
    background: purple;
  }
  </style>
</head>
  <body>
    <table>
      <tr>
        <td style="vertical-align: middle">
          <div class="content"></div>
        </td>
        <td style="vertical-align: baseline">
          <div class="content"></div>
        </td>
        <td style="vertical-align: bottom">
          <div class="content"></div>
        </td>
        <td style="vertical-align: top">
          <div class="content"></div>
        </td>
      </tr>
    </table>
  </body>
</html>