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

<!DOCTYPE html>
<html>
<!--
 | This has some vertical alignment tests with combinations of a larger fixed
 | size box with a smaller box in the same linebox.
 -->
<head>
  <style>
    body {
      font-family: Roboto;
      margin: 0px;
      font-size: 8px;
      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 : 8px;
      height : 8px;
    }
    div.fullheightbox {
      width : 8px;
      height : 16px;
    }
    div.plusheightbox {
      width : 8px;
      height : 20px;
    }

    div.baseline {
      vertical-align: baseline;
    }
    div.middle {
      vertical-align: middle;
    }
    div.top {
      vertical-align: top;
    }
    div.bottom {
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <div class="block greybg_B0">x
    <div class="greybg_40 fullheightbox middle">x</div>
    <div class="greybg_40 middle">x</div>
  </div>
  <div class="block bluebg">x
    <div class="greybg_40 fullheightbox middle">x</div>
    <div class="greybg_40 halfheightbox middle"></div>
  </div>
  <div class="block greybg_B0">x
    <div class="greybg_40 fullheightbox middle">x</div>
    <div class="greybg_40 halfheightbox middle">x</div>
  </div>
  <div class="block bluebg">x
    <div class="greybg_80 plusheightbox top">x</div>
    <div class="greybg_80 top">x</div>
  </div>
  <div class="block greybg_B0">x
    <div class="greybg_40 plusheightbox bottom">x</div>
    <div class="greybg_40 bottom">x</div>
  </div>
  <div class="block bluebg">x
    <div class="greybg_20 fullheightbox baseline"></div>
    <div class="greybg_20 baseline">x</div>
  </div>
  <div class="block greybg_B0">x
    <div class="greybg_20 fullheightbox baseline">x</div>
    <div class="greybg_20 baseline">x</div>
  </div>
  <div class="block bluebg">x
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
    <div class="greybg_40 plusheightbox bottom">x</div>
    <div class="greybg_20 baseline">x</div>
  </div>
  <div class="block greybg_B0">x
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
    <div class="greybg_80 plusheightbox top">x</div>
    <div class="greybg_20 baseline">x</div>
  </div>
  <div class="block bluebg">x
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
    <div class="greybg_80 plusheightbox top">x</div>
    <div class="greybg_40 plusheightbox bottom">x</div>
    <div class="greybg_20 baseline">x</div>
  </div>
  <div class="block greybg_B0">x
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
    <div class="greybg_80 plusheightbox top">x</div><div class="greybg_80 top">x</div>
    <div class="greybg_40 plusheightbox bottom">x</div><div class="greybg_40 bottom">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 bluebg">x
    <div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
    <div class="greybg_80 plusheightbox top">x</div><div class="greybg_80 top">x</div>
    <div class="greybg_40 plusheightbox bottom">x</div><div class="greybg_40 bottom">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">x
    <div class="greybg_80 plusheightbox top">x</div><div class="greybg_80 top">x</div>
    <div class="greybg_40 plusheightbox bottom">x</div><div class="greybg_40 bottom">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>
</body>
</html>