cobalt/layout_tests/testdata/css3-flexbox/positioned-containers.html

<!DOCTYPE html>
<!--
 | Test flexbox containers with absolute positioning.
 -->
<html><head>
    <style type="text/css">
      body {
        margin: 0px;
        background-color: white;
        font-family: Roboto;
        font-size: 16px;
      }
      .container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        border: 5px solid green;
        width: 40px;
        height: 50px;
        padding: 4%;
        top: 30px;
        left: 20px;
        margin: 1%;
      }
      .column {
        flex-direction: column;
      }
      .absolute {
        position: absolute;
      }
      .fixed {
        position: fixed;
      }
      .relative {
        position: relative;
      }
      .static {
        position: static;
      }
      .container > div {
        padding: 5px;
        width: 5px;
        height: 20px;
        text-align: center;
        border: 2px solid blue;
        background: green;
        flex: 1 0 auto;
      }
      .column > div {
        background: #80ff80;
      }
      .containingblock {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 190px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="containingblock">
      <span class="relative container">
        <div>AA</div>
      </span>
    </div>
    <div class="containingblock">
      <span class="static container">
        <div>BB</div>
      </span>
    </div>
    <div class="containingblock">
      <span class="absolute container">
        <div>CC</div>
      </span>
      <span class="fixed container">
        <div>DD</div>
      </span>
    </div>
    <div class="containingblock">
      <span class="relative column container">
        <div>a</div>
      </span>
    </div>
    <div class="containingblock">
      <span class="static column container">
        <div>b</div>
      </span>
    </div>
    <div class="containingblock">
      <span class="absolute column container">
        <div>c</div>
      </span>
      <span class="fixed column container">
        <div>d</div>
      </span>
    </div>
</body></html>