<!DOCTYPE html>
<html>
<!--
 | This test ensures that a non-positioned element with an opacity less than 1
 | paints the layer it creates at the same stacking order that would be used if
 | it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’, impacting
 | all of its positioned ancestors. The results should not display "This line is
 | invisible."
 |   https://www.w3.org/TR/css3-color/#transparency
 -->
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 16px;
    }

    .positioned-container {
      position: absolute;
      width: 300px;
      height: 50px;
      background-color: #00CC00;
    }

    .opacity-test {
      position: static;
      opacity: 0;
      width: 300px;
      height: 50px;
      background-color: #00CC00;
    }

    .positioned-red {
      position: absolute;
      width: 400px;
      height: 20px;
      background-color: #FF0000;
      top: 60px;
    }
  </style>
</head>
<body>
  <div class="positioned-container">
    <div class="opacity-test">
      <div class="positioned-red"> This line is invisible. </div>
    </div>
  </div>
</body>
</html>