LayoutTests/compositing/geometry/partial-layout-update.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <title>Partial layout compositing update</title>
   5
   6   <style type="text/css" media="screen">
   7   .container {
   8     position: relative;
   9     width: 400px;
  10     height: 200px;
  11     border: 1px solid black;
  12     overflow: hidden;
  13   }
  14
  15   .panel {
  16     position: absolute;
  17     top: 0px;
  18     left: 200px;
  19     width: 200px;
  20     height: 200px;
  21     z-index: 3;
  22     background-color: #bbb;
  23     -webkit-transition: left 0.1s linear;
  24   }
  25
  26   .box {
  27     width: 100px;
  28     height: 100px;
  29   }
  30
  31   .panel .content {
  32     background-color: green;
  33     -webkit-transform: translateZ(0);
  34   }
  35
  36   .indicator {
  37     position: absolute;
  38     top: 0;
  39     left: 0;
  40     background-color: red;
  41   }
  42   </style>
  43   <script type="text/javascript" charset="utf-8">
  44     if (window.layoutTestController)
  45       layoutTestController.waitUntilDone();
  46
  47     function startProgram()
  48     {
  49       var panel = document.getElementById("panel");
  50       panel.addEventListener('webkitTransitionEnd', function() {
  51         if (window.layoutTestController)
  52           layoutTestController.notifyDone();
  53       }, false);
  54       panel.style.left = "0";
  55     }
  56
  57     window.addEventListener('load', startProgram, false)
  58     </script>
  59 </head>
  60 <body>
  61
  62   <p>The green box should always obscure the red box below.</p>
  63   <div class="container">
  64     <div id="panel" class="panel">
  65       <div class="indicator box"></div>
  66       <div class="content box"></div>
  67     </div>
  68   </div>
  69
  70 </body>
  71 </html>