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         document.getElementById('scroller').scrollTop = 50;
  60         if (window.testRunner)
  61           testRunner.notifyDone();
  62       }
  63
  64       function doTest()
  65       {
  66         var video = document.getElementsByTagName('video')[0];
  67         setupVideo(video, '../resources/video', testDone);
  68       }
  69     </script>
  70 </head>
  71 <body onload="doTest()">
  72
  73   <div class="indicator box"></div>
  74
  75   <div class="container">
  76     <div id="scroller">
  77         <div class="content">
  78             <div class="tester box"></div>
  79         </div>
  80     </div>
  81     <p>The green box should obscure the red box, and move when you drag the scrollbar.</p>
  82   </div>
  83
  84   <video></video>
  85
  86 </body>
  87 </html>