cobalt/layout_tests/testdata/css3-flexbox/combined-shrinking-and-justify-content.html

<!DOCTYPE html>
<!--
 | Combined tests for basic functionality of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 | This test focuses on shrinking flex items and justify-content values.
 -->
<html>
<head>
<style>
  body {
    margin: 0px;
    font-family: Roboto;
    background-color: #808080;
    font-size: 12px;
  }
  .inlineflex {
    display:  inline-flex;
    color: #99b9f3;
    background-color: #ffee08;
    opacity: 0.75;
  }
  .flex {
    display:  flex;
    color: #99b9f3;
    background-color: #ffee08;
    opacity: 0.75;
  }

  .widesized {
    width: 100px;
    height: 10px;
    -no-margin-left: auto;
  }
  .sized {
    width: 50px;
    height: 10px;
  }
  .container {
    flex-flow: row nowrap;
    padding: 1px;
    border: 1px solid #000060;
    outline: 1px solid #00f000;
    margin: 3px;
  }
  .flex-end {
    justify-content: flex-end;
    align-items: center;
    align-content: center;
  }
  .center {
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .space-between {
    justify-content: space-between;
    align-items: center;
    align-content: center;
  }
  .center {
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .space-around {
    justify-content: space-around;
    align-items: center;
    align-content: center;
  }
  .blue {
    background-color: #0047ab;
  }
  .red {
    background-color: red;
  }
  .hidden {
    overflow: hidden;
  }
  .visible {
    overflow: visible;
  }
  .shrink-1 {
    flex-shrink: 1;
  }
  .shrink-0-5 {
    flex-shrink: 0.5;
  }
  .shrink-0-25 {
    flex-shrink: 0.25;
  }
  .basis-0 {
    flex-basis: 0;
  }
  .basis-big {
    flex-basis: 100px;
  }

</style>
</head>
<body>
<div style="display:inline-block; margin: 0 5px 0 40px; width: 50px;">

<div class="sized flex flex-end container">
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex flex-end container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex flex-end container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex flex-end container">
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex flex-end container">
  <div class="red widesized shrink-0-5"></div>
  <div class="blue widesized shrink-0-25"></div>
</div>

<div class="sized flex flex-end container">
  <div class="red widesized shrink-0-5 basis-big"></div>
  <div class="blue widesized shrink-0-25 basis-big"></div>
</div>

flex-end
</div>
<div style="display:inline-block; margin: 0 55px 0 0; width: 50px;">

<div class="sized flex container">
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex container">
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex container">
  <div class="red widesized shrink-0-5"></div>
  <div class="blue widesized shrink-0-25"></div>
</div>

<div class="sized flex container">
  <div class="red widesized shrink-0-5 basis-big"></div>
  <div class="blue widesized shrink-0-25 basis-big"></div>
</div>

flex-start
</div>
<div style="display:inline-block; margin: 0 0 0 5px; width: 75px;">


<div class="sized flex space-around container">
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex space-around container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex space-around container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex space-around container">
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex space-around container">
  <div class="red widesized shrink-0-5"></div>
  <div class="blue widesized shrink-0-25"></div>
</div>

<div class="sized flex space-around container">
  <div class="red widesized shrink-0-5 basis-big"></div>
  <div class="blue widesized shrink-0-25 basis-big"></div>
</div>


space-around
</div>
<div style="display:inline-block; margin: 0 0 0 15px; width: 75px;">


<div class="sized flex center container">
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex center container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex center container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex center container">
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex center container">
  <div class="red widesized shrink-0-5"></div>
  <div class="blue widesized shrink-0-25"></div>
</div>

<div class="sized flex center container">
  <div class="red widesized shrink-0-5 basis-big"></div>
  <div class="blue widesized shrink-0-25 basis-big"></div>
</div>


center
</div>
<div style="display:inline-block; margin: 0 0 0 5px; width: 90px;">



<div class="sized flex space-between container">
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex space-between container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex space-between container">
  <div class="red widesized shrink-1"></div>
  <div class="blue widesized shrink-1"></div>
</div>

<div class="sized flex space-between container">
  <div class="blue widesized shrink-0-5"></div>
</div>

<div class="sized flex space-between container">
  <div class="red widesized shrink-0-5"></div>
  <div class="blue widesized shrink-0-25"></div>
</div>

<div class="sized flex space-between container">
  <div class="red widesized shrink-0-5 basis-big"></div>
  <div class="blue widesized shrink-0-25 basis-big"></div>
</div>


space-between
</div>

</body>
</html>