src/third_party/WebKit/LayoutTests/compositing/geometry/abs-position-inside-opacity.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <title>Opacity and positioning</title>
   5   <style type="text/css" media="screen">
   6     .container {
   7       position: relative;
   8       height: 120px;
   9       width: 120px;
  10       padding: 10px;
  11       margin: 50px;
  12       -webkit-box-sizing: border-box;
  13       border: 1px solid black;
  14     }
  15
  16     .child {
  17       height: 100px;
  18       width: 100px;
  19       opacity: 0.8;
  20       background-color: red;
  21     }
  22
  23     .inner {
  24       position: absolute;
  25       width: 100px;
  26       height: 100px;
  27       background-color: green;
  28     }
  29
  30     .compositing {
  31       transform: translateZ(0);
  32     }
  33   </style>
  34 </head>
  35 <body>
  36 <p>You should see two green boxes below, with no red</p>
  37
  38 <div class="container">
  39   <div class="child">
  40     <div class="inner"></div>
  41   </div>
  42 </div>
  43
  44 <div class="container">
  45   <div class="child">
  46     <div class="inner compositing"></div>
  47   </div>
  48 </div>
  49
  50 </body>
  51 </html>