<!DOCTYPE>
<html>
  <head>
    <title>Layer sizing with reflections</title>
    <style type="text/css" media="screen">
      .container {
        margin: 50px 200px;
        width: 300px;
        height: 150px;
        padding: 10px 20px;
        border: 1px solid black;
        -webkit-transform: translateZ(0);
      }
      
      .positioned {
        position: absolute;
        right: -60px;
        width: 240px;
        top: 40px;
        background-color: #DDD;
        padding: 10px;
        -webkit-box-reflect: left 10px;
        -webkit-transform: rotate(-40deg);
      }

    </style>
  </head>

  <p>Reflection should not be cropped by being in a composited layer.</p>
  <div class="container">
    <p>This element has a composited layer</p>
    <div class="positioned">
      <p>This is a positioned, reflected child.</p>
    </div>
  </div>
  
  <p>
    This is the next paragraph in the page.
  </p>
</html>