src/third_party/WebKit/LayoutTests/compositing/reflections/nested-reflection-size-change.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: 140px;
   8     height: 270px;
   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   .bigger {
  25     width: 120px;
  26     height: 120px;
  27   }
  28   .composited {
  29     transform: rotate3d(0, 0, 1, 0);
  30   }
  31   </style>
  32   <script type="text/javascript" charset="utf-8">
  33     if (window.testRunner)
  34       testRunner.waitUntilDone();
  35
  36     function doTest()
  37     {
  38       window.setTimeout(function() {
  39         document.getElementById('inner').className = 'inner composited bigger';
  40         if (window.testRunner)
  41           testRunner.notifyDone();
  42       }, 0);
  43     }
  44     window.addEventListener('load', doTest, false);
  45   </script>
  46   </head>
  47 <body>
  48 <p>The four green squares should all be lined up.</p>
  49   <div class="outer box composited">
  50     <div id="inner" class="inner box composited">
  51       1
  52     </div>
  53   </div>
  54 </body>
  55 </html>