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

   1 <!DOCTYPE HTML>
   2 <html>
   3   <head>
   4     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   5     <style type="text/css" media="screen">
   6
   7       div {
   8         -webkit-box-sizing: border-box;
   9       }
  10       .container {
  11         position: absolute;
  12         left: 50px;
  13         top: 50px;
  14       }
  15       .reflected {
  16         position: relative;
  17         width: 150px;
  18         height: 120px;
  19         border: 1px solid black;
  20         -webkit-box-reflect: below 6px;
  21         outline: 10px solid transparent; /* affects layer sizes */
  22       }
  23
  24       .box {
  25         width: 100px;
  26         height: 100px;
  27       }
  28
  29       .inner {
  30         position: absolute;
  31         top: 10px;
  32         left: 10px;
  33         background-color: green;
  34       }
  35
  36       .composited {
  37         transform: translateZ(0);
  38       }
  39
  40       .inner.moved {
  41         left: 25px;
  42       }
  43
  44       #indicator {
  45         position: absolute;
  46         top: 135px;
  47         left: 26px;
  48         background-color: red;
  49       }
  50     </style>
  51     <script type="text/javascript" charset="utf-8">
  52       function doTest() {
  53         document.getElementById('inner').className = 'inner moved box';
  54       }
  55       window.addEventListener('load', doTest, false);
  56     </script>
  57   </head>
  58
  59   <p>Position of reflected layer should update correctly. You should see no red below.</p>
  60   <div class="container">
  61     <div id="indicator" class="box"></div>
  62     <div class="reflected composited">
  63       <div id="inner" class="inner box">
  64       </div>
  65     </div>
  66   </div>
  67
  68 </html>