<!DOCTYPE html>
<!--
 | Tests for CSS Flexible Box Layout Module.
 |   Testing absolutely positioned flex container children.
 -->
<html>
<head>
<style>
  body {
    margin: 0px;
    font-family: Roboto;
    background-color: gray;
    font-size: 36px;
  }
  .flex {
    display: inline-flex;
    flex-flow: row wrap;
    color: fuchsia;
    background-color: yellow;
    opacity: 0.75;
    min-width: 10px;
    min-height: 10px;
    border: solid white;
  }
  .absolute {
    background-color: blue;
    position: absolute;
  }
  .fixed {
    background-color: purple;
    position: fixed;
  }
  div > span {
    padding: 1.25%;
    border: 10px solid black;
  }
  div > video {
    opacity: 1;
    width: 5%;
    height: 5%;
    z-index: 1;
  }
  .margin-a {
    margin: 6px 12px 24px 16px;
  }
  .margin-b {
    margin: 24px 16px 6px 12px;
  }
  .border-a {
    border-width: 6px 12px 12px 12px;
  }
  .border-b {
    border-width: 12px 12px 5px 12px;
  }
</style>
</head>
<body>
  -gh-
  <div style="height: 5px; background-color: black;"></div>
  <div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div>
  <span style="display: inline-block; width: 60px; background-color: lime">-gh- -gh-</span>
  <div class="flex"></div>
  <div class="flex margin-a"></div>
  <div class="flex margin-b"></div>
  <div class="flex border-a"></div>
  <div class="flex border-b"></div>
  <div class="flex margin-a border-a"></div>
  <div class="flex margin-a border-b""></div>
  <div class="flex margin-b border-a"></div>
  <div class="flex margin-b border-b""></div>
  <div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div>
  <div style="height: 5px; background-color: black;"></div>
  </body>
</html>