src/third_party/WebKit/LayoutTests/compositing/overlap-blending/children-opacity-no-overlap.html

   1 <!DOCTYPE HTML>
   2 <html>
   3   <head>
   4     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   5     <style type="text/css" media="screen">
   6
   7       div {
   8         -webkit-box-sizing: border-box;
   9       }
  10       .solid {
  11         position: absolute;
  12         width: 100px;
  13         height: 100px;
  14         background-color: green;
  15       }
  16
  17       .opacity { opacity: .5; }
  18       .a { top: 0px; left: 0px;}
  19       .b { top: 200px; left: 200px;}
  20       .c { top: 200px; left: 0px;}
  21       .d { top: 0px; left: 200px;}
  22
  23       .composited {
  24         transform: translateZ(0);
  25       }
  26       * { margin: 0; padding: 0; }
  27
  28     </style>
  29   </head>
  30     <div class="composited opacity">
  31       <div class="solid composited a">1</div>
  32       <div class="solid composited b">2</div>
  33       <div class="solid composited c">3</div>
  34       <div class="solid composited d"></div>
  35     </div>
  36
  37 </html>