LayoutTests/compositing/layers-inside-overflow-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Layers inside overflow-scroll</title>
   5
   6     <style type="text/css" media="screen">
   7
   8     #container {
   9       width: 300px;
  10       margin: 10px;
  11       border: 1px solid black;
  12     }
  13
  14     #details {
  15      width: 300px;
  16      height: 150px;
  17      margin: 10px;
  18      overflow: auto;
  19      border: 1px solid black;
  20     }
  21
  22     #details > div {
  23       width: 100%;
  24       height: 500px;
  25       font-size: 24pt;
  26       line-height: 150%;
  27     }
  28
  29     .compositing {
  30       height: 100px;
  31       width: 100px;
  32       background-color: red;
  33       -webkit-transform: translateZ(0);
  34     }
  35     </style>
  36     <script type="text/javascript" charset="utf-8">
  37       if (window.layoutTestController)
  38         layoutTestController.waitUntilDone();
  39
  40       function testOnLoad()
  41       {
  42         window.setTimeout(function() {
  43           document.getElementById('details').scrollTop = 100;
  44           if (window.layoutTestController)
  45             layoutTestController.notifyDone();
  46         }, 0);
  47       }
  48
  49       window.addEventListener('load', function() {
  50         var video = document.getElementById('video');
  51         video.addEventListener('loadeddata', testOnLoad, false);
  52         video.src = 'resources/video.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mp4');
  53       }, false);
  54     </script>
  55   </head>
  56   <body>
  57       <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
  58         <div id="container">
  59           <video id="video" width="300" height="200"></video>
  60         </div>
  61
  62         <div id="details">
  63             <div>
  64               <div class="compositing"></div>
  65             </div>
  66         </div>
  67
  68   </body>
  69 </html>