src/third_party/WebKit/LayoutTests/compositing/reflections/nested-reflection-transformed2.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     outline: 10px solid transparent; /* affects layer sizes */
  13   }
  14
  15   .inner {
  16     margin: 10px;
  17     width: 100px;
  18     height: 100px;
  19     background-color: green;
  20     text-align: center;
  21     font-size: 50pt;
  22     -webkit-box-reflect: below 10px;
  23   }
  24
  25   .composited {
  26     transform: translateZ(0);
  27   }
  28   </style>
  29   <script type="text/javascript" charset="utf-8">
  30     function doTest()
  31     {
  32       document.getElementById('inner').style.webkitTransform = 'rotate(10deg)';
  33     }
  34     window.addEventListener('load', doTest, false);
  35   </script>
  36   </head>
  37 <body>
  38   <p>Test transform change on reflected elements, with compositing layers larger than render layers. Left and right side should be symmetrical.</p>
  39   <div class="outer composited">
  40     <div id="inner" class="inner composited">
  41       1
  42     </div>
  43   </div>
  44 </body>
  45 </html>