cobalt/layout_tests/testdata/css3-flexbox/combined-container-sizing-edge-cases.html

<!DOCTYPE html>
<!--
 | Combined tests for basic functionality of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 | This exercises some edge cases for container box sizes.
 -->
<html>
<head>
<style>
  body {
    margin: 0px;
    font-family: Roboto;
    background-color: #808080;
    font-size: 10px;
  }
  .vsized {
    height: 40px;
  }
  .hsized {
    width: 40px;
  }
  .flex {
    display: flex;
  }
  .inlineflex {
    display: inline-flex;
  }
  .row {
    flex-flow: row wrap;
   }
  .column {
    flex-flow: column wrap;
   }
  .container {
    color: #99b9f3;
    background-color: #ffee00;
    opacity: 0.75;
    padding: 2px;
    border: 2px solid #000060;
    outline: 2px solid #00f000;
    margin: 6px;
    border-top-width: 5px;
  }
  div > span {
    background-color: #0047ab;
  }
</style>
</head>
<body>

<div class="vsized flex column container">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
<div class="hsized flex column container">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
-hg
<div class="vsized inlineflex column container">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
hg
<div class="hsized inlineflex column container" style="height: 96px;">
  <span style="align-self: flex-end; height: 5%;">end</span>
  <span style="align-self: flex-start; height: 5%;">start</span>
  <span style="align-self: center; height: 5%;">center</span>
  <span class="vsized" style="align-self: stretch; height: 5%;">stretch</span>
  <span class="vsized" style="align-self: stretch; height: 5%;">stretch</span>
  <span class="vsized" style="align-self: stretch; height: 5%;">stretch</span>
</div>
hg
<div class="hsized inlineflex column container" style="height: 96px;">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
hg
<div class="hsized inlineflex column container" style="max-height: 96px;">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
hg
<div class="inlineflex column container" style="width:16px; max-height: 96px;">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
hg
<div class="hsized inlineflex column container">
  <span style="align-self: flex-end;">end</span>
  <span style="align-self: flex-start;">start</span>
  <span style="align-self: center;">center</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
  <span class="vsized" style="align-self: stretch;">stretch</span>
</div>
hg

</body>
</html>