cobalt/layout_tests/testdata/css3-flexbox/absolutely-positioned-children.html

<!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: 12px;
  }
  .flex {
    display: inline-flex;
    flex-flow: row wrap;
    color: fuchsia;
    background-color: yellow;
    opacity: 0.75;
    min-width: 400px;
    min-height: 200px;
    margin: 10px 20px 40px 30px;
    border: solid white;
    border-width: 10px 25px 25px 25px;
    -no-position: relative;
    -no-transform: translateX(0);
  }
  .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;
  }
</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: 40px; background-color: lime;">-gh-</span>
  <div class="flex">
      <video class="absolute" style="top: 20%;"></video>
      <video class="absolute" style="top: 30%; left: 0%;"></video>
      <video class="absolute" style="left: 20%;"></video>
      <video class="absolute" style="left: 30%; top: 0%;"></video>
      <video class="fixed" style="top: 40%;"></video>
      <video class="fixed" style="top: 50%; left: 0%;"></video>
      <video class="fixed" style="left: 40%;"></video>
      <video class="fixed" style="left: 50%; top: 0%;"></video>
      <span class="absolute" style="top: 60%;"></span>
      <span class="absolute" style="top: 70%; left: 0%;"></span>
      <span class="absolute" style="left: 60%;"></span>
      <span class="absolute" style="left: 70%; top: 0%;"></span>
      <span class="fixed" style="top: 80%;"></span>
      <span class="fixed" style="top: 90%; left: 0%;"></span>
      <span class="fixed" style="left: 80%;"></span>
      <span class="fixed" style="left: 90%; top: 0%"></span>
  </div>
  <div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div>
  <div style="height: 5px; background-color: black;"></div>
  </body>
</html>