third_party/WebKit/LayoutTests/compositing/reflections/transform-inside-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     border: 1px solid black;
  19     -webkit-box-reflect: below 10px;
  20   }
  21
  22   #transformed {
  23     margin: 10px;
  24     width: 80px;
  25     height: 80px;
  26     background-color: green;
  27     text-align: center;
  28     font-size: 50pt;
  29   }
  30
  31   </style>
  32   <script type="text/javascript" charset="utf-8">
  33     function doTest()
  34     {
  35       document.getElementById('transformed').style.webkitTransform = 'rotate3d(0, 0, 1, 10deg)';
  36     }
  37     window.addEventListener('load', doTest, false);
  38   </script>
  39   </head>
  40 <body>
  41   <p>Transform inside nested reflections should be applied correctly. You should see four rotated green boxes, as mirror images of each other.</p>
  42   <div class="outer">
  43     <div id="inner" class="inner">
  44       <div id="transformed"></div>
  45     </div>
  46   </div>
  47 </body>
  48 </html>