third_party/WebKit/LayoutTests/compositing/reflections/reflection-positioning.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: 20px;
  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       }
  22
  23       .box {
  24         width: 100px;
  25         height: 100px;
  26       }
  27
  28       .inner {
  29         position: absolute;
  30         top: 10px;
  31         left: 10px;
  32         background-color: green;
  33       }
  34
  35       .composited {
  36         transform: translateZ(0);
  37       }
  38
  39       .inner.moved {
  40         left: 25px;
  41       }
  42
  43       #indicator {
  44         position: absolute;
  45         top: 135px;
  46         left: 26px;
  47         background-color: red;
  48       }
  49     </style>
  50     <script type="text/javascript" charset="utf-8">
  51       function doTest() {
  52         document.getElementById('inner').className = 'inner moved box';
  53       }
  54       window.addEventListener('load', doTest, false);
  55     </script>
  56   </head>
  57
  58   <p>Position of reflected layer should update correctly. You should see no red below.</p>
  59   <div class="container">
  60     <div id="indicator" class="box"></div>
  61     <div class="reflected composited">
  62       <div id="inner" class="inner box">
  63       </div>
  64     </div>
  65   </div>
  66
  67 </html>