src/third_party/WebKit/LayoutTests/compositing/reflections/reflection-ordering.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Reflections Ordering</title>
   8   <style type="text/css" media="screen">
   9     .reflected {
  10       height: 100px;
  11       width: 200px;
  12       margin: 20px;
  13       border: 10px solid black;
  14       font-size: 18pt;
  15       text-align: center;
  16       background-color: white;
  17       -webkit-transform: translateZ(0);
  18       -webkit-box-reflect: below -80px;
  19     }
  20
  21     .composited {
  22       -webkit-transform: translateZ(0);
  23     }
  24   </style>
  25 </head>
  26 <body>
  27
  28 <p>You should see a black rectangle divided into two parts; the top part should be taller (reflection should be behind original).</p>
  29 <div class="reflected composited">Contents</div>
  30
  31 </body>
  32 </html>