background-color-drawn-over-child.html

<!DOCTYPE html>
<html>
<head>
  <title>
  The background color of #backgournd_color_container div MUST be drawn below all children.
  However, the background color is drawn over the child #issue div.
  It's a minimal case of https://www.google.com/maps/views/explore?gl=us
  See crbug.com/345613
  </title>
  <style type="text/css">
    #backgournd_color_container {
      background-color: green;
      position: absolute;
      overflow: hidden;
      z-index: 0;
    }
    #nested_container {
      width: 200px;
      height: 200px;
      position: relative;
      overflow: hidden;
      z-index: 0;
    }
    #issue {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
    #compositing {
      left: 100px;
      top: 100px;
      width: 100px;
      height: 100px;
      position: absolute;
      background-color: blue;
      will-change: transform;
    }
  </style>
</head>
<body>
  <div id="backgournd_color_container">
    <div id="nested_container">
      <div id="issue"></div>
      <div id="compositing"></div>
    </div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/background-color/background-color-drawn-over-child.html