third_party/WebKit/LayoutTests/compositing/overflow/transform-should-update-absolute-clip-rects.html

   1 <!DOCTYPE html>
   2 <style>
   3   #slidein {
   4     width: 200px;
   5     height: 200px;
   6     transform: translate3d(0, 0, 0);
   7   }
   8
   9   #header {
  10     position: relative;
  11     height: 50px;
  12     z-index: 1;
  13     background-color: green;
  14   }
  15
  16   #section {
  17     position: absolute;
  18     overflow: hidden;
  19     top: 0;
  20     width: 200px;
  21   }
  22
  23   #content {
  24     width: 200px;
  25     height: 200px;
  26     transform: translateZ(0);
  27     background-color: blue;
  28   }
  29 </style>
  30
  31 <script>
  32   if (window.testRunner)
  33       testRunner.waitUntilDone();
  34
  35   var offset = 0;
  36   function slideIn() {
  37     if (offset == 0) {
  38       offset = 200;
  39       requestAnimationFrame(slideIn);
  40     } else if (window.testRunner) {
  41       document.getElementById("slidein").style.webkitTransform = "translate3d(" + offset + "px, 0, 0)";
  42       testRunner.notifyDone();
  43     }
  44   }
  45   requestAnimationFrame(slideIn);
  46 </script>
  47
  48 <div id="slidein">
  49   <div id="header">This div should stay in front.</div>
  50
  51   <div id="section">
  52     <div id="content">
  53       This div should stay behind the header div.
  54     </div>
  55   </div>
  56 </div>