src/third_party/WebKit/LayoutTests/compositing/overflow/scroll-ancestor-update.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style type="text/css" media="screen">
   6
   7         body {
   8             margin: 0;
   9         }
  10
  11         video {
  12             width: 100px;
  13             height: 100px;
  14         }
  15
  16         .container {
  17             position: absolute;
  18             top: 50px;
  19             left: 50px;
  20             height: 200px;
  21             width: 200px;
  22         }
  23
  24         #scroller {
  25             overflow-y: scroll;
  26             height: 200px;
  27             width: 200px;
  28             border: 1px solid black;
  29         }
  30
  31         .content {
  32             height: 500px;
  33         }
  34
  35         .box {
  36             height: 100px;
  37             width: 100px;
  38         }
  39
  40         .tester {
  41             position: relative;
  42             margin-top: 50px;
  43             background-color: green;
  44         }
  45
  46         .indicator {
  47             position: absolute;
  48             left: 50px;
  49             top: 50px;
  50             background-color: red;
  51         }
  52     </style>
  53
  54     <script src="../resources/media-testing.js"></script>
  55     <script src="../../media/media-file.js"></script>
  56     <script type="text/javascript" charset="utf-8">
  57       function testDone()
  58       {
  59         if (window.testRunner)
  60           testRunner.notifyDone();
  61       }
  62
  63       function modifyDocument()
  64       {
  65         document.getElementById('scroller').scrollTop = 50;
  66       }
  67
  68       function doTest()
  69       {
  70         var video = document.getElementsByTagName('video')[0];
  71         setupVideo(video, '../resources/video', modifyDocument, testDone);
  72       }
  73     </script>
  74 </head>
  75 <body onload="doTest()">
  76
  77   <div class="indicator box"></div>
  78
  79   <div class="container">
  80     <div id="scroller">
  81         <div class="content">
  82             <div class="tester box"></div>
  83         </div>
  84     </div>
  85     <p>The green box should obscure the red box, and move when you drag the scrollbar.</p>
  86   </div>
  87
  88   <video></video>
  89
  90 </body>
  91 </html>