third_party/WebKit/LayoutTests/compositing/squashing/squash-overflow-hidden-scrolltop.html

   1 <!DOCTYPE html>
   2
   3 <style type="text/css" media="screen">
   4   .container {
   5     display: inline-block;
   6     width: 200px;
   7     height: 200px;
   8     overflow: hidden;
   9     margin: 10px;
  10     border: 1px solid black;
  11   }
  12
  13   .inner {
  14     width: 100%;
  15     height: 1000px;
  16     background-color: blue;
  17   }
  18
  19   .compositing {
  20     position: absolute;
  21     top: 20px;
  22     left: 20px;
  23     width: 100px;
  24     height: 100px;
  25     transform: translateZ(0);
  26   }
  27
  28   .top {
  29     height: 50%;
  30     width: 100%;
  31     background-color: red;
  32   }
  33
  34   .bottom {
  35     height: 50%;
  36     width: 100%;
  37     background-color: green;
  38   }
  39 </style>
  40 <script type="text/javascript" charset="utf-8">
  41   if (window.testRunner)
  42     testRunner.waitUntilDone();
  43
  44   function doTest()
  45   {
  46     window.setTimeout(function() {
  47      // alert('hi');
  48       var scrollables = document.querySelectorAll('.container');
  49       for (var i = 0; i < scrollables.length; ++i) {
  50         scrollables[i].scrollTop = 500;
  51       }
  52
  53
  54       if (window.testRunner)
  55         testRunner.notifyDone();
  56
  57     }, 0);
  58   }
  59
  60   window.addEventListener('load', doTest, false);
  61 </script>
  62
  63 <!-- Go into compositing. -->
  64 <div class="compositing"></div>
  65
  66 <!-- Test repainting when the graphicsLayer offsetFromRenderer changes -->
  67 <!-- You should see one green square, and no red -->
  68 <div class="container" style="position: relative;">
  69   <div class="inner" style="position: relative;">
  70     <div class="top"></div>
  71     <div class="bottom"></div>
  72   </div>
  73 </div>