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 src="resources/media-testing.js"></script>
  37     <script src="../media/media-file.js"></script>
  38
  39     <script type="text/javascript" charset="utf-8">
  40       function testDone()
  41       {
  42         if (window.layoutTestController)
  43           layoutTestController.notifyDone();
  44       }
  45
  46       function modifyDocument()
  47       {
  48           document.getElementById('details').scrollTop = 100;
  49       }
  50
  51       function doTest()
  52       {
  53           var video = document.getElementsByTagName('video')[0];
  54           setupVideo(video, 'resources/video', modifyDocument, testDone);
  55       }
  56     </script>
  57   </head>
  58   <body onload="doTest()">
  59       <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
  60         <div id="container">
  61           <video width="300" height="200"></video>
  62         </div>
  63
  64         <div id="details">
  65             <div>
  66               <div class="compositing"></div>
  67             </div>
  68         </div>
  69
  70   </body>
  71 </html>