<!DOCTYPE html>
<!--
 | This test has an increased chance of failing when the insertion order of
 | positioned boxes into container boxes is not honored.
 -->
<html>
<head>
  <style>
    body {
      margin: 0px;
      font-family: Roboto;
      font-size: 18px;
    }
    .light-blue {
      background-color: #B3E5FC;
    }
    .teal {
      background-color: #26A69A;
    }
    .red {
      background-color: #F44336;
    }
    .relative {
      position:absolute;
      display:inline-block;
      width:20px;
      height:30px;
    }
    .box {
      min-height:30px;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    makebox = function(text, color) {
      var new_box = document.createElement('span');
      new_box.className = 'relative ' + color;
      new_box.textContent = text;
      return new_box;
    }

    window.onload = function() {
      var new_box_1 = makebox('1', 'teal');
      var new_box_2 = makebox('2', 'red');
      var new_box_3 = makebox('3', 'red');
      document.getElementById('parent1').appendChild(new_box_3);
      document.getElementById('parent1').appendChild(new_box_2);
      document.getElementById('parent1').appendChild(new_box_1);

      var new_box_z = makebox('Z', 'red');
      var new_box_y = makebox('Y', 'red');
      var new_box_x = makebox('X', 'teal');
      document.getElementById('parent2').appendChild(new_box_z);
      document.getElementById('parent2').appendChild(new_box_y);
      document.getElementById('parent2').appendChild(new_box_x);

      var new_box_p = makebox('P', 'red');
      var new_box_q = makebox('Q', 'teal');
      var new_box_r = makebox('R', 'red');
      document.getElementById('parent3').appendChild(new_box_p);
      document.getElementById('parent3').appendChild(new_box_r);
      document.getElementById('parent3').appendChild(new_box_q);

      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }
  </script>
</head>
<body>
  <div id="parent1" class="light-blue box"></div>
  <div id="parent2" class="light-blue box"></div>
  <div id="parent3" class="light-blue box"></div>
</body>
</html>