cobalt/layout_tests/testdata/css3-flexbox/flex-container-auto-margins.html

<!DOCTYPE html>
<!--
 | Combined tests for container auto margins of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 -->
<html>
<head>
  <style>
  body {
    margin: 65px;
    font-family: Roboto;
    background-color: #808080;
    font-size: 12px;
  }

  .main {
    width: 500px;
    height: 300px;
    background-color: #fff;
  }

  .absolute {
    position: absolute;
    left: 400px;
  }

  .outer {
    width: 100px;
    height: 50px;
    background-color: #00f;
  }

  .inner {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f0;
  }

  .auto {
    margin: 0 auto;
  }
  .margin {
    margin: 0 20px;
  }

  .column {
    flex-flow: column wrap;
  }
  .row {
    flex-flow: row wrap;
  }
  </style>
</head>

<body>
  <div class="main">
    <div class="outer">
      <div class="inner auto column"></div>
    </div>
    <span class="outer">
      <div class="inner auto column"></div>
    </span>
    <div class="outer">
      <div class="inner auto row"></div>
    </div>
    <span class="outer">
      <div class="inner auto row"></div>
    </span>

    <div class="outer">
      <div class="inner margin column"></div>
    </div>
    <span class="outer">
      <div class="inner margin column"></div>
    </span>
    <div class="outer">
      <div class="inner margin row"></div>
    </div>
    <span class="outer">
      <div class="inner margin row"></div>
    </span>

    <div class="outer absolute" style="top: 10px;">
      <div class="inner auto column"></div>
    </div>
    <div class="outer absolute" style="top: 80px;">
      <div class="inner auto row"></div>
    </div>

    <div class="outer absolute" style="top: 150px;">
      <div class="inner margin column"></div>
    </div>
    <div class="outer absolute" style="top: 220px;">
      <div class="inner margin row"></div>
    </div>

  </div>
</body>
</html>