src/third_party/WebKit/LayoutTests/compositing/reflections/reflection-opacity.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       .reflected {
  11         position: relative;
  12         width: 150px;
  13         height: 100px;
  14         background-color: green;
  15         opacity: 0.5;
  16         -webkit-box-reflect: below -50px;
  17       }
  18
  19       .composited {
  20         transform: translateZ(0);
  21       }
  22
  23     </style>
  24   </head>
  25
  26   <p>Opacity should be applied after reflection, so you should see a green rectangle below. The overlap between the original and reflection should not be visible.</p>
  27   <div class="reflected composited">
  28   </div>
  29
  30 </html>