ignore the phantom
  line box, and thus the baseline is also the bottom margin edge.

  Therefore, the inline-blocks should have their bottom margin edges aligned.
">

<style>
.wrapper {
  width: 200px;
  background: red;
  line-height: 0;
  font-size: 0;
}
.green {
  width: 100px;
  height: 200px;
  background: green;
}
.inline-block {
  display: inline-block;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div class="wrapper">
  <div class="inline-block gree