<!doctype html>
<html>
  <head>
    <style>
      #container {
        border: 1px solid blue;
        width: 200px;
      }
      span {
        font: 18px Ahem;
        line-height: 30px;
      }
      .item {
        padding-left: 26px;
      }
      .item span {
        position: absolute;
      }
    </style>
    <script src="../../resources/check-layout.js"></script>
  </head>
  <body>
    <p>https://bugs.webkit.org/show_bug.cgi?id=108226: All the black boxes should be inside the blue rectangle.</p>
    <div id="container" data-expected-height=62>
        <span class="item">XX XX XX</span>
        <span class="item"><span></span>X</span>
    </div>
    <script>
        checkLayout('#container');
    </script>
  </body>
</html>