third_party/WebKit/LayoutTests/compositing/reflections/reflection-in-composited.html

   1 <!DOCTYPE>
   2 <html>
   3   <head>
   4     <title>Layer sizing with reflections</title>
   5     <style type="text/css" media="screen">
   6       .container {
   7         margin: 50px 200px;
   8         width: 300px;
   9         height: 150px;
  10         padding: 10px 20px;
  11         border: 1px solid black;
  12         transform: translateZ(0);
  13       }
  14
  15       .positioned {
  16         position: absolute;
  17         right: -60px;
  18         width: 240px;
  19         top: 40px;
  20         background-color: #DDD;
  21         padding: 10px;
  22         -webkit-box-reflect: left 10px;
  23         transform: rotate(-40deg);
  24       }
  25
  26     </style>
  27   </head>
  28
  29   <p>Reflection should not be cropped by being in a composited layer.</p>
  30   <div class="container">
  31     <p>This element has a composited layer</p>
  32     <div class="positioned">
  33       <p>This is a positioned, reflected child.</p>
  34     </div>
  35   </div>
  36
  37   <p>
  38     This is the next paragraph in the page.
  39   </p>
  40 </html>