third_party/WebKit/LayoutTests/compositing/reflections/masked-reflection-on-composited.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     .box {
   7       height: 100px;
   8       width: 100px;
   9       margin: 20px;
  10       margin-bottom: 120px;
  11       background-color: green;
  12     }
  13
  14     .reflected {
  15       -webkit-box-reflect: below 2px
  16           -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
  17     }
  18
  19     .composited {
  20       transform: translateZ(0);
  21     }
  22   </style>
  23 </head>
  24 <body>
  25
  26 <p>Reflection should be masked with gradient.</p>
  27 <div class="reflected composited box">
  28 </div>
  29
  30 </body>
  31 </html>