<!DOCTYPE html>
<html>
<!--
 | These are some differences in vertical alignment in the output here when
 | compared to chrome. They may be caused by mishandling of the baseline /
 | height below baseline. Or they may be a result of font differences.
-->
<head>
  <style>
    body {
      font-family: Roboto;
      margin: 0px;
      font-size: 15px;
      color: #FFFFFF;
    }

    div {
      display: inline-block;
    }
    div.block {
      display: block;
    }

    div.bluebg {
      background: #2020F0;
    }
    div.greybg_20 {
      background: #202020;
    }
    div.greybg_40 {
      background: #404040;
    }
    div.greybg_80 {
      background: #808080;
    }
    div.greybg_B0 {
      background: #B0B0B0;
    }

    div.halfheightbox {
      width : 16px;
      height : 16px;
    }
    div.fullheightbox {
      width : 16px;
      height : 32px;
    }

    div.baseline {
      vertical-align: baseline;
    }
    div.middle {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="block bluebg">
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
    <div class="greybg_20 fullheightbox baseline">x</div><div class="greybg_20 baseline">x</div>
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
  </div>
  <div class="block greybg_B0">
    <div class="greybg_40 fullheightbox middle"></div>
    <div class="greybg_20 fullheightbox baseline"></div>
  </div>
  <div class="block bluebg">
    <div class="greybg_20 fullheightbox baseline">x</div>
    <div class="greybg_40 fullheightbox middle">x</div>
  </div>
</body>
</html>