third_party/WebKit/LayoutTests/fast/reflections/opacity-reflection-transform.html

   1 <!DOCTYPE>
   2 <html>
   3   <head>
   4     <style type="text/css" media="screen">
   5       .box {
   6         width: 100px;
   7         height: 100px;
   8       }
   9
  10       .alpha {
  11         margin: 20px 100px;
  12         opacity: 0.9;
  13         border: 1px solid black;
  14       }
  15
  16       .reflected {
  17         width: 200px;
  18         background-color: green;
  19         -webkit-transform-origin: top left;
  20         transform: rotate(20deg);
  21         -webkit-box-reflect: right 20px;
  22       }
  23
  24     </style>
  25   </head>
  26
  27   <p>Test that opacity doesn't cause clipping of transformed, reflected content. You should see a rotated green box and its full reflection.</p>
  28   <div class="alpha box">
  29     <div class="reflected box">
  30     </div>
  31   </div>
  32 </html>