third_party/WebKit/LayoutTests/compositing/reflections/nested-reflection.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <style>
   6   .outer {
   7     width: 120px;
   8     height: 230px;
   9     margin: 20px;
  10     border: 1px solid black;
  11     -webkit-box-reflect: right 10px;
  12   }
  13
  14   .inner {
  15     margin: 10px;
  16     width: 100px;
  17     height: 100px;
  18     background-color: green;
  19     text-align: center;
  20     font-size: 50pt;
  21     -webkit-box-reflect: below 10px;
  22   }
  23
  24   .composited {
  25     transform: translateZ(0);
  26   }
  27
  28   </style>
  29   </head>
  30 <body>
  31 <p>You should see the original and three copies of the blue box.</p>
  32   <div class="outer composited">
  33     <div class="inner composited">
  34       1
  35     </div>
  36   </div>
  37 </body>
  38 </html>