cobalt/layout_tests/testdata/css-2-1/DISABLED-10-8-1-vertical-align-notext.html

<!DOCTYPE html>
<!--
 | This shows some examples of where the vertical alignment or line box height
 | is incorrect when there is no text in the div
-->
<html>
<head>
  <style>
    body {
      margin: 0px;
    }

    div {
      display: inline-block;
    }
    div.bluebg {
      display: block;
      background: #2020F0;
    }
    div.greybg {
      display: block;
      background: #B0B0B0;
    }
    div.greybg1 {
      display: block;
      background: #C0C0C0;
    }
    div.greybg2 {
      display: block;
      background: #D0D0D0;
    }
    div.greybg3 {
      display: block;
      background: #E0E0E0;
    }

    div.boxed_baseline {
      vertical-align: baseline;
      background: #202020;
      width : 16px;
      height : 32px;
    }
    div.v_baseline {
      vertical-align: baseline;
      background: #202000;
      width : 16px;
      height : 16px;
    }
    div.boxed_middle {
      vertical-align: middle;
      background: #404040;
      width : 16px;
      height : 32px;
    }
    div.v_middle {
      vertical-align: middle;
      background: #404000;
      width : 16px;
      height : 16px;
    }
    div.boxed_top {
      vertical-align: top;
      background: #808080;
      width : 16px;
      height : 32px;
    }
    div.v_top {
      vertical-align: top;
      background: #808000;
      width : 16px;
      height : 16px;
    }
  </style>
</head>
<body>
  <div class="greybg1"><div class="boxed_middle"></div><div class="v_middle"></div></div>
  <div class="greybg2"><div class="boxed_top"></div><div class="v_top"></div></div>
  <div class="greybg3"><div class="boxed_baseline"></div><div class="v_baseline"></div></div>
  <div class="greybg">
    <div class="boxed_middle"></div>
    <div class="boxed_baseline"></div>
  </div>
  <div class="bluebg">
    <div class="boxed_middle"></div><div class="v_middle"></div>
    <div class="boxed_top"></div><div class="v_top"></div>
    <div class="boxed_baseline"></div><div class="v_baseline"></div>
  </div>
  <div class="greybg">
    <div class="boxed_baseline"></div>
    <div class="boxed_middle"></div>
  </div>
  <div class="bluebg">
    <div class="boxed_top"></div><div class="v_top"></div>
    <div class="boxed_baseline"></div><div class="v_baseline"></div>
    <div class="boxed_middle"></div><div class="v_middle"></div>
  </div>
</body>
</html>